Popup HubSpot form on CTA click

[#1]

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]

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?

[#3]

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

[#4]

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?

[#5]

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

[#6 · Accepted solution]

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 )

---

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

Drop by and say Hi to me on slack.

[#7]

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? 

[#8]

@Jmcdermott13 - I updated my answer. Hope this helps

[#9]

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.

[#10]

@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

[#11]

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?

[#12]

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

[#13]

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!

[#14]

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?

[#15]

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

[#16]

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

[#17]

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

[#18]

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

[#19]

What was the solution here?

[#20]

Use the Belch tool that @tjoyce mentioned and his process. Then, instead of a HubSpot CTA, just use the Belch button embed and you can look at tracking on the form level instead of the cta level.  You'll still see form views and submissions and can create your conversion rate from it.  If you want to see button clicks, you could set that up in the events tool if you use marketing hub enterprise.

[#21]

must have!