Two Part Form Submittal

Anonymous
Not applicable

Re: Two Part Form Submittal

That is great. Would there be a way to store the previous form ID so I can add a back button next to the "next" button?

Courtney_Grimes
Level 10

Re: Two Part Form Submittal

An interesting way to attack the problem, but using two forms seems like overkill.

The way I've gotten around this problem in the past is to use a combination of fieldsets, CSS and display JS to actually break the form display up (while keeping it intact for browsers that can't handle/accessibility issues.) There's many different ways to approach the issue, but you can see a very basic example at https://codepen.io/ActiveCodex/pen/OVBeMg

That also gives you the freedom to make faux Prev and Next buttons, and all data is saved as you're just changing styles for the end user.

Anonymous
Not applicable

Re: Two Part Form Submittal

So how would you go about setting up up fieldsets within a Marketo form?

SanfordWhiteman
Level 10 - Community Moderator

Re: Two Part Form Submittal

100% agree that multiple layers within one form is better if all you want is steps. Multiple forms is for the deliberate goal of saving the form data at each step ("progressive post" if you will). A partial profile may or may not be useful depending on the fields, o' course...

janerusnak
Level 2

Re: Two Part Form Submittal

Hi @SanfordWhiteman this looks like exactly what I need, but I'm very new to JS editing and I'm trying to figure out where to I add this code from you "demo"? Is it on the landing page where the second form is embedded? In my case we have a request a demo page with form 1 (that collects email, first and last name and company name), after form fill the user is redirected to the thank you page with form 2 for optional additional information. Would it be possible for you to advise me on what would be the steps in this case?
Where does the code needs to be added? do i make the fields on form 2 hidden or remove them completely?

 

Thank you so much in advance for your help!

Looking to spend wisely at your company? Check out procurify.com
SanfordWhiteman
Level 10 - Community Moderator

Re: Two Part Form Submittal

From this description, it doesn't sounds like you want a "2-part" form — rather, those are forms on different pages — or are you looking to move to a 2-part form?

janerusnak
Level 2

Re: Two Part Form Submittal

Oh, maybe I misunderstood the two-part form process in this case 😞 I want to make it easier for prospects to provide additional information in the second form, without asking form email and company name again. We have a pretty high competition rate for the second form, but prospects often mistype email the second time or provide a different email which leads to us doublecounting MQLs.

Any suggestion for how to pass email and company name from form 1 to form 2 in this case?

Looking to spend wisely at your company? Check out procurify.com
SanfordWhiteman
Level 10 - Community Moderator

Re: Two Part Form Submittal

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.

janerusnak
Level 2

Re: Two Part Form Submittal


@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?

Looking to spend wisely at your company? Check out procurify.com
SanfordWhiteman
Level 10 - Community Moderator

Re: Two Part Form Submittal

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.