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:

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 (and note the target: line in the form code):

<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.

UPDATE: Embedding HubSpot form script in WordPress 5.x with Gutenberg blocks

If you are embedding the form code using blocks, make sure you use the HTML block (ie don’t use a normal Text or Paragraph block):