Duplicate forms on same page using V2 API

Develop, Build & Integrate APIs & Integrations
,
1

I generate 2 or more duplicate forms onto my page inside modals using the v2 script. I have noticed the onFormSubmitted I attach to the form instances is called incorrectly on a different instance of the form about 75% of the time instead of the correct instance. Is there a solution to this? Does the onFormSubmitted use the instanceId at all or only the formId?

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js">

...

this.formInstance = hbspt.forms.create({
 portalId: this.portalId,
 formId: this.formId,
 target: `#...`,
 onFormReady: (e) => this.setupInputs(e),
 onFormSubmit: (e) => this.onSubmit(e),
 onFormSubmitted: (e) => this.onFormSuccess(e),
 })

Kind regards

Arnout

2

Hi, @ADeConinck3 :waving_hand: Thanks for your question. I’d like to invite some of our community members to the conversation – @Teun @Mike_Eastwood, how would tackle this? Or do you have any other ways you might approach a project like this?

Thank you! — Jaycee

3

When dealing with multiple duplicate forms on the same page using the HubSpot V2 API script, you’ve observed that the event onFormSubmitted is sometimes called incorrectly on a different instance of the form. To address this, you can implement a solution by ensuring that each form instance has a unique identifier.

The HubSpot V2 script doesn’t expose a direct instanceId that you can use for identification. However, you can manually assign a unique identifier to each form instance by creating a custom property or using the formId and then associating it with the onFormSubmitted event. This way, you can track which instance triggered the event accurately.

this.formInstance = hbspt.forms.create({ portalId: this.portalId, formId: this.formId, target: `#…`, instanceId: “uniqueIdentifier1”, // Assign a unique identifier to each instance onFormReady: (e) => this.setupInputs(e), onFormSubmit: (e) => this.onSubmit(e), onFormSubmitted: (e) => this.onFormSuccess(e, “uniqueIdentifier1”), // Pass the unique identifier to the event handler });

Adjust the instanceId for each form instance accordingly. Then, in your onFormSuccess function, you can check the identifier to determine which form instance triggered the event:

onFormSuccess: (e, instanceId) => { if (instanceId === “uniqueIdentifier1”) { // Handle form success for the first instance } else if (instanceId === “uniqueIdentifier2”) { // Handle form success for the second instance } // Add more conditions as needed for additional instances }

By introducing unique identifiers for each form instance, you can reliably track and handle the onFormSubmitted events associated with specific forms, minimizing the chance of incorrect event calls.