How to Integrate HubSpot Forms with LeadPages
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=”{"…….}”
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!
