Multiple Page HTML Form Tutorial (Multi-page Form)

A Multi-Page Form is a great way to condense a large form into a highly functional user friendly form which won’t scare your users off and increase the number of form submissions.
I recommend taking a few minutes to read and understand how the form works it will save you time customising it for your application.


If you want to dive right in click here to see the form in action!
Multi Page Form Example

Benefits:

My philosophy is to provide the most lightweight minimalist code. Page load times are so important these days and there is no point me styling any extra than absolutely necessary. You will most likely have your own styles in mind anyway and need to delete mine.

  • No jQuery (Aiding our minimalist philosophy)
  • Simple and functional
  • User friendly and intuitive

Features:

  1. Multiple pages
  2. Back and continue buttons
  3. On click progression
  4. CSS Progress Bar

Technology:

  • HTML
  • CSS
  • JavaScript

The Theory Behind The Multi-Page Form.

In actual fact this is not a multiple “page” form but it gives the user an impeccable illusion. A true multiple page form would include pages like page1.html, page2.html and so on. This form simply displays and hides the separate “pages” or unordered lists of the form in a div when the user clicks back or continue.

Section 1: The Basic Form

OK lets start with the bare bones of the form we are going to create. Notice the unordered list id’s e.g. page_1, page_2 and so on.

<form method="post" enctype="multipart/form-data" action="process.php" onSubmit="return">
<!--Page one-->
<ul id="page_1">
    <li>
        <h2>What is your email address?</h2>
        <label>Enter your email address:</label><input type="text" />
    </li>
    <li>
<input type=button value="Continue"/>	
    </li>
</ul>

<!--Page two-->
<ul id="page_2">
    <li>
        <h2>What is your gender?</h2>
        <label>Male</label><input type="radio" name="sex" value="male"><br/>
		<label>Female</label><input type="radio" name="sex" value="female">
    </li>
    <li>
<input type=button value="Continue"/>	
    </li>
</ul>

<!--Page three-->
<ul id="page_3">
    <li>
        <h2>How do you like to get around?</h2>
        <input type="checkbox" name="vehicle" value="Bike"><label>I have a bike</label><br/>
        <input type="checkbox" name="vehicle" value="Car"><label>I have a car</label>
    </li>
    <li>
    <input type="submit" value="Submit">
    </li>
</ul>
</form>

Take a moment to analyse the code and familiarize yourself. We have 3 unordered lists ul which will be our “pages” with each question inside those pages inside a list item tag li. For good measure we have used a text field, radio group and check box group.

Section 2: Building The JavaScript Functions (no jQuery)

As you can see below there are three functions in our JavaScript.

  1. The first function collapseElement does exactly that is collapses the element by changing the inline style to display:none which hides the element or “page”. This function runs when the user clicks the continue or back button using the “onClick” tag.
  2. The second function is expandElement is the complete opposite of the first function it expands the element by removing the inline style display:none. This function runs when the user clicks the continue or back button using the “onClick” tag.
  3. Our third element hides all pages except the first page when the page loads using the onLoad tag. We implement this by changing our body tag to body onLoad=”collapsePages()” this initialises the JavaScript function. Here you can change the number of pages e.g. change var numFormPages = 3 to however many pages you intend to have.

Use this code in your head section.

<!--Pages function-->
	    <script type=text/javascript>
		function collapseElement(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = 'none';
		}
		function expandElement(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = '';
		}
		function collapsePages()
		{
			var numFormPages = 3;
			for(i=2; i <= numFormPages; i++)
			{
				currPageId = ('page_' + i);
				collapseElement(currPageId);
			}
		}
		</script>

Section 3: Implementing The JavaScript Functions.

Now we need to implement the functions into our form! This is the fun part.

1. Change your body tag to body onLoad="collapsePages()".
2. Add our onClick functions to the continue buttons.
Change:

<input class="mainForm" type="button" value="Continue" />

<input class="mainForm" onclick="collapseElement('page_1'); expandElement('page_2');" type="button" value="Continue" /> <!--This hides the first page and shows the second page-->

Section 4: Implementing The Continue And Back Buttons.

We also want to add back buttons for usability. As the first page wont need a back button (there's no where to go back to) we will skip that and go to the second page. You can add the back button before or after the continue button. The back button is almost identical to the continue button there are a few small changes:

  • The continue button collapses page 2 and expands page 3, the back button will collapse page 2 and expand page 1.
  • The button value is "Back" (you can change this values to whatever you like e.g. previous, before, next e.t.c.)
<input class="mainForm" onclick="collapseElement('page_2'); expandElement('page_3');" type="button" value="Continue" /> <!--This hides the second page and shows the third page-->
<input class="mainForm" onclick="collapseElement('page_2'); expandElement('page_1');" type="button" value="Back" /> <!--This hides the second page and shows the first page-->

Ok great now we have a functioning multipage form!

Section 5: Implementing On Click Progression.

There's one really nifty trick we should add to it for even greater user functionality. Its what I like to call "On Click Progression". Say you have a page with just a radio group, instead of making the user click their selection and then click continue why not make the radio button the equivalent of a continue button?

Take for example:

    <li>
        <h2>What is your gender?</h2>
        <label>Male</label><input onClick="collapseElement('page_2'); expandElement('page_3');" type="radio" name="sex" value="male"><br/>
	<label>Female</label><input onClick="collapseElement('page_2'); expandElement('page_3');" type="radio" name="sex" value="female">
    </li>

Just like our continue button we have added an onClick function to the radio buttons.

Section 6: The PHP Processor.

Of course there is one last thing to complete this form. The php process which sends your results and usually redirects you to a thankyou page e.t.c.

We will create a file called process.php and include the script below. This script sends an email with the results and redirects the user to the chosen page.

<?php
$where_form_is="http://".$_SERVER['SERVER_NAME'].strrev(strstr(strrev($_SERVER['PHP_SELF']),"/"));

$email = $_POST['field_1'];

$message .= $_POST['field_2'];
$message .= $_POST['field_3'];

$headers  = "From: " . $email . "\r\n";
$headers .= "Content-type: text/html\r\n"; 

mail("youremail@yourdomain.com","Form Submission", $message, $headers);

header('Location: http://www.yourdomain.com.au/yourpage.html');
?>

Section 7: The Label For Attribute.

Lets go one small step further after all the easier the form is to use the more people will use it! Lets take a look at the Label For attribute. What this enables is the user to click on the label and initiate the input. Say I click the label "male" it will take my selection as "male". Say I click the label "email" it will enable me to type in the email input. In short it ties the label to the input and allows the user to click either the label or input to initialise the element.

Take the example below. We have added for="email" to the label and the id="email" which identifies the input (yes this also doubles as a CSS Selector).

<label for="email">Enter your email address:</label><input type="text" id="email" name="email"/>

Section 8: CSS Progress Bar. (Optional)

When your users have a clear end in sight and can visualise their progression they are much more likely to complete your form. The perfect solution is a CSS Progress Bar.

The theory behind this feature is a div box with a set width of 235px. Inside this div is a span which has a width at a percentage of the surrounding div. For example if you have 3 pages divide 100% by 3 which equals 33% (rounded) and this will be the width of the span for each page. The first page will have a span width of 33% the second page 66% and the third page 98% (taking into account our border).

First of all we need the CSS.

.meter { 
	width:235px;
	height: 20px;
	position: relative;
	background: #555;
	border:solid 2px #000;
}
.meter > span {
	padding-left: 5px;
	display: block;
	height: 100%;
	background-color: rgb(43,194,83);
	position: relative;
	overflow: hidden;
}

You will place your progress bar just before the page's closing unordered list tag. Take for example page one.

<!--Page one-->
<ul id="page_1">
    <li>
        <h2>What is your email address?</h2>
        <label for="email">Enter your email address:</label><input type="text" id="email" name="email"/>
    </li>
    <li>
<input type=button onClick="collapseElement('page_1'); expandElement('page_2');" value="Continue"/>	
    </li>
    <div class="meter"><span style="width: 33%">1/3</span></div>
</ul>

Congratulations You've Just Built Your Own Multi-Page Form!

Lets see the form in action!

Please feel free to comment in the section below.

  • Give your feedback!
  • How have you implemented the Multi-Page Form?
  • What improvements have you made?
  • Have you had any difficulties implementing the Multi-Page Form?
  • Do you need help implementing the Multi-Page Form?

Author: Justin Nisbett Protected by Copyscape Duplicate Content Checker

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">