onFormReady triggers twice - scripts run 2 times

SOLVE
Highlighted
Occasional Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Moderator

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.

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes
4 Replies 4
HubSpot Moderator

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?

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes
Occasional Contributor

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

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

Reply
0 Upvotes
HubSpot Moderator

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.

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes
Occasional Contributor

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