Smart Wizard – a jQuery form wizard plugin

Smart Wizard is a jQuery form wizard plugin, which implements wizard-like interface with steps to pass.

Useful jQuery form wizard plugin

A flexible jQuery plug-in, that gives wizard like interface, easy to use in web projects. The plugin comes with various styles. It can be horizontal, vertical and AJAX-ed!

Key features:

– Ajax contents loading option

– Cool animation effects on step navigation

– Easy to implement, Minimal HTML required

– Keyboard navigation option

– Horizontal and vertical style step anchors

– Easy step input validation option

– Option to highlight error steps

– Ability to have multiple wizards on same page

jQuery form wizard plugin - Smart Wizard
jQuery form wizard plugin – Smart Wizard

Basic usage

$('#wizard').smartWizard(/* parameters */);

Refer to the documentation to see all possible options (there is a lot).

So:

– so include the files

<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<link href="smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.smartWizard.js"></script>

– add JS init code

$(document).ready(function() {
  $('#wizard').smartWizard();
}); 

– prepare HTML structure, e.g. like below

<div id="wizard" class="swMain">
  <ul>
    <li><a href="#step-1">
          <label class="stepNumber">1</label>
          <span class="stepDesc">
             Step 1<br />
             <small>Step 1 description</small>
          </span>
      </a></li>

...

    <li><a href="#step-4">
          <label class="stepNumber">4</label>
          <span class="stepDesc">
             Step 4<br />
             <small>Step 4 description</small>
          </span>                   
      </a></li>
  </ul>
  <div id="step-1">   
      <h2 class="StepTitle">Step 1 Content</h2>
       <!-- step content -->
  </div>

...

  <div id="step-4">
      <h2 class="StepTitle">Step 4 Title</h2>   
       <!-- step content -->                         
  </div>
</div>

– enjoy jQuery form wizard plugin.

License: Creative Commons Attribution-ShareAlike 3.0 Unported License.

Demo:

http://mstratman.github.io/jQuery-Smart-Wizard/index.htm

Source and documentation for jQuery form wizard plugin @ GitHub:

https://github.com/mstratman/jQuery-Smart-Wizard

You may also like:

Fancy sliding form jQuery

Progression.js – jQuery form progress indicator

Ideal Forms 3: build and validate responsive HTML5 forms!

Happy coding & designing!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1