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
Christo
Contributor

Popup HubSpot form on CTA click

SOLVE

I only see one code block for the pop-up form. There isn't a second code block for the button which triggers the popup. So it isn't as helpful as I'd hoped 

0 Upvotes
TJoyce7
Participant | Diamond Partner
Participant | Diamond Partner

Popup HubSpot form on CTA click

SOLVE

You must be at forms.belch.io instead of startups.belch.io @Christo 

0 Upvotes
MScheid13
Participant

Popup HubSpot form on CTA click

SOLVE

@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.swoovy.com/offer-download

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

Popup HubSpot form on CTA click

SOLVE

Hi @MScheid13 - Can you please add this css to your page?

*['data-micromodal-open']{
display: inline-block;
    width: auto;
    height: auto;
    padding: 1em 2.5em;
    color: #fff;
    background-color: #272727;
    border-width: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 1em;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: normal;
    padding: 21px 34px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: din-2014;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #fff;
    background-color: #0b4065;
    border-color: #0b4065;
    border-radius: 99em;
}
0 Upvotes
MScheid13
Participant

Popup HubSpot form on CTA click

SOLVE

I was able to use your reply to  @VeronikaT  - to make it work on my page. Tks!!

MScheid13
Participant

Popup HubSpot form on CTA click

SOLVE

Unfortunately, that didn't seem to help unless I made a mistake when adding it. https://www.swoovy.com/offer-download#

 

Are you able to see something that I missed? 

0 Upvotes
Saper
Contributor

Popup HubSpot form on CTA click

SOLVE

@tjoyce  I guess I'm doing something wrong. Our web page is on HubSpot. When I copy the code and go to settings to insert the code to the site header, it says that there is an error and can't save the HTML. Any recommendations?

0 Upvotes
tette_engage
Top Contributor

Popup HubSpot form on CTA click

SOLVE

@Saper  If you use HubSpots design tools - I paste the code into a custom html module and insert it to the template's header section 🙂

Saper
Contributor

Popup HubSpot form on CTA click

SOLVE

Great! Thank you very much @tette_engage !

0 Upvotes
lorennaeunapio
Participant

Popup HubSpot form on CTA click

SOLVE

Hey there, 

 

I loved this tool and I guess it will solve what we need on some landing pages that we have. However, in the example above you described the use of the code on Wordpress. How would I be able to add this code to a Hubspot landing page? Do you have any idea? There is no drag and drop HTML section, so I can add the code. Also, on the CTA, I have no clue on where I could add it. Would I have to create a button instead of a CTA? 

 

Would you be able to give me some help here, please?

Thank you very much!

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

Popup HubSpot form on CTA click

SOLVE

@lorennaeunapio - You could use this in an HS page by doing the following

Add the first embed code that you get to the Advanced Head HTML section of your HS page in the page settings

Then take the second embed code which is the button and place it in the source code of any richtext area (if you send us a link to the page you're working on, we can help you style the button)

You wouldn't need to create a CTA in HS for this, you would just drop the button embed anywhere on the page. 

 

Hope this helps

 


If this answer helped, please, mark as solved 😄

 

Drop by and say Hi to me on slack.

0 Upvotes
VeronikaT
Participant

Popup HubSpot form on CTA click

SOLVE

Hey @tjoyce , I've created the form in Blecj.io, and now want to connect it to a CTA on my HubSpot LP (click on CTA -> Form opens).

I already added the first embed code to the Advanced HTM section of the HS page.

But now when I add the second embed code to a rich text area, I just get a hyperlinked text - how can I style it so it's a nice CTA instead of a text?

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

Popup HubSpot form on CTA click

SOLVE

@VeronikaT - Can you please link me to the page your form is on?

VeronikaT
Participant

Popup HubSpot form on CTA click

SOLVE

@tjoyce , sure: https://info.getciara.com/-temporary-slug-9c532bbd-3bf9-462e-bdc9-80814829a87f?hs_preview=ohalXKya-4...

The CTA "Download now for free" in the header is what I originally wanted to link to the pop-up form, so ideally, I style the text, so it looks like that button.

0 Upvotes
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>

 

VeronikaT
Participant

Popup HubSpot form on CTA click

SOLVE

Thanks so much @tjoyce , worked!! 🤗

elanashama
Top Contributor

Popup HubSpot form on CTA click

SOLVE

Hi @VeronikaT, you can design the link as a CTA by using CSS. Just add a border around the link text and give it some padding.

e.g. border: solid 2px #555; padding: 15px 40px;

lorennaeunapio
Participant

Popup HubSpot form on CTA click

SOLVE

Thank you very much! We're getting close. Here is the page preview: https://info.danavation.com/how-much-do-digital-smart-labels-cost/-0?hs_preview=CekSvMGl-37066676612

Let me know if you are able to see it. 

 

The button link is right under the "Get a Free Estimate" button, but you need to hover over the mouse to see the "Click me" link. The style should be the same as the CTA above. 

Regarding the form, is there any way to get rid of the white box around the form blue box? I guess the blue colour is coming from the global theme settings, as I set the form to have a white background - but that I can fix later, I would just like to get rid of the white box around the form box. 

Please let me know, and thank you very much!

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

Popup HubSpot form on CTA click

SOLVE

Glad to hear @lorennaeunapio - It looks like you may have grabbed a different button but kept the same popup form... your button shoule be 

<a href="#" data-micromodal-open="modal-DANSYZSGXYUMQMVC">Click Me</a>

 

then add the following css to the head html section

<style>
.modal-cta {
    -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(28,81,159);
    border-radius: 6px;
    border-width: 0px;
    color: rgb(255,255,255);
    font-family: sans-serif;
    height: auto;
    transition: all .4s ease;
    padding: 10px 25px;
    text-shadow: none;
    width: auto;
    font-size: 24px;
    line-height: 1.5em;
    font-family: 'Montserrat', sans-serif;
}
</style>
lorennaeunapio
Participant

Popup HubSpot form on CTA click

SOLVE

Hi @tjoyce thanks for that!

However, I don't know what I'm doing wrong, but it's not working. 
I pasted the right button - the one that you sent above. And I pasted the second block of text on the head section on the page advanced settings, but it's not working... 

Do you know what I'm doing wrong?
Thanks, Lorenna

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

Popup HubSpot form on CTA click

SOLVE

@lorennaeunapio - jump in my slack, I can help you there

 

Drop by and say Hi to me on slack.

0 Upvotes