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?
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 instanceonFormReady: (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 } elseif (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.
Hi, @ADeConinck3👋 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?