I have a page with 14 forms, but not all the forms loads. I’m adding external js (< script charset=“utf-8” type=“text/javascript” src="//js.hsforms.net/forms/v2.js">< /script>) scripts in head. In body I add scripts for forms like this:
< script>
hbspt.forms.create({
css: ‘’,
portalId: ‘xxxxxxx’,
formId: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxx’
});
< /script>
< script>
hbspt.forms.create({
css: ‘’,
portalId: ‘xxxxxxx’,
formId: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxx’
});
< /script>
…
But if I add external js next to form creation script like this:
< !–[if lte IE 8]>
< script charset=“utf-8” type=“text/javascript” src="//js.hsforms.net/forms/v2-legacy.js">
< ![endif]–>
< script charset=“utf-8” type=“text/javascript” src="//js.hsforms.net/forms/v2.js">
< script>
hbspt.forms.create({
css: ‘’,
portalId: ‘xxxxxxx’,
formId: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxx’
});
< /script>
< !–[if lte IE 8]>
< script charset=“utf-8” type=“text/javascript” src="//js.hsforms.net/forms/v2-legacy.js">
< ![endif]–>
< script charset=“utf-8” type=“text/javascript” src="//js.hsforms.net/forms/v2.js">
< script>
hbspt.forms.create({
css: ‘’,
portalId: ‘xxxxxxx’,
formId: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxx’
});
< /script>
…
all the forms are visible. I just don’t see a reason to load same script 14 times.
Any idea how to fix this?
You should only need to load the v2.js script a single time, so having that in the header should be fine.
Depending on the layout of your page, you may need to use the target attribute of the form code to specify the element that the form should be placed in. Including the embed code multiple times on a page could cause some of the forms to appear in the wrong place, depending on how the page is built.
This is a list of options that you can use if you just need to tweak a default hubspot form. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.
Also, in general I wouldn’t recommend including 14 forms on a page, as it could take a while to load all 14 forms. If possible, you may want to look at dynamically calling the hbspt.forms.create() function when a visitor indicates they want to fill out one of the forms, so that you only load that one form.
@vel Hello, we created page with multiple form I guess for us its working fine, if you check source, we have only once included https://js.hsforms.net/forms/v2.js
and we have 3 forms on page, may be looking into source might help you, or you can share your link.