HubSpot Forms Rendering Issue in elcomCMS and WordPress

HubSpot forms rendering issue

A quick note about an issue I occasionally have with HubSpot forms not rendering correctly on sites.

It doesn’t happen all the time, but sometimes HubSpot forms (when using the standard embed code they provide) don’t end up showing in the correct place on a page.

Instead they will show off the bottom of the page, or aligned along the left of the browser.

It’s not consistent, and it can be hard to reproduce.

I’ve noticed this happening in some content management systems that have optimised page rendering in place. elcomCMS is an example where it tends to happen a fair bit, but I have also seen it (albeit very rarely) when using WordPress.

Turns out the solution is very simple (and thanks to HubSpot Support who alerted me to the fix for this).

The simple fix is to wrap the embed code in a named div on the page.

Here’s an example of a standard embed code that HubSpot might provide:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({ 
 portalId: '123456',
 formId: 'xxx-yyy-zzz'
 });
</script>

And here’s how it looks with the embed code wrapped in a div (I’ve marked the additions in blue):

<div id="hsformContainer">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({ 
 portalId: '123456',
 target: '#hsformContainer',
 formId: 'xxx-yyy-zzz'
 });
</script>
</div>

It’s a nice simple fix.

Craig Bailey

Craig is the Founder and Technical Director at XEN Systems. He’s been involved in IT, web development and digital marketing for more than 25 years.

3 thoughts on “HubSpot Forms Rendering Issue in elcomCMS and WordPress

  1. Pingback: HubSpot Forms Rendering Issue in elcomCMS | content marketing

  2. Kyle says:

    I had this problem, nobody at HS told me this. Is this problem stated anywhere in their documentation as it has been a massive problem for me.

Leave a Reply

Your email address will not be published. Required fields are marked *