APIs & Integrations

ADeConinck3
Member

Duplicate forms on same page using V2 API

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

0 Upvotes
2 Replies 2
FTrands
Member

Duplicate forms on same page using V2 API

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.
0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Duplicate forms on same page using V2 API

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? 

 

Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes