Form onSuccess refreshes page

[ethanweissTT]

Hi, 

I have this code that has a bug in it:

<div class="mktoForm" id="promoForm" mktoName="Promotion Form"></div>
<!-- Marketo Form Event Handler Must stay here to load with form-->
<script>
MktoForms2.whenReady((form) => {
    form.onSuccess((values, followUpUrl) => {
        form.getFormElem().hide();
        document.getElementById('promoConfirmFormDiv').style.display = 'block';
        return false;
    });
});
</script>
<div id="promoConfirmFormDiv" style="display:none;">
<p class="text-white"><strong>${promoFormConfirmation}</strong></p>
</div>​

When I submit my form the page still refreshes. When I debug the code the return false is called twice for some reason and on the second call the page refreshes and I tried a few other options, but nothing has worked. Does anyone have any tips to try to assist me? 

Kind regards,
Ethan

[SanfordWhiteman]

Please use the Syntax Highlighter (“Insert/Edit Code Sample”) when inserting code so it’s readable. I edited your post this time.

We need to see your actual page because this code alone is not causing the error.

[ethanweissTT]

Here is the link: https://empower.tylertech.com/test-gated-form-and-promo-form.html

[SanfordWhiteman · Accepted solution]

You have anotheronSuccess function loading from GTM that’s redirecting in a DataLayer event callback (this always overrides an attempt to stay on the page).

Common problem as you must coordinate onSuccess functions toward the same final outcome.

[ethanweissTT]

Hi Sanford, 

What is the best way to embed the GTM script if that's causing the issue? Commenting out the GTM script worked and now the form is working as intended, but I would like to have the GTM script as well. 

Here is a new link:
https://empower.tylertech.com/test-gated-form-Ethan.html  

Kind regards,
Ethan

[ethanweissTT]

I found out that we added an HTML script to our GTM container that listens to Marketo form submissions and when we removed this from the container the form functionality worked correctly and it isn't due to the actual GTM container. 

Does anyone have any best practices to track form submissions? 

[ethanweissTT]

Hi @SanfordWhiteman, how'd you find out about the double onSuccess functions?

[SanfordWhiteman]

---

how'd you find out about the double onSuccess functions?

---

Using the Debugger (in Developer Tools).

[SanfordWhiteman]

---

when we removed this from the container the form functionality worked correctly and it isn't due to the actual GTM container.

---

Of course, that's the conflicting onSuccess function I referred to above.

[SanfordWhiteman]

---

Does anyone have any best practices to track form submissions? 

---

Loading all your form behaviors from the same area – be that from a group of related GTM tags or a group of adjacent JS files in the same section of the LP HTML – is best practice. That’ll let you tightly coordinate the order and final outcome of your stack of onSuccess, onValidate, and onSubmit listeners.