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.

HTML:

<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>
</div>
...

JS:

$("#wizard").steps();

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

Demo:

http://www.jquery-steps.com/Examples

GitHub:

https://github.com/rstaib/jquery-steps

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

Enjoy!

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