onFormReady triggers twice - scripts run 2 times

[david-at-bold]

Hi, I'm creating an animation for the submit button on Hubspot embedded forms. I"m using the global form events and realized my code gets run twice onFormReady.

I'm looking for help on preventing this from happening. Below is a sample of my code, that is supposed to create 3 spans after the input[type-submit] but ends of creating another span for each.

window.addEventListener("message", function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {

    $(".hs-form input[type=submit]").after("<span class='submit-fill'></span>", "<span class='submit-arrow'></span>", "<span class='submit-arrow'></span>");

  }

I will also be running a simple script onFormSubmit and onFormSubmitted, and I'm concerned if those events will cause the same problem (haven't gotten that far yet though).

[IsaacTakushi]

Hi, @david-at-bold.

Are you still encountering this issue? I haven't been able to replicate this behavior in my own account. The script I have within onFormReady triggers once, as expected.

Can you share an example page with this script implemented so I can take a look?

[david-at-bold]

Sure, here's a test page: https://boldcommerce.com/hubspot-test

You'll see in the console log that is triggers twice.

[IsaacTakushi · Accepted solution]

Hi, @david-at-bold.

Apologies for the delayed response.

I see two forms in that page's source code. The first is your "test form for styling":

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "2349803",
        formId: "0462ba2b-55a3-4a6e-89e5-16d37de23114",
  submitButtonClass: "btn btn-primary",
  cssClass: "test-class"
  });
</script>

and the second is the "Bold Commerce Contact Form 2019":

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
        portalId: "2349803",
        formId: "2dcafeaf-e8da-484a-97e6-6c6683a86eba"
  });
</script>

Since two forms are on the page, onFormReady triggers twice.

If you place your onFormReady callback within the embed code for the first form (ID: 0462ba2b-55a3-4a6e-89e5-16d37de23114), you should be able to avoid this.

[david-at-bold]

You;re right! Didn't even notice that. I'll use the callback to be able to prevent that from happening! Thanks!