Form duplication when using hbspt.forms.create

[EyalBin]

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-586...

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?

[dbeau79 · Accepted solution]

@EyalBin , i think what you want is a global form event.  Check out this link: https://legacydocs.hubspot.com/global-form-events.  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
   }
});

[EyalBin]

Thank you very much @dbeau79 .

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

[dennisedson]

@EyalBin 

That link you provided doesn't appear  to work 😥

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?

[EyalBin]

Thanks for your reply,

here is a link to page:

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

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?

[dennisedson]

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