jQuery: form wizard plugin

So what is the form wizard plugin?

The form wizard plugin is a plugin based on jQuery which can be used to simulate wizard like page flows for forms without having to navigate between different pages.

The plugin is very unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form depending on the user input.

Features

  • Divides a single form into different steps to simulate a flow of steps rather than one big form.
  • Supports different routes to be taken in the form
  • Submits only the input fields in steps that are visited in the form
  • Supports multiple "submit"-steps
  • Supports both back and forward navigation
  • Supports the usage of browser back- and forward-buttons through integration with the jQuery.history plugin
  • Supports client-side validation through integration with the jQuery validation plugin
  • Supports posting the form using AJAX through integration with the jQuery.form plugin
  • Integrated plugins are fully configurable, providing e.g. possibility for localization and extra validation rules

On the right of this page, a sample form is available as a demo.

How to get started using the plugin

Step 1:

Create a form on your page and add some spans or divs with the class step around the elements that should be considered a step in the wizard. The form below should create a 5-step wizard which branches at step 2 and submits the form on step 3 and 5. The form also have validation for the bottom input fields in step 3 and 4 just show how easy it is to add validation.

Note the text in red in the form

  • step: defines that this div should considered a step in the wizard
  • link: this class defines that the select is a link to a new page (in this case it can branch off to two places)
  • step3 (#1): the value step3 is a "link" to the step with id="step3", this defines that the wizard should show that step
  • step3 (#2): this is the id of the step which (#1) points to
  • the hidden input: it has a link class and therefore acts as a link
  • the last marked input: it has the classes required and email, which is used by the validate plugin to define that it should validate to an email.
						
             <form id="theForm" method="post" action="#">
               <div class="step">
                 <h1>step 1 - falls through to step 2 on next</h1>
                 <input type="text" value="" /><br />
                 <input type="text" value="" /><br />
                 <input type="text" value="" /><br />
               </div>
               <div class="step">
                 <h1>step 2 - branch step</h1>
                 <input type="text" value="" /><br />
                 <input type="text" value="" /><br />
                 <input type="text" value="" /><br />
                 <select class="link" >
                   <option value="" >Choose the step to go to...</option>
                   <option value="step3" >Go to Step3</option>
                   <option value="step4" >Go to Step4</option>
                 </select><br />
               </div>
               <div id="step3" class="step">
                 <h1>step 3 - submit step</h1>
                 <input type="text" value="" /><br />
                 <input type="text" value="" class="required"/><br />
                 <input type="hidden" class="link" value="submit_step" />
               </div>
               <div id="step4" class="step">
                 <h1>step 4</h1>
                 <input type="text" value="" /><br />
                 <input type="text" name="email" value="" class="required email" /><br />
               </div>
               <div id="step5" class="step">
                 <h1>step 5 - last step</h1>
                 <input type="text" value="" /><br />
                 <input type="text" value="" /><br />
               </div>
               <input type="reset" value="Reset" />
               <input type="submit" value="Submit" />
             </form>

Step 2:

add the following to the head part of your html.

						
            <script type="text/javascript" src="./jquery-1.3.2.js"></script>
            <script type="text/javascript" src="./jquery.history.js"></script>
            <script type="text/javascript" src="./jquery.form.js"></script>
            <script type="text/javascript" src="./jquery.validate.js"></script>
            <script type="text/javascript" src="./jquery.wizard-0.0.8.js"></script>
						
            <script type="text/javascript">
              $(function(){
                $("#theForm").formwizard({ 
                  //form wizard settings
                  historyEnabled : true, 
                  formPluginEnabled: true, 
                  validationEnabled : true},
                 {
                   //validation settings
                 },
                 {
                   // form plugin settings
                 }
                );
              });
            </script>

...and your DONE!

To add localized validation on the fields please review the documentation for the validation plugin! See link in the text above.

Latest Events

May 14. 2009

Version 0.9.1 released. Changes: callbacks afterNext and afterBack have been added to provide a means to do stuff after the next and back buttons have been clicked. Specify these in the settings for the wizard plugin

April 8. 2009

First version (0.9.0) of the form wizard plugin is out!

Wizard Demo

First step - Common starting point






 Step 2 - Finland

-

- -


Step 3 - Finland


 Step 2 - Sweden

-

- -


Last step - Common confirmation

Note that I have only tested the page layout in firefox3 so the css might be a bit off in IE. Sorry about this if that is the case.