How do you create a multi-page form?

You might want to take a look at some of the websites that go through the steps, like these:

• http://www.devx.com/webdev/Article/10483/0/page/2
• http://www.html-form-guide.com/php-form/php-order-form.html
• http://webdesign.tutsplus.com/articles/build-a-multi-step-form-interface--webdesign-11715
• http://www.formget.com/multi-page-form-php/

There are some suggestions on this one that are interesting, especially the progress stuff:

• https://www.w3.org/WAI/tutorials/forms/multi-page/

I suggest you try out several of these methods. As you will see, there are a variety of approaches, and the one you like may be a combination. Some depend on SESSION variables, some on hiding and showing the form parts, some on hidden fields. You'll find that different developers have strong feelings about some of this stuff, especially SESSION variables!

The bottom line, from my point of view, is ease of use for the user. You want to make filling in the form as "enjoyable" as possible. Some nicer features are allowing them to fill in a part and save that part and then come back to finish the form, especially if it's quite long, like some application forms. Another nice feature is to give them a Back button so they can review entries on an earlier page. Some multi-page forms combine the progress bar with the Back button by showing the steps and making the name of each step a link. A really critical feature is that if they go back they see the entries they made. And if they make a mistake in a field (e.g., don't pass validation for an email) they don't lose all the other entries they have already made.

Hi James,

Is it important to you that the form is actually on two different pages? Or do you only care that it is perceived as multiple pages?

Single page applications, using Angular/React or even just plain JavaScript are single pages that use JavaScript to give the perception that the users are going to separate pages.

If you are just looking for next/prev buttons to fill in small chunks of data at a time - then just show and hide the certain form elements depending on the current state/page the current user is on, then this is probably what you are looking for.

For examples, I could have an object of arrays that would hide/show the elements based on the current page. This is just a barebones example that would need additional state tracking for a previous button and additional pages - but this is a basic implementation in plain JavaScript:

var pageContents = [
  ['#name', '#email'],
  ['#phone', '#age']
];

function classAssigner(element, classNameParam) {
  //finds the element and assigns it the proper class, or an empty string
  var curElement = document.querySelector(element);
  curElement.className = classNameParam;
}

//this function gets called dueto the onclick attribute in the html on the button
function pageChanger(curPage, nextPage, pageContentArray) {
  //calls classAssigner for each item in the curPage index of the pageContent array
  pageContentArray[curPage].forEach(function(element) {
    classAssigner(element, 'hidden')
  });

  //calls classAssigner for each item in the nextPage index of the pageContent array
  pageContentArray[nextPage].forEach(function(element) {
    classAssigner(element, '')
  });
}

<input type="text" id="name" placeholder="name" />
<input type="text" id="email" placeholder="email address" />

<input type="text" id="phone" class="hidden" placeholder="phone number" />
<input type="text" id="age" class="hidden" placeholder="age" />

<button onclick="pageChanger(0, 1, pageContents)" id="next">next page</button>

.hidden {
  display: none;
}

Here is a link to the same code working on Code Pen: http://codepen.io/anon/pen/EKPaQe?editors=0100

Thank you both for your answers!

I used the Code Pen example concept and took my own spin on it:

// hide all fieldsets after 1st
$('fieldset').slice(1).hide();

var pageNumber = 1;

// when next is clicked
$('.mdl-button').click(function () {

    console.log('Clicked');
    console.log(pageNumber);

    // hide current page
    $('form>:nth-child(' + pageNumber + ')').hide();

    pageNumber += 1;

    // show next page
    $('form>:nth-child(' + pageNumber + ')').show();
});