Embed code showing blank for lead form

Highlighted
New Contributor

Hi all,

 

I am testing my embedded code locally however I keep seeing a blank page with the form hidden. It works when I test it on an HTML test site but not locally. Is there something I need to add to the CSS file?

 

 

Code I have is:

 

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<![endif]-->

<script data-hubspot-rendered="true">
hbspt.forms.create({
portalId: "xxxxx",
formId: "xxxxx"
});
</script>


</main>

<style>
.hs-form fieldset {
max-width: none!important;
}
</style>
</body>
</html>

 

CSS:

 

element.style {
position: static;
border: none;
display: block;
overflow: hidden;
width: 1524px;
height: 228.797px;
}
iframe[Attributes Style] {
height: 228.797px;
width: 1524px;
}


iframe {
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}

html {
color: -internal-root-color;
}

div {
display: block;
}

Reply
0 Upvotes
4 Replies 4
Advisor

You may need to look in the console as that may be throwingan error locally that is not visible remotely.  If you haven't used this before, right click in your browser and click Inspect (or some similar variation of the term depending on the browser).  This will open up the code inspector.  Then you will have to click a Console tab.  If nothing shows up refresh your page and see if an error shows up.  If you see an error, paste it here and we can give some insight into what is going on.  If there is no error post back as alternative troubleshooting may be necessary.

Reply
0 Upvotes
New Contributor

Thanks Ben, really appreciate your reply.

I checked the console and am receiving the following error:

Uncaught ReferenceError: hbspt is not defined

 

I also tried  adding a "target" as suggested here however it's still not showing up.https://community.hubspot.com/t5/Lead-Capture-Tools/Embedded-Forms-Erratic-Behavior-Not-loading-some...

Reply
0 Upvotes
Advisor

The one piece that keeps jumping out at me though is this: data-hubspot-rendered="true".  From other instances I have, I don't have this as part of the embed code.  Could you try removing that and see if anything changes?

 

The hbspt basically is telling us that the form is not loading because the form function (hbspt.forms.create) is undefined so it doesn't know what to do.  Because it's only happening on local servers, it could be a firewall issue preventing the remote form code from loading.  You could try copying the contents of the shell.js locally and saving it as a JS file to get around this but if Hubspot publishes any updates it won't work.  

 

When you are testing locally what are you using? WAMP/MAMP/AMPP/etc?  Have you changed any settings by default on these installations?  Have you tried disabling a firewall temporarily to see if that is blocking anything?

New Contributor

Hi Ben,

 

I've removed the "rendered" code however it still appears hidden. This is probably because I'm working off files on my desktop.

 

It seems to show up fine when on dot.com:

https://jsfiddle.net/a4ckb361/3/

 

Thanks,
Jack

Reply
0 Upvotes