Two Part Form Submittal

[janerusnak]

---

@SanfordWhiteman wrote:

If the end user has cookies enabled, you don't need to include the Email Address field on the second form at all.  The session will already be associated with their lead, and will keep that association.

If you want to protect against the possibility that they had cookies disabled during the first form submit, include the address in the URL of the second page and use it to fill a (hidden) Email Address field.

---

Hi Sanford, I know it has been a while, but I still haven't been able to fix this. For context, we're not using marketo LPs. In our case, our main book a demo form capture and the subsequent thank you page with additional form lives on our main domain (webflow). After reading your comments in this post as far as I understand I should add the following code to the book a demo form (Form 1):

form.onSuccess(function(vals,thankYouURL){
    document.location = thankYouURL + '&?Email=' + vals.Email;
    return false;
});

And on the follow up form on the Thank you page (Form 2)
I would make the email field hidden and will populate it with value from URL.

Does this sound right to you?

[SanfordWhiteman]

Let's be a little more scalable/professional with it and use a li'l framework to do it (this will be added to the Products blog soon):

/**
 * Append posted keys/values to Marketo Forms 2.0 Thank You URL
 * @author Sanford Whiteman
 * @version v1.0 2020-12-16
 * @copyright © 2020 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 */
(function () {
   const appendFieldsToTYQuery = [
      {
         mktoField: "Email"
      }
   ];

   /* NO NEED TO MODIFY BELOW THIS LINE! */

   MktoForms2.whenReady(function (mktoForm) {
      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 the thankYouURL, 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.

[janerusnak]

Beautiful, thank you Sanford 🤗

I'm going add this framework on book a demo page and on the thank you page grab the email value from the URL. Will test this next weekend and let you know how it goes.

[Kathi_Gosche]

I'll give this a shot Sanford. Thanks for the suggestion and code!

[Anonymous]

I am now using your code Sanford.

But, how to add another form ?

and how to remove the email parameter ?

thank you so much

[SanfordWhiteman]

Add another form by just nesting it the same way: MktoForms2 :: Progressive Form Substitution - JSFiddle*

You don't want to get rid of passing the email because that's how you make sure Marketo will tie each form's data to the same lead.

* This would be better done using a recursive function when you go over 2 forms, but I don't have time at the moment. Will edit later.  The demo now uses a recursive function so you can stack as many forms as you want (the `formidStack` array up in the config section) without adding more code. 

[Anonymous]

thank you so much for your reply sanford !

[Anonymous]

another question : my forms are now stuck on the bottom left corner - why ? and how do I move them where i want ?

thanks

[SanfordWhiteman]

Get a copy of the latest code (now v23) from the link.  In the config section, set `insertInsideSelector` to the element you want the form to go inside.  In the demo it's being inserted inside the <DIV> with id="exampleContainer".

[Anonymous]

Great - thank you !

Now I am working on putting the button on the right handside for each forms. Do you have a code for this ?