Appending form fields to the Thank You URL

SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator

If your form’s Thank You page is on a different private domain — not just another subdomain of your main domain — and you want to pass over form values, they need to be appended to the query string.[1]

For example, if you’re forwarding people to a partner site, they probably have a keen interest in the person who filled out the form.

Below is a little bit o’ Forms 2.0 JS to append form fields — only the fields you want, so you can protect PII if necessary — to the Thank You URL for next-hop processing.

Usage is pretty simple: put the fields you want to append to the Thank You in the array appendFieldsToTYQuery.

For each item:

  • Set mktoField (required) to the Marketo form field name. By default, the field name is the query param name, too.
  • Set queryParam (optional) to have the query param name be different.
  • Set onURIEncode (optional) as a callback to make additional changes to the passed value, like uppercasing it or what-have-you.
/*
 * Append posted keys/values to Marketo Forms 2.0 Thank You URL
 * @author Sanford Whiteman
 * @version v1.0 2021-05-16
 * @copyright © 2021 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 */
MktoForms2.whenReady(function(mktoForm){
   const appendFieldsToTYQuery = [
      {
         mktoField: "Email"
      },
      {
         mktoField: "Phone",
         queryParam: "user_phone"
      }
   ];
   
   /* NO NEED TO MODIFY BELOW THIS LINE */
   
   mktoForm.onSuccess(function(submittedValues,thankYouURL){
      let thankYouLoc = document.createElement("a");
      thankYouLoc.href = thankYouURL;
      
      let appendables = appendFieldsToTYQuery.map(function(fieldDesc){
         let key = fieldDesc.queryParam || fieldDesc.mktoField,
             value = submittedValues[fieldDesc.mktoField] || "";
         
         if(typeof fieldDesc.onURIEncode == "function"){
            value = fieldDesc.onURIEncode(value);
         }
         
         return [key,value].map(encodeURIComponent).join("=");
      }).join("&");
      
      thankYouLoc.search += (thankYouLoc.search ? "&" : "") + appendables;
      document.location = thankYouLoc;
      
      return false;
   });
});

Note a Marketo Thank You URL, in practice, has a query string already (with at least one query param, the built-in aliId), but you should act like you don't know that and treat it as an unknown URL that may or may not have a query string.

 

NOTES

[1] OK, fine, you could POST the values to the Thank You page’s back end instead of GETting them in the URL, but that means involving their back end devs, if there even are any!

 
318
0