Multi-step jQuery form wizard plugin – jquery.steps

A nice way to implement forms in web application: multi-step jQuery form wizard plugin.

A powerful jQuery form wizard plugin with HTML5 support

This solution is a powerful jQuery wizard plugin, that supports accessibility and HTML5. Turn multiple forms into a step-by-step form wizard with nice effects.

Multi-step jQuery form wizard plugin - an example
Multi-step jQuery form wizard plugin – an example

How to use

Just include jQuery and jquery.steps in HTML document. Then select an element represents the wizard and call the steps method.


<script src="jquery.js"></script>
<script src="jquery.steps.js"></script>
<link href="jquery.steps.css" rel="stylesheet">

<div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>

    <h1>Second Step</h1>
    <div>Second Content</div>



Or use the API to add steps dynamically:

// Initialize wizard
var wizard = $("#wizard").steps();

// Add step
wizard.steps("add", {
    title: "HTML code", 
    content: "<strong>HTML code</strong>"

License: MIT



See also:

Smart Wizard – a jQuery form wizard plugin

Ideal Forms 3: build and validate responsive HTML5 forms!

Progression.js – jQuery form progress indicator

Fancy sliding form jQuery