topic Re: Hubspot Forms not appearing properly on the wordpress page in CMS Development

Hubspot Forms not appearing properly on the wordpress page

sgarson — Tue, 20 Mar 2018 16:13:48 GMT

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">

<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!

Re: Hubspot Forms not appearing properly on the wordpress page

roisinkirby — Fri, 06 Apr 2018 10:58:52 GMT

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 🙂

Re: Hubspot Forms not appearing properly on the wordpress page

trevordjones — Fri, 06 Apr 2018 12:55:42 GMT

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.