Making Form Wizards

Form Wizards are basically forms divided into several steps. They are useful for polls or special cases of forms, when we want to divide the registration process on our website. They are also used in e-commerce websites, in the purchase process (shopping cart→payment methods→shipping address→confirmation→purchase itself). In this recipe, we will build a Form Wizard (as simple as possible).

Getting ready

We will prepare the dummy PHP files step1.php, step2.php, and step3.php. The content of these files is simple:

<?php
echo "STEP 1"; // Same for 2 and 3
?>

Here again we will include jQuery library:

<script src="js/jquery-1.4.4.js"></script>

How to do it...

1. We start by defining the HTML content:

   <div class="wizard">
     <ul class="wizardNavigation">
       <li class="active first" id="step1">Step 1</li>
       <li id="step2">Step 2</li>
       <li id="step3" class="last">Step 3</li>
     </ul>
     <div class="wizardBody...