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
JodieMul
Member

Popup HubSpot form on CTA click

SOLVE

Hi Tim

 

Thanks for the detailed instructions, however, when I paste the code into the page header html in Hubspot, a lot of it isn't recognised as code. What am I doing wrong?

 

Thanks

 

J

MiguelM
Participant

Popup HubSpot form on CTA click

SOLVE

Hello Tim,

 

Thank you for this wonderful solution. Also, I was wondering if Belch offers a solution to customize the trigger generated by the tool? Because actually its a simple text linked.

 

Or is there any way to use a theme's button (Wordpress themes) associated with the generated code by Belch?

0 Upvotes
nikk
Participant

Popup HubSpot form on CTA click

SOLVE

Hey @tjoyce,

 

I teseted out the belch.io tool and it works great! I was wondering, however, if there is a way to connect the pop-up that is created to a CTA button?

tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

@nikk - There is a way, it's much more involved with custom javascript and something we couldn't build into the tool because of the way cta's are dynamically loaded into the page. We could try and get you some code that would convert the belch button to a cta trigger if you want to share your preview with us. 

Make sure the page has the belch codes as well as the cta you are looking to use as a trigger.

Dunja
Member

Popup HubSpot form on CTA click

SOLVE

Hi, @tjoyce! I have this exact problem. Is it doable to connect forms with CTA buttons or import data from other forms into Hubspot in some way? 

 

Thanks in advance for your help!

0 Upvotes
tpaton
Participant

Popup HubSpot form on CTA click

SOLVE

I just wanted to clarify - how can we attach the open code that Belch produces to a CTA? All we are allowed to enter in the HubSpot backend is a plain URL - how do I attach the button to the full line of code?

 

Thanks.

0 Upvotes
tette_engage
Top Contributor

Popup HubSpot form on CTA click

SOLVE

@tpaton  if you use e.g. a rich text module, just open the source code and paste something similar to this:

<a class="cta_button_contactus" data-micromodal-open="modal-EPMXUASQDRNISKFQ">Contact Us</a>

 

And then you can style "cta_button_contactus" in your css

0 Upvotes
Jmcdermott13
Member

Popup HubSpot form on CTA click

SOLVE

Hi @tjoyce I am looking for a similar solution and am wondering if you could provide some support on how to link a pop-up form to a CTA? 

tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Popup HubSpot form on CTA click

SOLVE

@Jmcdermott13 - I updated my answer. Hope this helps

roisinkirby
HubSpot Product Team
HubSpot Product Team

Popup HubSpot form on CTA click

SOLVE

Hey @sancybalani I don't beleive this is possible, but I"m not 100% sure. 

 @MFrankJohnson have you ever created popup forms w/ HubSpot CTAs?

0 Upvotes
MFrankJohnson
Thought Leader

Popup HubSpot form on CTA click

SOLVE

Hey @roisinkirby, I haven't but maybe @tjoyce or @Jsum has a solution. Their HubL and .js kung fu is powerful. 🙂

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com