jQuery plugin to create wizard in no time


There is already some jQuery plugins to make wizards, but none to fit my needs and/or with a slide effect.
So I decide to build my own and share it.
easyWizard is pretty lightweight (5kb uncompressed), have some usefull options and is compatible with Chrome Chrome, Firefox Firefox, Opera Opera and Safari Safari.
I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.

Getting Started

Download the code here (github repo)
Then, include jQuery and the jquery.easyWizard.js code you just download into your page like this :

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.easyWizard.js"></script>


This is a little exemple, you can make a wizard with far less elements but I need them to keep is nice with twitter bootstrap.
The minimum is a main container and some sub container to separate each steps, yeah that's all.

<form id="myWizard" type="get" action="" class="form-horizontal">
	<section class="step" data-step-title="The first">
		<div class="control-group">
			<label class="control-label" for="inputEmail">Email</label>
			<div class="controls">
				<input type="text" id="inputEmail" placeholder="Email" class="input-xlarge" title="Email is required !" required >
		<div class="control-group">
			<label class="control-label" for="inputPassword">Password</label>
			<div class="controls">
				<input type="password" id="inputPassword" placeholder="Password" class="input-xlarge">
	<section class="step" data-step-title="The second">
		<div class="control-group">
			<label class="control-label" for="inputUsername">Username</label>
				<div class="controls">
				<input type="text" id="inputUsername" placeholder="Username" class="input-xlarge">
	<section class="step" data-step-title="The third">
		<div class="control-group">
			<label class="control-label" for="inputFirstname">Firstname</label>
				<div class="controls">
				<input type="text" id="inputFirstname" placeholder="Firstname" class="input-xlarge">
		<div class="control-group">
			<label class="control-label" for="inputCity">City</label>
				<div class="controls">
				<input type="text" id="inputCity" placeholder="City" class="input-xlarge">


You only need css to personnalize the buttons and the "Navigation Bar" on top (if you enable those, offcourse). Anyway, here is a small exemple :

.easyWizardSteps {list-style:none;width:100%;overflow:hidden;margin:0;padding:0;border-bottom:1px solid #ccc;margin-bottom:20px}
.easyWizardSteps li {font-size:18px;display:inline-block;padding:10px;color:#B0B1B3;margin-right:20px;}
.easyWizardSteps li span {font-size:24px}
.easyWizardSteps li.current {color:#000}

.easyWizardButtons {overflow:hidden;padding:10px;}
.easyWizardButtons button, .easyWizardButtons .submit {cursor:pointer}
.easyWizardButtons .prev {float:left}
.easyWizardButtons .next, .easyWizardButtons .submit {float:right}




Basic exemple

Using the same code above
We just add some class to the buttons to make them nicer (thanks Twitter bootstrap)

Using callbacks

	buttonsClass: 'btn',
	submitButtonClass: 'btn btn-info',
	before: function(wizardObj, currentStepObj, nextStepObj) {
		alert('Hello, I\'am the before callback');
	after: function(wizardObj, prevStepObj, currentStepObj) {
		alert('Hello, I\'am the after callback');
	beforeSubmit: function(wizardObj) {
		alert('Hello, I\'am the beforeSubmit callback');

Using own buttons

	showSteps: false,
	showButtons: false,
	submitButton: false
$('#myWizard3Pager .previous a').bind('click', function(e) {
$('#myWizard3Pager .page a').bind('click', function(e) {
	$('#myWizard3').easyWizard('goToStep', $(this).attr('rel'));
$('#myWizard3Pager .next a').bind('click', function(e) {

Hey !

Discover my awesome product

Read more

Here it is

Soon this product for you (and only you)

Awesome !

This product is now ready to use

Get it !


Yeah cause it's easy, but there is some options to make it your own

Option Type Description
stepClassName string class of the element to separate each step (default : 'step')
showSteps boolean display the steps top nav or not (default : true)
stepsText string Usefull to overide the step nav
{n} will be replaced by the step's number
{t} will be replaced by the step's title defined by the "data-step-title" attribute of the element
(default : '{n}. {t}')
showButtons boolean display the nav buttons or not (default : true)
buttonsClass string class of the buttons (default : '')
prevButton string text for the "previous" button (default : '< Back')
nextButton string text for the "next" button (default : 'Next >')
submitButton boolean add a submit button in the last step or not (default : true)
submitButtonText string text for the "submit" button (default : 'Submit')
submitButtonClass string class of the "submit" button (default : '')
debug boolean activate debug in console or not (default : false)
before function before callback
called just before the slide effect
params : (in right order)
    wizardObj : object of the wizard
    currentStepObj : object of the current step
    nextStepObj : object of the next step
after function after callback
called just after the slide effect
params : (in right order)
    wizardObj : object of the wizard
    prevStepObj : object of the previous step
    currentStepObj : object of the current step
beforeSubmit function beforeSubmit callback
called just before the form submit (if there is a form)
params :
    wizardObj : object of the wizard
default : (check for HTML5 form validation error, and slide to the error if found)
function(wizardObj) {
	wizardObj.find('input, textarea').each(function() {
		if(!this.checkValidity()) {
			step = $(this).parents('.'+thisSettings.stepClassName).attr('data-step');
			easyWizardMethods.goToStep.call(wizardObj, step);

			return false;


Cool, there is a little extra !
You can call the plugin directly to make your own controls (and buttons).

// Slide to a step
$('#myWizard').easyWizard('goToStep', 2);

// Slide to the previous step

// Slide to the next step
Fork me on GitHub