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>

[JFrech]

Hi Tom, 

Are you still willing to help with some quirky CSS issues with deploying the button/form on case to case basis? 

I've tried with our page: https://www.callrevu.com/pricing but the button doesn't appear, just the link text, although the form does function properly. Any chance you could help us find the solution for our gremlins breaking the button?

[tjoyce]

Hi @JFrech - Where is your button/popup link text on this page?

[JFrech]

Hi Tom!

I apologize, I wasn't sure if this thread was still active, so I had pulled it down while I was waiting to hear something- I recreated the page here: https://www.callrevu.com/pricing-2 and the button is active in the hero section at the top, it just doesn't look like a button. Thank you so much for taking a peek for us!! 

[JFrech]

Quick update- 

I was able to find a workaround in replacing the text for the button in the line of embed code used to place it with an image instead! Probably not ideal, but it works!  Results: https://www.callrevu.com/pricing 

[tette_engage]

And if you want to style the button, just give it a class in the source code of the rich text, and then add the styling in your css 🙂 @lorennaeunapio 

[RAIDBOXES]

must have!

[ClinicalHQ]

I don't see my "pop-up forms" as options when I use this tool.  Only regular forms.  Is there a way to have their pop-up forms work with this same system?

Goal:

I want to have a text/button that when triggered loads a form, which when completed, triggers a download to a hubspot file.  (Gated download).

The hubspot pop-up form works for this, but has no direct embed capability.

A CTA has a file download option, but no gating capability.

A form collects data, but has no file download option at the end.

Help?

[tjoyce]

@ClinicalHQ - don't forget step 3, it will take you right to the popup form 

https://startups.belch.io/popup*

*Edited by moderator on May 31 2023: The service belch.io is no longer available. 

[ClinicalHQ]

@tjoyce  right but on that popup maker it doesn't let me pick from a Hubspot Popup form only a Hubspot regular form.

[Kmoloo]

@ClinicalHQ - That's right. To clarify, HubSpot pop-up forms aren't what you want to use in this case, you want to use a normal HubSpot form with the Belch form builder. The embed code that Belch produces will give you what you need for the button to trigger a pop-up and display your form.

[tjoyce]

Hi @sancybalani,

Could you please provide us with a preview link that contains your cta so we may tinker with some code and attempt to get you some kind of solution?

[tette_engage]

@tjoyce Since OP has gone AWOL, I could provide you with my preview-link as I need something similar.

http://www.prometheusone.io/-temporary-slug-4e5aaf48-7cf5-46b3-8d64-14e1c05d15e1?hs_preview=flOzfgzd...

As you can see, the form is like the goblins in Moria (all over the place). I could try to play with the lay-out a little to get it to look goof (or at least better), but the ideal situation is a 'Subscribe' button, which opens the form in a small pop-up window, which then closes after you click 'submit'.

[mbutter]

What was the solution here?

[Kmoloo]

Use the Belch tool that @tjoyce mentioned and his process. Then, instead of a HubSpot CTA, just use the Belch button embed and you can look at tracking on the form level instead of the cta level.  You'll still see form views and submissions and can create your conversion rate from it.  If you want to see button clicks, you could set that up in the events tool if you use marketing hub enterprise.

[tjoyce]

Follow Carefully and reply with questions if you have any trouble.

I'll try to make it as simple as possible 😄 

1. Head over to https://startups.belch.io*

*Edited by moderator on May 31 2023. The service belch.io is no longer available. 

[zlukasiewicz]

This service has been shut down. Please remove admins

[MiaSrebrnjak]

Thank you for flagging @zlukasiewicz! 

Cheers
Mia, Community Team 

[dsanchezRW]

Hey Tim, it appears like the app or the link to install the app is currently down. We're trying to create a button activated pop-up form and would like an ETA on this issue.

[Creativesoul]

Hey Tim,

I am having a hard time downloading your app to Hubspot.  HS support said the har file might be the issue?  Could you help?

Kind Regards,

Casey

[sauloavelar]

Hey @tjoyce ,

Great functionality.

Unfortunately, it didn't work for me. 

See, I am trying to add a pop-up form to my LP and I was pasting the code on the Footer (advanced settings) and the Href on the button custom link and I am getting a 404 Error. 

Any chance you'd know how to actually make it work?

Thank you,

Sal 

[KHardisty]

Looking to trigger a pop-up after submission of another form. I know I can have HS run a script after a form is submitted, so do you know if a pop-up form could be triggered via script? 

This would be very clean and an easy way to trigger a pop-up form.