XEN Digital Marketing Blog
Digital Marketing and HubSpot Strategies

Business Growth Blog

Categories Arrow

About

Each week we share our latest digital marketing and HubSpot experiments, findings, tips and strategies.

Subscribe to Email Updates

Posts by Tag

see all

Recent Posts

HubSpot Forms Rendering Issue in elcomCMS and WordPress

By Craig Bailey

Published: Monday 26 October 2015 | Last updated: Friday 03 July 2020

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
HubSpot Forms Rendering Issue in elcomCMS and WordPress

Published: Monday 26 October 2015 | Last updated: Friday 03 July 2020

Tags: Digital Manager, HubSpot, elcomCMS
By: Craig Bailey
Craig Bailey

Craig is the founder and CEO of XEN.

Digital Marketing and HubSpot Articles

Recent Blog Posts