topic Re: hubspot form as a popup upon a CTA click in Lead Capture Tools

hubspot form as a popup upon a CTA click

APatil0 — Sat, 04 Mar 2023 18:41:03 GMT

Hi, I need to load a hubspot form as a popup upon a CTA click. Can soemone let me knwo how to do that? Thanks

Re: hubspot form as a popup upon a CTA click

himanshurauthan — Mon, 06 Mar 2023 06:40:39 GMT

Hello @APatil0

Here are the steps to load a HubSpot form as a popup upon a CTA click:

Log in to your HubSpot account and navigate to the Marketing > Lead Capture > Forms.
Click on the form you want to use and then click on the Embed button in the top-right corner.
Select the Popup Form option from the drop-down menu.
Customize your popup form by selecting the fields you want to include, choosing a form style, and configuring the form settings.
Once you've customized your popup form, click on the Publish tab and then copy the embed code.
Open the HTML code for the page where you want the popup form to appear.
Add a CTA button or link on the page where you want the popup to appear.
Add an event listener to the CTA button or link so that it triggers the popup form when clicked.
Use the JavaScript code below to load the HubSpot form as a popup when the CTA button or link is clicked:

<script> document.addEventListener("DOMContentLoaded", function(event) { var cta = document.getElementById("cta-button"); // Replace "cta-button" with the ID of your CTA button or link var formEmbed = document.createElement("div"); formEmbed.innerHTML = ""; // Replace this comment with the embed code you copied from HubSpot formEmbed.style.display = "none"; document.body.appendChild(formEmbed); cta.addEventListener("click", function(event) { event.preventDefault(); formEmbed.style.display = "block"; }); }); </script>
Make sure to replace "cta-button" with the ID of your CTA button or link, and replace the comment inside the formEmbed.innerHTML with the embed code you copied from HubSpot.

That's it! Now when someone clicks on your CTA button or link, the HubSpot form should appear as a popup on the page.

Thanks & Regards
Himanshu Rauthan

Re: hubspot form as a popup upon a CTA click

oy — Thu, 15 Jun 2023 11:11:42 GMT

Hi,

I can't find the embed code for popup form, could you help show where can I find it? Also needed to fill out the trigger for the pop-up, what should I choose for trigger option? Is there also a more clear example on which part of embedded code should be insert into the above code. Thank you so much! 😊

Re: hubspot form as a popup upon a CTA click

AMURAVITSKAYA — Thu, 22 Jun 2023 09:27:24 GMT

Hi,

Could you please share a more detailed instruction. Can't find some part mentioned above

Thank you!

Re: hubspot form as a popup upon a CTA click

DianaGomez — Thu, 22 Jun 2023 18:41:15 GMT

Hi @AMURAVITSKAYA, I hope you are doing well.

Could you please provide more details about the part you can't find?

This way @himanshurauthan will be able to help you better 🙂

Thanks,

Diana

Re: hubspot form as a popup upon a CTA click

oy — Tue, 27 Jun 2023 06:23:57 GMT

Hi @DianaGomez @himanshurauthan , would you know where to find embed code for popup form.

Also needed to fill out the trigger for the pop-up, what should I choose for trigger option?

Is there also a more clear example on which part of embedded code should be insert into the above code. Thank you so much!

Re: hubspot form as a popup upon a CTA click

himanshurauthan — Tue, 27 Jun 2023 08:56:36 GMT

Hello @oy

To find the embed code for a popup form

Log in to your HubSpot account.
Go to Marketing > Lead Capture > Forms.
Click on the form you want to use.
Click on the Embed button in the top-right corner.
Select the Popup Form option from the drop-down menu.
Copy the embed code.

The trigger option for the popup form is the event that will trigger the popup to appear.

Page load - The popup will appear when the page loads.
CTA click - The popup will appear when a CTA button or link is clicked.

insert the embed code into the JavaScript code, you need to replace the comment inside the formEmbed.innerHTML with the embed code you copied from HubSpot.

Re: hubspot form as a popup upon a CTA click

AMURAVITSKAYA — Thu, 29 Jun 2023 12:55:44 GMT

Hi Diana,

I couldn't find proper things since point 3 of the answer:

- Select the Popup Form option from the drop-down menu.

- Customize your popup form by selecting the fields you want to include, choosing a form style, and configuring the form settings.

However, I've kinda solved the issue my way - I've added anchor to the form title and now every buttor on the page sens me to the anchored part. for buttons on other pages that still need to send to the form, I'm using the whole link with the anchor

Re: hubspot form as a popup upon a CTA click

junger23 — Fri, 21 Jul 2023 15:22:50 GMT

himanshurauthan The options for embed must've changed, because you no longer have "Popup Form" as an option (see screenshot below). Any ideas?

Re: hubspot form as a popup upon a CTA click

DianaGomez — Tue, 25 Jul 2023 20:43:50 GMT

Hi @oy, @AMURAVITSKAYA and @junger23.

I understand you wish to have a trigger pop up once a button is clicked that includes a HubSpot form.

One of my colleagues recorded this video with an option: https://www.loom.com/share/d379a6a437e94b30a5649a6bd9ba8d95?sid=b1a4dea1-26fb-4fc8-b1dc-2799a245919e

Here is the article he mentioned in the video: Create calls-to-action (CTAs)

Hope this helps,

Diana

Re: hubspot form as a popup upon a CTA click

oy — Fri, 01 Sep 2023 09:34:33 GMT

Hi @DianaGomez , thank you so much! This works perfectly. If after a visitor submits the form, I'd like to redirect them somewhere else and add a parameter that I got from the form they just submitted, is there a way to do this?

For example, after form submission, user will be redirected to www.domain.com And if they inputed that their user_id = 999, i'd like to add ?id=999 to the redirect link at the end, so the actual redirect link would be www.domain.com?id=999

Hopefully this is possible. Thanks again

Re: hubspot form as a popup upon a CTA click

DianaGomez — Fri, 01 Sep 2023 20:24:53 GMT

Hello @oy,

In this case, I recommend reviewing the next thread: Can you create pop-up forms that redirect to a landing page?. You may need to use code and likely involve a developer to accomplish your idea.

Best,

Diana

Re: hubspot form as a popup upon a CTA click

EMyers — Fri, 22 Sep 2023 16:15:35 GMT

This documentation needs updated. You can no longer create a "popup" form - there is no option for them anymore.

Re: hubspot form as a popup upon a CTA click

YReich — Tue, 21 Nov 2023 02:56:56 GMT

Hi @DianaGomez
I got this working (appears to only work with Legacy CTA (which is odd as the new cta seems to have a native way of linking to a cta popup but only in custom HTML and even then it doesn tactually work)

regardless in legacy it does work however in mobile after disabling (turn off on small screen sizes) theres still an issue where it only works on the second tap

i think it may be related to this https://css-tricks.com/annoying-mobile-double-tap-link-issue/

any ideas?

my legacy CTA has nothing for css besided the code snippet saved in advanced "custom css class"

Re: hubspot form as a popup upon a CTA click

DianaGomez — Tue, 21 Nov 2023 14:28:45 GMT

Hi @YReich,

Thank you for providing the details. In that case, I recommend posting in our developer forum. There, you can get more assistance regarding this topic, and even share the code you are currently using to see if someone has an idea on how to modify it to achieve your goal. We have a helpful and knowledgeable community there who can provide valuable insights and solutions.

Best regards,

Diana