Popup HubSpot form on CTA click

As simple as I don’t want labels :slightly_smiling_face:

No option to remove labels… The help text on hubspot input fields is enough for my forms…

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.

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.

Tim, this is incredibly helpful! Quick question though:

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

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

@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

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

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

@tjoyce Thank you very much for your help!

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!

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

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!

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.

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

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.

Hi.

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

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!

@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 :grinning_face_with_smiling_eyes:

Drop by and say Hi to me on slack.

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!

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>