Two Part Form Submittal

[Kathi_Gosche]

Does anyone know how I might be able to have a form submitted, then present the user with a second form that doesn't requite the user to re-enter thier email address? I know field logic would do something similar in a single form, but then the form can't be submitted until all fields are supplied. Longer forms mean more abandonment. If I can get the basic info on the first form, I have them in the system. Indepth qualifing info could then be gathered by the second form.

Some users may not complete the second form, but many would if I tell them this will speed up our turn around time. But I don't want to annoy them by asking for email address when they just supplied it on the previous form.

Any and all ideas are welcome. Thanks in advance.

[Anonymous]

I would think progressive profiling would work here, if the landing page you sent them to had the same form. Info on progressive profiling here: https://community.marketo.com/MarketoArticle?id=kA050000000LHAFCA4.

Additionally, if you are hoping that they will immediately fill out a second form by explaining more information = more turn around time, why not just give them that option in the first place? Make only a few fields required, then have a note that the more information they are able to share, the faster/more accurate the response would be.

Honestly, I'd rather a longer form that I knew I could skip then fill out a form and have a second form after. I might think that the original form did not submit or something.
 

[SanfordWhiteman]

@Kathi this is simple to do.  In the onSuccess() of the first form, you always get the values echoed back to you.

Then you can promptly load the second form and do addHiddenFields({ Email: values.Email })

 

[Kathi_Gosche]

Sam, the progressive profiling may work here, but the email and all still show on the second form. I can certainly see how someone might not think the form didn't submit. I'm going for a continuation of the first form I guess you could say. The page would say something like "Your request has been submitted. To speed up the process, please tell us more about your computing environment in which you plan to use this software." Then be presented with the proper fields. Since it's a trial, I don't want to add any fields that might make someone think the process is long.

Sanford, do you mean simply present the second form on the follow-up page with the email field, company, and name hidden and present the new questions? 

Thanks for the suggests. I appreciate them both.

-Kathi

 

[SanfordWhiteman]

I wouldn't say you need a follow-up "page" exactly -- you can simply remove one form and embed the other in its place, so it's quite graceful. But yes, all you need do is get the filled-in fields into the 2nd form. You can do this all in JS (if you keep them on the same page) or passing them in as cookies or query params (if forwarding to a new page).

[SanfordWhiteman]

Demo of two-form workflow passing email between the two.

[Anonymous]

thank you so much for this! Works like a charm... quick question: after the last form is submitted how would one get a thank you message to show. Currently, the last form submission reloads the page.

[SanfordWhiteman]

Currently, the last form submission reloads the page.

See the updated Fiddle. You can now populate the config.onFinalSuccess function with what you want to happen after the final form is submitted (i.e. return false; and then replace some other element on the page with text or what-have-you).

[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.