Multi-page form logic - how do you do yours?

PHP
1

Hi All,

I am going to build an app which has 5 data input forms (a survey app), to make it easier to fill in I want to put the 5 forms on seperate pages.

When you have designed multi-page surveys in the past, what design did you use?

For example did you :

  1. collect all info from form1 and put the items as hidden vars in form2, and continue this all the way to your final form?

  2. insert the results of form1 into a temporary table in a DB?

  3. Sessions?

  4. use some other approach?

Obviously I need to deal with incomplete data submissions, people abandoning the survey half way through, someone pressing the “back-button” halfway through, blanks, etc.

Any advice appreciated.

2

I’d normally concur with Anthony on this.

However for 3 days now I have had an online form for a motor insurance quote sat in a tab in my browser.

I am dreading filling it in. It has 80 different form elements, and just by looking at it, I know, I know if I get just one wrong - I am going to lose the lot and have to start all over again.

I’m filled with dread, so you are right to ask how to break it up.

Of all the options you asked about and with Anthony’s answer in mind too, I hate to say it but the answer probably remains “it depends…”.

a) how much you stand to lose if, say the user stops half way?
b) how much do users stand to lose if they stop half way?
c) are users logged in, do you know who they are, have they invested any time in your site?
d) are users likely to have to leave their screens to go and dig out information?
e) how long the form is in terms of i) text ii) form elements
f) are some form elements options dependent upon previous selections, and will users go back and change them?

In my insurance company and me the answers are:
a) Everything!
b) Potentially an hour (which I dont have)
c) I’m not, I don’t care I’ll go somewhere else of give up and phone them
d) Absolutely
e) i) not much ii) 80 !!! elements to go wrong!
f) I think so

In your case maybe that is:

a) not much
b) not much
c) no
d) no
e) not that bad
f) nah…

If that is your case I’d do what Anthony said :wink:

My insurance company should have split the page up, ask me first off for my email address started a session, stored each part of the form in a database, keep checking my session. Given me a cookie and made it clear I can can come back any time within say 7 days to finish filling in the form - and if I don’t come back in 7 days, clear out the half-finished database.

As it is I am planning on submitting an empty form to see if the validation is initially client or server side - but I am still dreading it.

3

Anthony, Cups,

Thanks for your responses.

It did occur to me to have one gigantic form but use tabs or sliding panels to split it up. I ran into a problem that i wasnt sure how to validate form elements in tabs.

Cups, forms can still be a nightmare to fill in online. Once i filled in a huge form, got all the way to the payment page and then got a message “Sorry you need to upgrade your browser” (I was using firefox), and it hadn’t saved my responses so i could hop over to IE with my login details. bah !

a) how much you stand to lose if, say the user stops half way?
not much

b) how much do users stand to lose if they stop half way?
they will have to start again

c) are users logged in, do you know who they are, have they invested any time in your site?
Yes they identify themselves with their email address

d) are users likely to have to leave their screens to go and dig out information?
good question. no they don’t

e) how long the form is in terms of i) text ii) form elements
approx 60ish form elements. mostly radio buttons and a few select lists

f) are some form elements options dependent upon previous selections, and will users go back and change them?
I’m not clever enough to make this :slight_smile:

I think I’ll go with the tabbed approach, and like Anthony suggested, have a next button which will validate the items in that tab, and then display the following tab.

4

OK, the only other thing I’d add is to mark mandatory questions very clearly indeed, and if, on swopping tags that is the time to pop up any JS reminders, before that part of the form vanishes from site.

5

Unless you’re doing something with the data from each ‘page’, why not just use a single form?

You can add some JS goodness to break it down somewhat though…


<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <form action="" method="post">
      <div id="your-form">
        <div class="page active">
          <input type="button" value="Next" />
        </div>
        <div class="page">
          <input type="button" value="Next" />
        </div>
        <div class="page">
          <input type="button" value="Next" />
        </div>
        <div class="page">
          <input type="button" value="Next" />
        </div>
        <div class="page">
          <input type="submit" value="Finish!" />
        </div>
      </div>
    </form>
  </body>
</html>

Just hide the other div.page elements and use JS to slide/fade/shake/rattle/roll/move between them.

I’ve done this before and it makes for a much better user experience.