CMS Development

sancybalani
Member

Popup HubSpot form on CTA click

SOLVE

Hi,

I need to load a hubspot form as a popup upon a CTA click.  The objective is to seek GDPR consent when a user submits a signup form. I dont want to include all the GDPR consent text on the webpage as it will make the form very bulky hence we want to popup the GDPR consent form when a user clicks a button. 

 

I understand button click trigger is not possible with lead flows. Is there any other way we can do this

2 Accepted solutions
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

Thanks @VeronikaT  - Can you please add this CSS to your site? Then put the text link wherever you need it to go and the styles should be picked up by the CSS.

 

<style>
a[data-micromodal-open] {
        -webkit-font-smoothing: antialiased;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    background: rgb(0,207,255);
    border-radius: 6px;
    border-width: 0px;
    color: rgb(255,255,255);
    font-family: sans-serif;
    height: auto;
    transition: all .4s ease;
    padding: 6px 18px;
    text-shadow: none;
    width: auto;
    font-size: 24px;
    line-height: 1.5em;
    width: auto;
    min-height: 30px;
    padding: 16px 40px;
    margin-top: 40px;
    align-self: auto;
    border-radius: 4px;
    background-color: #00cfff;
    font-family: 'Linotype avenirnextltpro demi', sans-serif bold;
    color: #fff;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}
</style>

 

View solution in original post

DomRychlik
Solution
HubSpot Product Team
HubSpot Product Team

Popup HubSpot form on CTA click

SOLVE

Hi all, my name is Dom and I'm one of the Product Managers at HubSpot. I've some exciting news to share - we have launched a brand new pop-up tool in HubSpot Marketing Hub and CMS Hub into public beta today that allows you to do exatcly that. If you're interested in joining the beta, please DM me and I can add you in!

View solution in original post

178 Replies 178
KongGroup
Participant

Popup HubSpot form on CTA click

SOLVE

Hi.

I am not a specialist or so. I could follow most of your steps, but what do you mean by "paste it somewhere"? 

0 Upvotes
Wdhathcock
Member

Popup HubSpot form on CTA click

SOLVE

I'm having some trouble making this work -- I've embedded both codes on a WP blog psot (you can see the preview here: https://uptickapp.com/?p=7336&preview=1&_ppp=2ac5094382) but when I test it out and click the link, it just reloads the page with no popup form.

0 Upvotes
MarleneS
Member

Popup HubSpot form on CTA click

SOLVE

Hi! I'm wondering if anyone could help me to solve a problem with the pop up form made with Belch.IO

I've followed all the steps written in the post, and pasted the code to Divi (WordPress). The problem is that when I press the CTA, the pop up appears but text and images from the background are superimposed. (example attached)

 

Does anyone know how to solve this? Thanks!

 

Screen Shot 2020-07-28 at 13.24.45.jpg

0 Upvotes
AdeleTib
Contributor

Popup HubSpot form on CTA click

SOLVE

Did you happen to find a resolution to this issue? We had a similar issue where the overlay is not applied to all elements of specific pages - with the form overlaying most text but not the navigation, sliders, and footer elements.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

Easy fix if you can provide us a link to your page with the form in it 😄

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

Hi @MarleneS 

Can you please provide a link to the page this is on? You have some z-index setting issues in the CSS we can help you work through

0 Upvotes
MarleneS
Member

Popup HubSpot form on CTA click

SOLVE

Hi @tjoyce 

Sure! 

https://www.opportunitynetwork.com/lp-bbva/#

 

It also happens that when I press the CTA of the bottom it redirects me to the above the fold. Maybe I did something wrong

 

Thanks for helping me! 

0 Upvotes
Jelmert
Participant

Popup HubSpot form on CTA click

SOLVE

Thank you for this! Is there any way to make the "click me" a button and not just a clickable text? @tjoyce 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

@Jelmert - NP, and yes, if you give me the link to the page your form is on, I can steal the classes from your other buttons in the site and show you how to add them to the popup form trigger

0 Upvotes
Jelmert
Participant

Popup HubSpot form on CTA click

SOLVE

@tjoyce https://www.hrorganizer.com/tessst?hs_preview=zxzCduza-31960573137

 

This was a webpage to try the popup form. There is now only the "click me" text that pop ups the form.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

@Jelmert - If you add the same CSS you have from your homepage, to this page, you can remove the button and replace it with this, and it will still work (and have the styles like the butttons on your homepage).

 

<a href="#" class="button button-xlarge button-green topmargin-lg" data-micromodal-open="modal-VQTXZCHKGWYPUSYF">Click Me</a>
0 Upvotes
Jelmert
Participant

Popup HubSpot form on CTA click

SOLVE

@tjoyce Thank you very much for your help! 

0 Upvotes
JaredMoats
Participant

Popup HubSpot form on CTA click

SOLVE

Tim, this is incredibly helpful! Quick question though:

 

Is it possible to do this with a HubSpot calendar instead of a form? 

0 Upvotes
elanashama
Top Contributor

Popup HubSpot form on CTA click

SOLVE

Thank you for the solution, it's great.

 

When using these pop-ups, is it possible to redirect the user to another hubspot page upon form submission? Or is there another way to do that?

I'd like to create a pop-up form on CTA click that redirects to another page.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

Hi @elanashama  - You would just set your redirect on the form within your HubSpot portal. Instead of an inline message, you would choose redirect to page.

David_M
Participant

Popup HubSpot form on CTA click

SOLVE

As simple as I don't want labels 🙂

 

No option to remove labels... The help text on hubspot input fields is enough for my forms...

0 Upvotes
williampatey
Member

Popup HubSpot form on CTA click

SOLVE

Is there any way to trigger this using a button module in divi?

smartcrumbs
Participant

Popup HubSpot form on CTA click

SOLVE

I have the same problem. Did you find a solution to it?
Thank you so much!

0 Upvotes
CPCSupport
Participant

Popup HubSpot form on CTA click

SOLVE

This is awesome thanks. Is it at all possible to trigger a HS pop-up form by clicking on a button on a page.

 

Scenario is we have an existinig pop-up form but also want users to go back to that form further down the page by way of clicking on a button. They may have cancelled the pop-up to start with but then readinig more on the page they want to access it again.

 

I see how this works for an embedded form but I'd like to be able to somehow trigger the existing pop-up form to 'reopen' on the page (rather than create a separate pop-up form which will then need separate workflows etc...

smartcrumbs
Participant

Popup HubSpot form on CTA click

SOLVE

Did you find a solution for this? Thank you!

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

@CPCSupport - you can place the second embed code which is the button anywhere in the page and as many times in the page as you like, and it should trigger the original embed form.