What is the impact of switching to a thank you message after a successful form submission instead of using a page refresh? | Community
Skip to main content
F
future_vision
New Participant
January 31, 2021
Solved

What is the impact of switching to a thank you message after a successful form submission instead of using a page refresh?

  • January 31, 2021
  • 1 reply
  • 6743 views

The original post is here.
https://nation.marketo.com/t5/Product-Discussions/How-to-track-Marketo-forms-in-Google-Analytics-using-using-API/m-p/305735

 

Originally we were doing a page refresh with a form submission but working on moving over to leveraging the API to trigger a conversion event on a successful form submission. I found out this past week that the Marketo team, unbeknownst to me, started to end the page refresh and just show a 'thank you' message after form submission. I'm wondering what I need to do to  the code below, if anything, to account for this change. I imagine little or nothing since we are interacting with the API but that whole followUpUrl portion has gotten me a little worried.

 

 

 

 

 

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057); MktoForms2.whenReady(function(mktoForm) { mktoForm.onSuccess(function(values, followUpUrl) { dataLayer.push({ "event": "marketo.success", "marketo.form_id": form_id, "marketo.form_values": values, "marketo.follow_up_url": followUpUrl, "eventCallback": function () { document.location.href = followUpUrl; } }); return false; }) });

 

 

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by future_vision

I think I may have figured out my own question...I think. 

 

did a little digging and it looks like this is the code they are using on the page to show the thank you message.

 

 

<script src="//app-sj22.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1234"></form> <script>MktoForms2.loadForm("//app-sj22.marketo.com", "123-ABC-456", 1234);</script> <!-- Marketo Form Script --> <script> MktoForms2.whenReady(function (form){ form.onSuccess(function(values, followUpUrl){ form.getFormElem().hide(); document.getElementById('formsuccess').style.display = 'block'; return false; }); }); </script> <!-- Form Confirmation Message --> <div id="formsuccess" class="success-confirmation"> <div class="success-confirmation-header">Thank you for contacting us.</div>

 

 

I'm just looking at a mashup of sorts between the two blocks of code. Something like this?

 

 

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057); MktoForms2.whenReady(function(mktoForm) { mktoForm.onSuccess(function(values, followUpUrl) { dataLayer.push({ "event": "marketo.success", "marketo.form_id": form_id, "marketo.form_values": values, "marketo.follow_up_url": followUpUrl, "eventCallback": function () { document.location.href = followUpUrl; } form.getFormElem().hide(); document.getElementById('formsuccess').style.display = 'block'; }); return false; }) });

 

 

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
January 31, 2021

What do you mean by "the API"?  Whose API, and what API endpoints are you calling?

 

The Forms 2.0 JS API  code that you've shown sets GTM DataLayer properties and then redirects to the original Thank You URL (the URL set it Form Editor). It doesn't stay on the page, it redirects.

F
future_visionAuthor
New Participant
January 31, 2021

Yes. The Forms 2.0 API is what I was referencing. That code, which is what you helped me with in the linked message, was what I intended to use until the Marketo team switched things up. Now they do not refresh the page but just show a 'Thank you' message when the form is submitted. I'm trying to figure out what I need to do with this code given the new circumstance.

 

Looks like I need to kill the redirect. Is there a API method for swapping the form out for a 'thank you' message on a successful form submission?

F
future_visionAuthorAccepted solution
New Participant
January 31, 2021

I think I may have figured out my own question...I think. 

 

did a little digging and it looks like this is the code they are using on the page to show the thank you message.

 

 

<script src="//app-sj22.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1234"></form> <script>MktoForms2.loadForm("//app-sj22.marketo.com", "123-ABC-456", 1234);</script> <!-- Marketo Form Script --> <script> MktoForms2.whenReady(function (form){ form.onSuccess(function(values, followUpUrl){ form.getFormElem().hide(); document.getElementById('formsuccess').style.display = 'block'; return false; }); }); </script> <!-- Form Confirmation Message --> <div id="formsuccess" class="success-confirmation"> <div class="success-confirmation-header">Thank you for contacting us.</div>

 

 

I'm just looking at a mashup of sorts between the two blocks of code. Something like this?

 

 

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057); MktoForms2.whenReady(function(mktoForm) { mktoForm.onSuccess(function(values, followUpUrl) { dataLayer.push({ "event": "marketo.success", "marketo.form_id": form_id, "marketo.form_values": values, "marketo.follow_up_url": followUpUrl, "eventCallback": function () { document.location.href = followUpUrl; } form.getFormElem().hide(); document.getElementById('formsuccess').style.display = 'block'; }); return false; }) });

 

 

Terms & ConditionsAccessibility statement

Loading footer...