I’m having trouble with a HubSpot form on my WordPress website that uses Visual Composer. When I add the form code using the raw HTML element, it shows up in the wrong place initially. The form appears at the bottom left corner instead of where I placed it in the right column. But when I reload 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 what the embed code looks like:
<!--[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: 'YOUR_PORTAL_ID',
formId: 'YOUR_FORM_ID'
});
</script>
Has anyone else run into this problem with Visual Composer and HubSpot forms? Any ideas on how to make the form load in the right spot from the start?
This positioning mess is exactly why I ditched embed codes and timing issues completely. Instead of fighting DOM loading and Visual Composer quirks, I built an automation that handles the whole form flow outside WordPress.
When someone hits your page, capture their info with a simple HTML form, then trigger an automated workflow that sends data straight to HubSpot. No script conflicts, no positioning headaches, and it loads instantly.
I’ve done this for tons of sites where form builders trashed the layout. The automation handles HubSpot integration while your page stays clean and loads consistently. Better performance, zero positioning issues.
Way cleaner than setTimeout hacks or container positioning fixes. https://latenode.com
The Problem: You’re encountering an issue where a HubSpot form embedded in your WordPress website using Visual Composer initially appears in the wrong location (bottom left corner) but corrects itself after a page reload. This is likely due to the HubSpot form script loading after the page’s other elements, causing a positioning conflict with Visual Composer’s dynamic layout. Using a shortcode didn’t resolve the issue.
Understanding the “Why” (The Root Cause):
The problem arises from a timing conflict between the loading of Visual Composer’s layout and the HubSpot form script. Visual Composer dynamically generates its layout, and if the HubSpot script loads after this process is complete, the form is initially rendered in a default position before Visual Composer can place it correctly. The page reload forces a re-rendering, allowing the form to be positioned accurately. This is a common issue when integrating third-party scripts with dynamic page builders.
Step-by-Step Guide:
-
Wrap the HubSpot Script in a DOMContentLoaded Event Listener with a Delay: This ensures the script executes only after the entire page’s DOM (Document Object Model) is fully loaded. We’ll add a small delay using setTimeout to account for any lingering asynchronous operations.
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
<!--[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: 'YOUR_PORTAL_ID',
formId: 'YOUR_FORM_ID'
});
</script>
}, 100); // Adjust the delay (in milliseconds) as needed
});
-
Explicitly Set Container Dimensions (Optional but Recommended): Create a container <div> element to hold your HubSpot form and explicitly set its width and height using CSS. This provides a defined space for the form to render in, minimizing potential conflicts with Visual Composer’s layout.
<div id="hubspot-form-container" style="width: 500px; height: 400px;">
<!--[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>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
hbspt.forms.create({
css: '',
portalId: 'YOUR_PORTAL_ID',
formId: 'YOUR_FORM_ID'
});
}, 100);
});
</script>
</div>
Remember to replace 500px and 400px with the actual dimensions you need.
Common Pitfalls & What to Check Next:
- Incorrect
portalId or formId: Double-check that you’ve correctly entered your HubSpot portal ID and form ID in the hbspt.forms.create() function.
- CSS Conflicts: Inspect your website’s CSS for any conflicting styles that might be affecting the form’s position. Use your browser’s developer tools to identify and resolve any overlapping or conflicting styles.
- Visual Composer Settings: Explore Visual Composer’s settings to ensure there aren’t any layout options interfering with the form’s placement.
- Theme Conflicts: Consider if your WordPress theme has any features (e.g., lazy loading) that might delay script execution and cause the issue. Try temporarily disabling such features to isolate the cause.
- Caching: Clear your browser cache and any server-side caching mechanisms to ensure you’re seeing the updated code.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
This happens because Visual Composer’s layout engine clashes with HubSpot’s form loading timing. I had the same issue with VC and fixed it by adding a placeholder div with set dimensions before the script runs - keeps everything positioned right while it loads. Wrap your embed code in a container div and give it explicit width/height that matches your form size. What also worked for me was moving the HubSpot script to the footer instead of placing it inline. This lets the VC grid load completely before the form renders. Also check if your theme has lazy loading turned on - it messes with third-party form scripts and causes that repositioning you’re seeing.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.