Embedded Forms Erratic Behavior / Not loading...sometimes

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

26 Replies 26
LeKevoid
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...

0 Upvotes
pniebrzydowski
Participant

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

0 Upvotes
LeKevoid
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>

0 Upvotes
fcharest
Participant

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,

0 Upvotes
LeKevoid
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.

crisaba87
Participant

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

Could you help me?

Thanks, Cristian

0 Upvotes
LeKevoid
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. 🙂

crisaba87
Participant

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

LeKevoid
Contributor

Hi,

I just PM'd you. 😉

0 Upvotes
ricardocici
Member

LeKevoid, thanks for you help.

 

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

fholub13
Participant

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

0 Upvotes
LeKevoid
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.  🙂

0 Upvotes
fholub13
Participant

Ignore this post, submitted prematurely.

0 Upvotes
fholub13
Participant

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

0 Upvotes
LeKevoid
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 !

fholub13
Participant

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!

0 Upvotes
LeKevoid
Contributor

Very happy to read this !

Cheers !  ^_^

0 Upvotes
Kaila_11
Member

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.  

0 Upvotes
LeKevoid
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. 🙂

 

kobrien94
Member

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

0 Upvotes
LeKevoid
Contributor

No idea.

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

0 Upvotes
ZunairaOmar
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>

0 Upvotes
LeKevoid
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...

0 Upvotes
bethanys
Member

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>

 

0 Upvotes
LeKevoid
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...

CEra533
Member

When contacts are batched efficiently, you can update the equal universe of records with fewer calls than one-at-a-time syncs. But there may be nonetheless going to be an API hit.