CMS Development

sancybalani
メンバー

Popup HubSpot form on CTA click

解決

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件の承認済みベストアンサー
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

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>

 

元の投稿で解決策を見る

DomRychlik
解決策
HubSpot製品開発チーム
HubSpot製品開発チーム

Popup HubSpot form on CTA click

解決

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!

元の投稿で解決策を見る

178件の返信
KongGroup
参加者

Popup HubSpot form on CTA click

解決

Hi.

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

0 いいね!
Wdhathcock
メンバー

Popup HubSpot form on CTA click

解決

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.

0 いいね!
MarleneS
メンバー

Popup HubSpot form on CTA click

解決

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!

 

Screen Shot 2020-07-28 at 13.24.45.jpg

0 いいね!
AdeleTib
投稿者

Popup HubSpot form on CTA click

解決

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.

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

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

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

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

0 いいね!
MarleneS
メンバー

Popup HubSpot form on CTA click

解決

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! 

0 いいね!
Jelmert
参加者

Popup HubSpot form on CTA click

解決

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

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

@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

0 いいね!
Jelmert
参加者

Popup HubSpot form on CTA click

解決

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

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

@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>
0 いいね!
Jelmert
参加者

Popup HubSpot form on CTA click

解決

@tjoyce Thank you very much for your help! 

0 いいね!
JaredMoats
参加者

Popup HubSpot form on CTA click

解決

Tim, this is incredibly helpful! Quick question though:

 

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

0 いいね!
elanashama
トップ投稿者

Popup HubSpot form on CTA click

解決

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.

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

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
参加者

Popup HubSpot form on CTA click

解決

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

0 いいね!
williampatey
メンバー

Popup HubSpot form on CTA click

解決

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

smartcrumbs
参加者

Popup HubSpot form on CTA click

解決

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

0 いいね!
CPCSupport
参加者

Popup HubSpot form on CTA click

解決

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
参加者

Popup HubSpot form on CTA click

解決

Did you find a solution for this? Thank you!

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Popup HubSpot form on CTA click

解決

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