HubSpot form positioning issue in WordPress Visual Composer

Other Questions HubSpot
1

I’m having trouble with a HubSpot form on my WordPress site that uses Visual Composer. When I add the form embed code using a raw HTML element, the form appears in the wrong spot on the page initially. It shows up at the bottom left corner instead of where I placed it in the right column. But when I refresh the page, it moves to the correct position.

I think this happens because the form script loads after everything else on the page. I also tried making a shortcode for the embed code but that didn’t fix it either.

Here’s the embed code I’m using:

<!--[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({ 
    css: '',
    portalId: 'XXXXXXX',
    formId: 'XXXXXXXXXXXXXXX'
  });
</script>

Has anyone dealt with this before? I need the form to load in the right place from the start without needing a page refresh.

2

Visual Composer fights with dynamically loaded scripts like HubSpot forms. I’ve dealt with this positioning nightmare on tons of client sites. Skip the delays and callbacks - just load the HubSpot script in your theme’s footer.php before the closing body tag. This way it loads after all page elements are positioned. Then strip your embed code down to just the div container and create function (no script tags). The form renders correctly because the script’s already there when Visual Composer finishes building the layout. Fixed that annoying flash of mispositioned content I kept seeing on page loads.

3

I’ve run into this exact timing issue with HubSpot forms and WordPress. The form script fires before Visual Composer finishes positioning the DOM element. Here’s what fixed it for me - wrap the HubSpot script in document ready with a small delay:

jQuery(document).ready(function($) {
    setTimeout(function() {
        hbspt.forms.create({ 
            css: '',
            portalId: 'XXXXXXX',
            formId: 'XXXXXXXXXXXXXXX',
            target: '#hubspot-form-container'
        });
    }, 500);
});

Just add a div with id “hubspot-form-container” where you want the form. The 500ms delay gives Visual Composer time to finish its layout before the form renders. You might need to tweak the timing depending on your page speed.

4

Use the onReady callback instead of setTimeout - way more reliable. Just add onReady: function() { console.log('form loaded'); } to your create function. Also, make sure your visual composer column has position: relative so the form doesn’t float around while loading.