Talk with an Advisor
Talk with an Advisor

1 min read

HubSpot Forms Rendering Issue in elcomCMS and WordPress

HubSpot Forms Rendering Issue in elcomCMS and WordPress

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):

Use the HTML block when embedding HubSpot forms snippet

4 Tips To Be A More Effective Marketer

Do you run the day or does the day run you?

Read More

What Is Inbound Marketing?

I realised that we've been using the term 'Inbound Marketing' a fair bit lately, and it's also part of how we describe XEN (ie we help clients with...

Read More

So You Want to Be a Marketing Manager?

So, you have decided that you want to step into the exciting, dynamic and lucrative world of digital marketing. You should brace yourself, then, for...

Read More