Two Part Form Submittal

[Anonymous]

This is fantastic! Works great...still. How would you go about adding in a back button, I tried but wound up breaking a bunch of things. It would be great to be able to navigate back to a previous "section".

Thanks so much for this.Sanford Whiteman​

[SanfordWhiteman]

Glad to see it still being of use, Ryley!  It's an oldie, can tell because it's on jsFiddle and I use CodePen now.

Adding a "back" button would require considerable refactoring of the code, it would not be a simple tweak.  What I can do for you right now is let you override the starting form ID by passing it in the hash.

So if your form stack is [169, 220, 238] a "back" button on form 238 can run

document.location.href="#220";
document.location.reload();

which will of course refresh the entire page, but will start them from form 220 when it loads.

I moved the code to this CodePen.  If you go to https://s.codepen.io/figureone/debug/wpXrvx#220 you'll see you start from 220.

[Anonymous]

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?

[Casey_Grimes]

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]

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

[SanfordWhiteman]

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]

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!

[SanfordWhiteman]

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]

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?

[SanfordWhiteman]

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.