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 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() {

– prepare HTML structure, e.g. like below

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


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


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

– enjoy jQuery form wizard plugin.

License: Creative Commons Attribution-ShareAlike 3.0 Unported License.


Source and documentation for jQuery form wizard plugin @ GitHub:

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!