<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1025962704092549&amp;ev=PageView&amp;noscript=1">
doinbound-blog

DoInbound Blog

Resources for Inbound Agency Owners

How to Integrate HubSpot Forms with LeadPages

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

 
 
 

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!

the four pillars of a successful inbound agency

Grow Your Agency on a Foundation

Discover the pillars necessary to build a successful inbound agency.

Grab the guide
Mike Hollis

Mike Hollis

I'm a Co-Founder and CTO of DoInbound, a platform to help manage, track, and scale your inbound marketing agency, where I lead up the development team.

I love flying Southwest Airlines and almost anything found in New York City!