Hubspot Forms not appearing properly on the wordpress page

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.

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

thanks for your help!

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 :slightly_smiling_face:

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.