Stay on page second visit problem

[joarteag]

Hello!
I have a marketo form that keeps the user in the same page and show and embedded ty message, that's working fine, but if the user refresh the page he will see the second visit form, this form have the intention of send again the submit without completing the data again. The problem for this scenario is that when the user clicks the "submit again" button an error is fired, this because at that point the validation fails and we don't have access to the data that the user filled before.

const form = mktoForms2.getForm(formId);
// Here we don't have access to the values
const values = form.getValues();

//And we enter the if because of the !form.validate()
 if (!form.submittable() || !form.validate()) {
     // This if fires the error

This is only not working for this flow, because if instead of stay in this page we make a redirect to a thank you page or to the home and we come back to the page all works, we keep the data and the validation is true

So, my question here is, does marketo need a redirect to a different page to "store" the data filled for the user?
Or something different can be happening with my code? Because if I add a redirect after the submit the "second visit form works perfectly" and we only have the error when we keep the user in the same page.

Many thanks!
Jordan

[SanfordWhiteman · Accepted solution]

Afraid you’re not interpreting your observations correctly.

Marketo forms’ native pre-fill only works based on the mkt_tok query parameter. It doesn’t pre-fill based solely on the associated cookie (other JS libraries can do this, but it’s not native) nor on the aliId.

So in fact there’s no difference in Marketo’s behavior when you redirect to another page and use the Back button vs. refreshing the same page.

What you’re seeing when you use the Back button is the browser restoring the previous data on the form because the form is considered incomplete. This can be confused for pre-fill, but it’s not.

Separately, it’s true that a Marketo session cookie is not guaranteed to be associated with the record who submitted the form by the very next pageview (of any kind). It can take anywhere from a near-instantaneous 50ms to a few whole seconds. This is why a follow-up page can’t be expected to render {{lead.tokens}} from the newly associated lead; it sometimes does, sometimes doesn’t.

If you want to persist values from the form fill after a refresh, simply store them in Local Storage or in the query string.

[joarteag]

Thanks for the answer! I'll pay a more detailed tracking to the process on monday and let you know if I find something there (or close the topic)
Just out of curiosity, can you provide me an example (or a link that already have one) of how can I set to Marketo the data from local storage?

Thanks

[SanfordWhiteman · Accepted solution]

---

Just out of curiosity, can you provide me an example (or a link that already have one) of how can I set to Marketo the data from local storage?

---

A relatively simple approach to restoring fields when you use Stay On Page (i.e. reload):

MktoForms2.whenReady(function(readyForm){
  
  function ignoreSensitiveFields(key, value, addlFields = []){
    const alwaysSensitiveFields = ["checksumFields", "checksum", "_mkt_trk", "mkt_tok", "_mktoReferrer", "formid", "formVid", "munchkinId"];     
    const sensitiveFields = alwaysSensitiveFields.concat(addlFields);
     
    if( !sensitiveFields.includes(key) ) {
      return this[key];
    }
  }

  const currentURL = new URL(document.location.href),
        currentAliId = currentURL.searchParams.get("aliId");
   
  if(currentAliId){
     const storedSubmittedFields = JSON.parse(
        sessionStorage.getItem("mktoSubmittedFields"), 
        function(key,value){ 
           return ignoreSensitiveFields.call(this, key, value); 
        }
     );
     
     if(storedSubmittedFields && currentAliId === storedSubmittedFields.aliId) {
       delete storedSubmittedFields.aliId;
       readyForm.addHiddenFields(storedSubmittedFields);
     }
  }

  readyForm.onSuccess(function(submittedFields,thankYouHref){
     const thankYouURL = new URL(thankYouHref);
     
     submittedFields.aliId = thankYouURL.searchParams.get("aliId");     
     sessionStorage.mktoSubmittedFields = JSON.stringify(
        submittedFields, 
        function(key,value){ 
           return ignoreSensitiveFields.call(this, key, value); 
        }
     );
  });
});

Note the awareness of the fields you don’t want to store (since they’re automatically added by Marketo) and the careful comparison of the current page’s aliId (i.e. form fillout RAW cache key) to the last submission’s aliId.