Hola! ¡Tenemos nuestra Comunidad en Español!

Embedded Forms Erratic Behavior / Not loading...sometimes

Highlighted
Regular Contributor

Using embed form in external website but getting erratic behavior. Sometime it works fine, sometimes it doesn't even render the form. When that happens sometimes refreshing the page fixes it, sometime not. Same strange behavior with Chrome, Edge or Explorer and on different pages. Our CMS is DNN.

 

Form code below. Any ideas??? Thanks!


<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '2907348',
formId: '1bb68cae-9074-4ee8-bdc8-28cbac757eaa'
});
</script>

25 Replies 25
Regular Contributor

I'm sorry I can't offer a solution, I've had the same problem for a while. I tried contacting support and they told me my code wasn't right, but the only difference I could see is basically that I use double quotes instead of single quotes or such aesthetic differences.

 

It only happens to me on pages that have 5+ forms, so I was thinking it'd be a sync issue of sorts. I'm working on Wordpress.

 

I tried two methods : a) adding a new <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> with every single form, and b) adding that tag only once, in the header, and then only using the hbspt.forms.create() to embed the forms. The first method makes it work awesome on Firefox but doesn't work at all on Chrome or Explorer. The second gives that spotty behavior described by OP on all browsers, but at least most forms load.

 

I'm also at a loss...

Reply
0 Upvotes
Occasional Contributor

We also have the same problem. Hopefully a solution can be provided.

Reply
0 Upvotes
Regular Contributor

From what we've seen so far, the bestest solution is to not load the form "in a vacuum" but to give it a "target" attribute to link it to a specific DOM element. That seems to fix most of our problems.

 

<script id="generate_form_a35a2283-99d9-484e-99be-612abc990164">
hbspt.forms.create({
portalId: '123456',
formId: 'a35a2283-99d9-484e-99be-612abc990164',
target:'#partners_accordion_collapse',
});
</script>

Reply
0 Upvotes
New Contributor

Hey there,

I would verify if you have anything that minify, combine or defer the loading of  your JS.

 

I had a similar problem with my forms. It took me a while to find out the problems.

Good luck,

Reply
0 Upvotes
Regular Contributor

 

We haven't had any problems since we made a point of specifying a "target" for each form. I strongly encourage everyone to make this mandatory, even when there's only one form on the page.

Occasional Contributor

Sorry LeKevoid, i have the same problem, but i can't understand how i can solve the problem.

Could you help me?

Thanks, Cristian

Reply
0 Upvotes
Regular Contributor

Hi Crisaba,

 

Hope I can manage to be clear for you...

 

When you embed a form in apage, normally you have an embed code that looks like the following, correct ?

 

<script>
hbspt.forms.create({
portalId: '123456',
formId: 'a35a2283-88d9-884d-99be-612abc990164',
});
</script>

 

What I found is that normally, Hubspot will try to embed the form at the exact location where that script is put in your HTML, but sometimes it fails and puts the form elsewhere on the page. And having more than one such script on any given page just increases the risks of it failing.

 

So what worked for me, is to modify the embed code to add a line that specifies the "target" attribute of the form :

 

<script>
hbspt.forms.create({
portalId: '123456',
formId: 'a35a2283-88d9-884d-99be-612abc990164',
target:'#partners_accordion_collapse',
});
</script>

 

And I make sure that I have, somewhere in my HTML, the tag :

<div id="partners_accordion_collapse"></div>

 

The form thus gets generated in that div.

Make sure each of your "targets" on different forms, as well as their related <div>'s, have different IDs so they don't conflict. Also using that method, you should put the <script> outside of the div where you want to generate the form, preferably at the end of your page.

 

That should take care of it. Please let me know if there's anything you don't understand, or if it doesn't work, I'd gladly help you further if I can. :-)

Occasional Contributor

Hi Lekevoid,

 

Thanks for your help, you were very clear, now i understand all.

I follow your instruction but it doesn't works.

 

I added the div code, then i added the target code on the form but the form doesn't appear. Also if i refresh the page the form doesn't appear.

I can't understand why it doesn't works.

 

Thanks.

Cristian

Regular Contributor

Hi,

I just PM'd you. ;-)

Reply
0 Upvotes
Occasional Contributor

LeKevoid, thanks for you help.

 

I had the same problem and with the target attribute it worked!

New Contributor

I'm running into the same problem. Adding the target line to the embed code hasn't remedied the issue. 

Reply
0 Upvotes
Regular Contributor

Hi fholub13,

 

Let's check out a few things first...

1. did you have the <div> with a relevant ID, and did you add it before the <script> tag containing your embed code ?

2. The line in the embed code with the "formId:'whatever'", did you add a comma (,) at the end in addition to putting the "target:" line ?

 

Please confirm you've done both. If it still doesn't work, please feel free to PM me, I can look at your code further.  :-)

Reply
0 Upvotes
New Contributor

Ignore this post, submitted prematurely.

Reply
0 Upvotes
New Contributor

Hey LeKevoid,

 

Thanks for the response, greatly appreciate it. 

 

1. The <div> I targeted is wrapped around the embed script and has a relevant ID like so:

<div id="IdName">
  <script>
...
formId:'whatever',
target:'#IdName',
... </script> </div>

2. I did make sure to add a comma after the formId line

Reply
0 Upvotes
Regular Contributor

Ah, that may be part of the issue.

I'd suggest you put the <script> outside the <div>. Just leave the <div> empty.

The thing is the embed code will try to overwrite whatever is in the <div> in order to put the form there. So basically you're telling the script to delete itself when inserting the form. That may create issues.

Let me know if that helps !

New Contributor

Looks like that solved the problem. I'll continue to monitor just in case it pops up again, since it was an itermittent issue, but I think that did it. 

Thank you very much LeKevoid!

Reply
0 Upvotes
Regular Contributor

Very happy to read this !

Cheers !  ^_^

Reply
0 Upvotes
New Contributor

I'm having a similar issue on a Drupel site. Occassionally the form loads properly, but most of the time it loads at the very bottom of the page, or not at all.  

Reply
0 Upvotes
Regular Contributor

Hi Kaila,

 

Hoping my previous messages can help you. Make sure that you add the "target" attribute to the Javascript code to embed the Hubspot form. Like so :

 

<script>
hbspt.forms.create({
portalId: '123456',
formId: 'a35a2283-88d9-884e-99be-612abc990164',
target:'#some_div',
});
</script>

Also, make sure that your <script> tag is outside of the <div id="some_div"> (which is gonna be the subject of the "target" attribute, above). If all is done well, your form should, from now on, always load inside the <div id="some_div">, and not at the bottom of the page.

 

Please let us know if this solves your issue. :-)

 

New Contributor

@LeKevoid When I try your solution, it displays the forms 2 times. Any ideas why this is happening? 

code:

<div id="Test"></div>
<script id="generate_form_49bf7c70-c211-46a7-96f5-00aa98e28a8b">
hbspt.forms.create({
portalId: "4424930",
formId: "49bf7c70-c211-46a7-96f5-00aa98e28a8b",
target:"#Test",
});
</script>

Reply
0 Upvotes
Regular Contributor

No idea.

Are you sure you're not calling the form twice somehow ?

Reply
0 Upvotes
New Member

Hi there,

My Hubspot form shows up in preview when I am editing my wordpress website but doesn't show up otherwise. Super frustrated as this should be a simple task and I tried to follow your solution to the tee (even using the same variable name!!LOL)

 

Here is the code I am using:

<div id="some_div"></div>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "5349701",
formId: "2842ee2c-7a5c-485f-a906-d95e8d922930"
target:'#some_div',
});
</script>

Reply
0 Upvotes
Regular Contributor

Hi ZunairaOmar,

 

There seems to be a comma missing at the end of your formId line.

 

formId: "2842ee2c-7a5c-485f-a906-d95e8d922930",<== here

Try that and see if it fixes the problem ? Honeslty I'm not expecting it to, but y'never know...

Reply
0 Upvotes
Visitor

Hey mine is still not working 99% of the time - but every now and then is shows up. 

 

Any bugs you can spot that I am missing?

 

 

	<div class="modal" id="request-access-modal">
		<div class="modal-content">
		    <span class="close">&times;</span>
		    <h2>Get Early Access</h2>
		    <p>Some text in the Modal..</p>
		    <div id="hubspot-form-108af44d5234"></div> 
		</div>
	</div> <!--modal--> 


	<script>
		hbspt.forms.create({
			portalId: '6058669',
			formId: 'aabaff4c-57a3-4f6e-b7c6-108af44d523',
			target:'#hubspot-form-108af44d5234',
		});
	</script>

 

Reply
0 Upvotes
Regular Contributor

The only thing I can see is that I think you should remove the comma at the end of

target:'#hubspot-form-108af44d5234',

 Also maybe you can use

<script defer>

instead of just <script> ? Just to make extra sure it loads after your DOM...