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>

[David_M]

Hi Dom, could I have access to the beta as well? 

[DomRychlik]

Hi David, no worries, if you DM me your Hub ID I can add you in today

[ADhiman1]

Hey Dom, can you please add me to beta as well? Hubspot ID: 2563246

[DomRychlik]

hi there, just added you in!

[DHehl]

Hello there @DomRychlik,

can I please have access to the beta version of the Hubspot Popup form tool?

Many Thanks!

Dan

[DomRychlik]

Hi there, if you DM me your Hub ID I can add you in!

[BChaplin]

Please also add me- I've DM you

[BChaplin]

Please also add me - I've DM you

[Jelmert]

Hey @DomRychlik I would like to join the beta 🙂

[DomRychlik]

hi @Jelmert - I've added you now!

[T20Mile]

@tjoyce I have gone through the steps to create my popup form with Belch.io and I have embedded the first code into the header, but the button is not populating only the text. 

[AMazarío]

@tjoyce  When I add the button code to my page the only thing that shows is the text. The form loads fine when I click the text but there is no button. Did I miss something or could you help me troubleshoot? Here is my test page: https://www.eneasconsultores.com/fundae-l/

I have two buttons called: "Quiero informarme sobre la formación" and "Quiero aprovechar mis regalos (+ ICON)"

[DomRychlik]

Hi Charles, thanks for reaching out and would love to chat too. Let’s connect offline -- if you DM me and let me know a time when you’re available for a chat we can arrange a quick call.

[bpcharles]

Hi Dom,

        This is kind of akward that you'd be asking for the community's feedback on this but haven't reached out to @tjoyce and our team at Belch.io that's already solving problems like this for thousands of HubSpot customers. We see Hubspot UX Researchers digging around in our tools, and it sure feels like we're doing R&D for you guys, but being left out of conversations like these at the same time. Would love to chat.

[DomRychlik]

Hi HubSpot Community,

I'm Dom and I’m a Product Manager at HubSpot. I’m really interested in chatting to folks about this particular use case and generally chatting about how you're currently using CTAs, what’s working, what’s not working and what new functionality you’d like to see in the future. Please DM me if you’re interested in sharing your feedback and jumping on a quick 30 min call with myself and the team.

Best,

Dom

[RGrimsley]

Hey, Dom! Is there any chance I could be added to this beta? What information do I need to DM you?

[sauloavelar]

Hey @DomRychlik , 

Definitely interested in chatting with you. 

Thanks

[NKang1]

Hi there, I also want to know that if there is an alternate way to track clicks for non Form Step Pop-ups, since this would be useful in tracking the effectiveness of our efforts to reduce page exits through the use of free sample offers on pop-ups. I know that HubSpot only tracks clicks and click through rate for pop-up forms that have Form step selected in the section.

If any other type of pop-up form is selected in this section HubSpot will track views only. Could you also help? @tjoyce 

Any ideas? Thanks!

[RafaelCm]

Hey there, 

did you find any solution to this?

My only idea would be to add a UTM-parameter to my external URL to which I link via CTA-click...

Regards!

[JWharton]

@tjoyce thanks this works great, but I'm having a problem with the close button. On desktop (Safari) it appears as a white oval and non-intuitive. On mobile (Safari again) it's sometimes white, and sometimes green with an x, but always halfway buried under the browser address bar. That part wouldn't be so bad if there was scrolling, but there's not. Please see attached.

mobile 1mobile 2desktop

[tjoyce]

Hi @JWharton - It's most likely your current CSS is interfering with the form, if you would like to drop a link to the page here, i can help you with the css... or you can jump in my slack channel and chat me there.