Skip to main content

🗓️ [Webinar Apr 3] How to Build a CRM in ClickUp—with ClickUp's #1 Solutions Partner. Sign up now.

ZenPilot Blog » Latest Articles

How to Integrate HubSpot Forms with LeadPages

Gray MacKenzie
Gray MacKenzie is a true operations nerd who has spent the past decade helping hundreds of agencies build more productive, profitable, and healthy teams by solving the core issues plaguing their project management.

To chat with Gray and have ZenPilot lead your team through the last project management implementation you'll ever need, schedule a quick call here.

The other day, Andrew was working with a client who was trying to find out how to integrate HubSpot forms with LeadPages.

There isn’t a built-in integration between these two popular marketing platforms, so he asked me if it was possible to export a HubSpot form as JavaScript, then convert it into HTML that can be pasted into LeadPages.

So naturally, without asking for any other information, I said it was!

Well, it wasn’t as straightforward as I would have imagined at first, but I was able to get the HTML. I’m hoping that maybe this will help someone else.

How HubSpot embeds forms

HubSpot uses a simple JavaScript script to embed forms on your website. Here’s an example:

<script charset=”utf-8″ src=”//js.hsforms.net/forms/current.js”></script><script type=”text/javascript”> hbspt.forms.create({ portalId: portalId, formId: formId}); </script>

Then, just like the magic that HubSpot is, a form shows up on the page — which is phenomenal if you can run JavaScript. Unfortunately, that’s exactly the problem we were trying to solve because LeadPages only allows HTML custom forms.

The Hard Way to Get the HTML

Since all webpages must end up as HTML in the end, I figured that the script just inserted the form onto the page. Therefore, I quickly whipped up a simple HTML page that would insert the HubSpot form:

<html><head><title>HubSpot Forms</title><script charset=”utf-8″ src=”//js.hsforms.net/forms/current.js”></script></head><body><script type=”text/javascript”> hbspt.forms.create({ portalId: portalId, formId: formId }); </script></body></html>

Once I started an http server on my local computer, I loaded the page, and sure enough — the form popped up! I used Chrome’s inspector tools to grab the HTML and send it to Andrew.

The Easy Way to Get the HTML

Of course, I’d rather not do this process every time that I want to get a form’s HTML. Therefore, I’ve created a quick little script that’ll do it all for you!

WARNING: The great thing about the way that HubSpot pulls in the form is that you can change it through HubSpot and it will automatically update wherever you have that script installed. By using just the static HTML, if you update the form in HubSpot, the form will not update automatically. You’ll have to recapture the HTML.

Grab HubSpot Form HTML

Input your info below

Portal ID:  

Form ID:  

Generate Form

Form

Form HTML

One Important Note

Due to a change in HubSpot’s Forms API, when you generate your Form HTML you will now see a hidden context input field near the bottom of your HTML. If you leave this in, the form will still work fine, but new conversions may overwrite previous conversions because the form context is identical. This is one major downside to generating your Form’s HTML for your users (rather than the HTML being rendered via Javascript at the time the user visits the page).

Fortunately, there’s a pretty simple solution: you can just remove that <input> from your HTML before pasting it into LeadPages or wherever you need the Form HTML. Here’s how you do it:

1) Once you’ve generated your Form HTML, look at the bottom of your HTML (just below the </form>) for

<input name=”hs_context” type=”hidden” value=”{&quot…….}”
data-reactid=”.hbspt-forms-3.3″>

Go ahead and delete that entire <input> from your HTML, use your embed code like you would normally from there, and you’ll be set to go. Good luck!

Explore Topics

About ZenPilot

Our proven framework helps agencies streamline their operations in ClickUp and build healthy teams, boost profits, and double productivity. Get our proven framework →
New call-to-action

Related Articles

Subscribe to First Class Operations

And get instant access to the ClickUp for Agencies Guide. Join 8,000+ agencies that stay ahead of the curve on agency news, resources, tools, and insights with our newsletter.
FREE ClickUp Productivity Bundle
ClickUp for Agencies Playbook

Get our 47-page ClickUp for agencies guide + client onboarding template - all for free!