Popup HubSpot form on CTA click

SOLVE
New Contributor

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

1 Accepted solution

Accepted Solutions
Solution
Top Advisor | Platinum Partner

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

2. Login with your Hubspot account

3. After logging in, navigate to here https://startups.belch.io/popup

4. Follow the Steps on the right side of the page

   1. Choose the HubSpot form you would like to use

   2. Style the form and popup (there are a lot of options and configs to play with)

   3. Grab the new embed code

5. When you hit the "Grab Embed Code" button, you will see 2 code blocks, the upper code block is your popup with form and the lower code block is your button that will let the user trigger the popup.

6. Copy the upper code and head over to your website and paste it somewhere that allows you to paste html. (i'll use wordpress for an example) Wordpress with Visual Composer or Elementor have "Raw HTML" shortcodes that you can drop the code right into and they work fine. If you aren't using a drag n drop builder, you can put the html somewhere in the header.php file.

7. Grab the lower code, this is just your button that will trigger the popup. Paste that button HTML somewhere in your text. If you are using a wysiwyg in Wordpress, change the view to code view and paste the html in the code view.

see example

 

I always recommend skipping step #2 for the time being and testing the popup before spending a lot of time configuring the design. You could always come back later and run through step 2 and grab a new embed code and button.

 

That should be it.

 

So... what just happened?

All we did was, take your original embed code that HubSpot gives you, put a shiny CSS and javascript wrapper around it, and handed it back to you. If you really look at the embed code, you will see the original HubSpot embed code is still there, we just massaged it a bit. 

 

If you found this helpful, please, stop back by and let others know.

This is a very popular topic.

 

 

One last thing. This tool is a part of the Belch.io tool suite for HubSpot. This popup tool and our main form tool at https://forms.belch.io/   are always free to use and we give you all the code when you hit that "Grab Embed Code" button. We don't hold onto any of your code after you hit that button. (The landing page builder will cost you though :D)


tim@belch.io | belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

View solution in original post

47 Replies 47
HubSpot Product Team

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?

Reply
0 Upvotes
Community Superstar

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

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Top Advisor | Platinum Partner

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?

Top Contributor

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

Reply
0 Upvotes
Solution
Top Advisor | Platinum Partner

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

2. Login with your Hubspot account

3. After logging in, navigate to here https://startups.belch.io/popup

4. Follow the Steps on the right side of the page

   1. Choose the HubSpot form you would like to use

   2. Style the form and popup (there are a lot of options and configs to play with)

   3. Grab the new embed code

5. When you hit the "Grab Embed Code" button, you will see 2 code blocks, the upper code block is your popup with form and the lower code block is your button that will let the user trigger the popup.

6. Copy the upper code and head over to your website and paste it somewhere that allows you to paste html. (i'll use wordpress for an example) Wordpress with Visual Composer or Elementor have "Raw HTML" shortcodes that you can drop the code right into and they work fine. If you aren't using a drag n drop builder, you can put the html somewhere in the header.php file.

7. Grab the lower code, this is just your button that will trigger the popup. Paste that button HTML somewhere in your text. If you are using a wysiwyg in Wordpress, change the view to code view and paste the html in the code view.

see example

 

I always recommend skipping step #2 for the time being and testing the popup before spending a lot of time configuring the design. You could always come back later and run through step 2 and grab a new embed code and button.

 

That should be it.

 

So... what just happened?

All we did was, take your original embed code that HubSpot gives you, put a shiny CSS and javascript wrapper around it, and handed it back to you. If you really look at the embed code, you will see the original HubSpot embed code is still there, we just massaged it a bit. 

 

If you found this helpful, please, stop back by and let others know.

This is a very popular topic.

 

 

One last thing. This tool is a part of the Belch.io tool suite for HubSpot. This popup tool and our main form tool at https://forms.belch.io/   are always free to use and we give you all the code when you hit that "Grab Embed Code" button. We don't hold onto any of your code after you hit that button. (The landing page builder will cost you though :D)


tim@belch.io | belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

View solution in original post

New Member

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? 

Top Advisor | Platinum Partner

@Jmcdermott13 - I updated my answer. Hope this helps

New Contributor

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.

Reply
0 Upvotes
Top Contributor

@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

Reply
0 Upvotes
Occasional Contributor

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?

Top Advisor | Platinum Partner

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

New Member

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!

Reply
0 Upvotes
New Member

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?

Reply
0 Upvotes
Occasional Contributor

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

New Contributor | Gold Partner

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

Top Advisor | Platinum Partner

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

Occasional Contributor

Did you find a solution for this? Thank you!

Reply
0 Upvotes
New Contributor

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

Occasional Contributor

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

Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Occasional Contributor

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.

Reply
0 Upvotes
Top Advisor | Platinum Partner

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.

Occasional Contributor

Tim, this is incredibly helpful! Quick question though:

 

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

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Top Advisor | Platinum Partner

@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

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Top Advisor | Platinum Partner

@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>
Reply
0 Upvotes
Regular Contributor

@tjoyce Thank you very much for your help! 

Reply
0 Upvotes
New Contributor

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

Reply
0 Upvotes