Form duplication when using hbspt.forms.create

Developer Support APIs & Integrations
, , ,
1

Hi all,

I am using a form in a drag & drop template and also some javascript code that is using the hbspt.forms.create function.

Javascript code:

hbspt.forms.create({
 portalId: 'XXXXXX',
 formId: 'a7b18ca3-c163-4df4-9793-XXXXXX',
 onFormReady: function($form, ctx) {
 /* Some code running here */
}
});

This is the link to the page:

https://info.shamir.com/-temporary-slug-26c01c5b-7cfd-4853-b40e-10bc76ab9c9e?hs_preview=IdgOTyTu-58617120840

The problem is that when the page is uploaded I see another form at the bottom of the page in addition to the form that is part of the template. Ho w can I disable this duplication?

2

@EyalBin

That link you provided doesn’t appear to work :sad_but_relieved_face:

If you are using a form module and using that form embed code, you would get two forms.

Can you just remove the form module you added to the template?

3

Thanks for your reply,

here is a link to page:

https://info.shamir.com/-temporary-slug-26c01c5b-7cfd-4853-b40e-10bc76ab9c9e?hs_preview=IdgOTyTu-58617120840

regarding your comment, I need to have the form editable from the module, is there a way to add some javascript code to the form with using sonthing other than bspt.forms.create?

4

@EyalBin ,

I think the problem revolves around using both the form module as well as an embed code in your js.

@dbeau79 , do you have some advice here? :grinning_face:

5

@EyalBin , i think what you want is a global form event. Check out this link: Accounts Dashboard | HubSpot. In your case you would use this:

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 // add the code from the onFormReady callback from your embed code and remove the embed code
 }
});
6

Thank you very much @dbeau79 .

Indeed I found the solution in the global form event functions. many, many thanks :slightly_smiling_face:

7

I’m currently finding out how HubSpot forms work, and this discussion helped me understand when to use global form events instead of embedding another form. Thanks for sharing the solution.

8

Hey @Nikitha,

I’m so glad you found this thread helpful!

If you hit any other snags or want to bounce ideas around as you build things out, feel free to start a new thread. The community is here to help!

Sam, Community Manager

9

I learned something new from this thread. Using global form events seems like a much cleaner approach than creating another form instance.

10

Hi @Kavya_H_N, that’s great to hear!

Global form events can definitely streamline things and help keep your setup more efficient.

Thanks for sharing your feedback, and happy learning as you explore more HubSpot features!

And please don’t hesitate to create a new topic if you have any questions, we are here for you!

Have a wonderful day!
Bérangère