Hubspot Forms not appearing properly on the wordpress page

[sgarson]

Hello,

I am using Wordpress for my website and when I input the embeded code from Hubspot, the form does not appear on the page, it is just blank.

Looking at the chrome developer tools I notice that a piece of code has been added that says, "defer data-deferred="1"". Doing some research online, I found that certain plugins used to optimize your site could add this code. I was able to find a setting for JS Deferred in LightSeed Cache and once I turned it off the form appears as expected. However I would like to optimize my site with this program.

So reaching out to lightSpeed Cache they suggested using the following code 

<div id="formHolder">
<!--[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: "Number",
formId: "Number",
css: "",
target: "#formHolder"
});

}
</script>
</div>

Note I have taken out the portalid and formid numbers. 

However when I add this code and run it, the background of the form fails to appear until I resize the window. 

How the page loads initialy is the first image and how the form loads after resizing the window is the second image. 

https://www.sd-wan-experts.com/our-team/ 

Any ideas on how to resolve this issue? I have also tried different browsers and same result. 

thanks for your help!

[trevordjones · Accepted solution]

Hi Steve,  

This looks to me like a stylesheet problem.  Looking at your code, I see this tag <div id="formHolder"> but I couldn't find formHolder defined in any of your linked stylesheets, unless I missed it.

I'm wondering if this is a case of the default HubSpot styling conflicting with the defined stylesheet on your WordPress site.  I might suggest that when you copy the embed code from your HubSpot portal you should UNCHECK  the "Include default HubSpot Styling" check box.  That should give you a form that can be styled by your existing stylesheet.

If you don't want to leave your JS Deferred setting off, you might consider installing the Gravity Forms plugin (About $100/yr) and Big Sea's HubSpot for Gravity Forms plugin (free). Then, you can build your forms directly inside WordPress and send them to HubSpot via the API.  

[roisinkirby]

Hey @sgarson thanks for sharing this detail! 

@trevordjones is this something you have come accross before, I've noticed you share a lot of Wordpress design expertise 🙂