Popup HubSpot form on CTA click

[sancybalani]

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

[tjoyce · Accepted solution]

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>

[KongGroup]

Hi.

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

[Wdhathcock]

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.

[MarleneS]

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!

[AdeleTib]

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.

[tjoyce]

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

[tjoyce]

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

[MarleneS]

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! 

[Jelmert]

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

[tjoyce]

@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

[Jelmert]

@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.

[tjoyce]

@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>

[Jelmert]

@tjoyce Thank you very much for your help! 

[JaredMoats]

Tim, this is incredibly helpful! Quick question though:

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

[elanashama]

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.

[tjoyce]

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]

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...

[williampatey]

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

[smartcrumbs]

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

[CPCSupport]

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]

Did you find a solution for this? Thank you!

[tjoyce]

@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.