[UPDATED] HubSpot CMS Design Tips – Forms

Here are some HubSpot CMS Design tips for those of you who want to optimise the User Experience (UX) when integrating HubSpot forms into your site. These tips also work if you are using WordPress.

The problems

Let's make this clear - we love HubSpot. BUT...yep, I'm a geek – I get pedantic about page load time. Yep, I'm a Designer – I get pedantic about User Experience. Neither of those are your problem, though...

The real problems are:

1. Render Blocking JavaScript slows down the page render.
2. Content jumping around the screen after rendering the form that's distracting to the visitor.
3. Google's Core Web Vitals have made page speed more important than ever.

So, let's tackle the tricky one first. 

You want faster page rendering

HubSpot Forms are easy to integrate into your pages, posts, sidebars, anywhere. However when you embeds the form it uses JavaScript to load the form dynamically. This means when your form is at the top of the page the JavaScript can slow down the page render. 

According to YSlow:

JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.

How to test your page to find out if you have an issue:

• Enter your URL at Google Pagespeed Insights
• Download the Browser Plugin at YSlow

Do not use HubSpot's Website Grader to test your site – it always gives you 100% if you use the HubSpot CMS and that is less than helpful.

By adding the "defer" tag you can delay the loading of the form until the page has rendered – improving the User Experience (UX). Add the defer tag at the end of the form code you got from HubSpot. Read more about the Script Defer Attribute at W3 Schools.

Not all scripts can be deferred – test to make sure this works for you!

Now, because you are deferring the loading of your JavaScript the inline script doesn't know how to create a HubSpot Form!

So, we need to wait until the JavaScript has loaded before we fire our inline script. By using JavaScripts "window.onload" we can fire the JavaScript once the external files is loaded.

window.onload = function() {}

And, because the forms JavaScript file was targeting the parent element (so it knew where to build the form) we need to tell it where to render the form.

To target the element (our parent div – in this case) so we can render the form we add the property using JQuery style notation:

target: "#divFormHolder",

HubSpot renders the forms using JavaScript – not HTML – so you need to add the targeting. For more information on the HubSpot Forms read How to customise the form embed code on the HubSpot website – there are loads more useful methods and properties to play with.

Personally, I moved my JavaScript into my main JavaScript file so I'm loading less files (which slows things down).

You can see – highlighted in white – where we added the defer attribute, the onload call and the new targeting line.

WARNING: I'm self taught so if you see any blunders please let me know.

<div id="divFormHolder">

  <!--[if lte IE 8]>

    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" defer></script>

  <![endif]-->

  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" defer></script>

  <script>

    window.onload = function() {

        hbspt.forms.create({

             portalId: 'XXXXXXX',
 
             formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',

             target: "#divFormHolder",

        });

    };

  </script>

</div>

Not all scripts can be deferred – test to make sure this works for you!

You want a better User Experience (UX)

When the form loads it doesn't render immediately – whether you load using the normal embed code or not. What happens is any content below your form renders first, so when the form finally loads (we're talking fractions of a second really) there is a jump as the div extends to display the form.

When elements on the screen are jumping around unintentionally it's distracting to the user so by deferring the load and setting the minimum height of the div you can improve your user experience.

This is useful even if you don't implement the first tip.

See new CSS rule:

.widget-type-blog_subscribe { min-height: 260px; }

So, it's that easy.

You will need to fiddle around a bit to get your height right. And, because it's hard coded if you change the CSS later you may need to tweak the height (I aimed a little over so a few pixels difference doesn't matter).

Multiple HubSpot Forms on the same page

Sometimes you'll want to add more than one form to a page e.g. a Contact Form and a Newsletter Subscription Form.

If you use WordPress, Squarespace, or anything other than HubSpot CMS you will need to use the Target property in the Embed code. For example:

target: "#divFormHolder",

This will let the JavaScript know which form goes where. Without it you'll either end up with only one form or the form in the wrong place.

We recommend using the Form ID as the ID for your div so you don't have any ambiguity.

<div id="divFormHolder-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">

  <!--[if lte IE 8]>

    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" defer></script>

  <![endif]-->

  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" defer></script>

  <script>

    window.onload = function() {

        hbspt.forms.create({

             portalId: 'XXXXXXX',
 
             formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',

             target: "#divFormHolder-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",

        });

    };

  </script>

</div>

Repeat this Embed Code (with your Form ID and Portal ID) for each of your forms so every div has a unique ID. For example:

id="divFormHolder-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

For more information on the HubSpot Forms read How to customise the form embed code on the HubSpot website.

Debugging your Embed Code

If you're not seeing your form on your page you can inspect the page with your browsers developer tools. Usually you'll see an error that will help you debug the issue.

So, why are these HubSpot CMS Design Tips important?

User Experience is extremely important. An inexperienced visitor may not notice these small delays and distractions enough to explain what happened. An experienced person (like you and me) does notice and can point them out.

When we make these two small tweaks we improve the User Experience for everyone.