Back to Top
The nuts and bolts for
Creative web development

Multi Page Forms on One Page

Don't you hate it when you fill in a long form, forget one field and then find the form has cleared down? If you code like that, you guarantee that users will stay away in droves.

But often you are faced with the prospect of a very long form. You could certainly break up the form into two, three or even four pages, but this means you have to deal with the data that was filled out on previous pages.

This tutorial uses JavaScript to make the form appear as if we were moving through a series of steps (to keep the form manageable for user) while never leaving the page. Then we can just submit once and be done. The user can go backwards and forwards and data is never lost, and a progress meter is also shown so that the user knows how far (s)he is through the process.

Share this Article