jQuery Multi-Step Form Wizard Plugin

A tiny jQuery plugin that converts multiple forms into a step-by-step form wizard with amazing easing effect. Also comes with a progress bar at the bottom of the wizard to indicate the current step.

Basic Usage:

1. Include the required jQuery library and jQuery easing plugin on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

2. Include the jQuery Multi Step Form plugin after jQuery library.

<script src="jquery-multi-step-form.js" type="text/javascript"></script>
<link href="jquery-multi-step-form.css" media="screen" rel="stylesheet" type="text/css"/>

3. Create several forms for the form wizard.

<div id="form">
<ul id="multistepform-progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<div class="form">
<form action="">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email">
<input type="password" name="pass" placeholder="Password">
<input type="password" name="cpass" placeholder="Confirm Password">
<input type="button" name="next" class="next button" value="Next">
</form>
</div>
<div class="form">
<form action="">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter">
<input type="text" name="facebook" placeholder="Facebook">
<input type="text" name="gplus" placeholder="Google Plus">
<input type="button" name="previous" class="previous button" value="Previous">
<input type="button" name="next" class="next button" value="Next">
</form>
</div>
<div class="form">
<form action="">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<input type="text" name="phone" placeholder="Phone">
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous button" value="Previous">
<input type="button" name="submit" class="next button" value="Finish">
</form>
</div>
</div>

4. Call the plugin on the parent element.

<script>
$(document).ready(function(){
$.multistepform({
container:'demo', // the jQuery selector for the form wizard
duration: 1000,
form_url: '', // On submit, send the form data to a URL
form_method: 'POST', // POST or GET
onClose:function(){},
})
});
</script>

---

This awesome jQuery plugin is developed by creotiv. For more Advanced Usages, please check the demo page or visit the official website.