We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).

Allow cookies

Embed code showing blank for lead form

Highlighted
JackM
JackM
New Contributor

‎10-27-2019 06:29

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;
}

code not displaying embed code lead form
Reply
0 Upvotes
4 Replies 4
Ben_M
Ben_M
Advisor

‎10-28-2019 09:14

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
JackM
JackM
New Contributor

‎10-28-2019 05:22

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
Ben_M
Ben_M
Advisor

‎10-28-2019 07:12

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?

Reply
JackM
JackM
New Contributor

‎10-28-2019 11:41

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