Powerful jQuery Form Wizard Plugin - formwizard

Powerful jQuery Form Wizard Plugin - formwizard
File Size: 185 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

formwizard is a powerful and useful jQuery plugin that turns the standard html form into wizard like step-by-step page flows without having to reload the page in between wizard steps.

Features:

Basic Usage:

1. Markup Html Structure

<form id="demoForm" method="post" action="json.html" class="bbq">
<div id="fieldWrapper">
<div class="step" id="first"> <span class="font_normal_07em_black">First step - Name</span><br />
<label for="firstname">First name</label>
<br />
<input class="input_field_12em" name="firstname" id="firstname" />
<br />
<label for="surname">Surname</label>
<br />
<input class="input_field_12em" name="surname" id="surname" />
<br />
</div>
<div id="finland" class="step"> <span class="font_normal_07em_black">Step 2 - Personal information</span><br />
<label for="day_fi">Social Security Number</label>
<br />
<input class="input_field_25em" name="day" id="day_fi" value="DD" />
<input class="input_field_25em" name="month" id="month_fi" value="MM" />
<input class="input_field_3em" name="year" id="year_fi" value="YYYY" />
-
<input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" />
<br />
<label for="countryPrefix_fi">Phone number</label>
<br />
<input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" />
-
<input class="input_field_3em" name="areaCode" id="areaCode_fi" />
-
<input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" />
<br />
<label for="email">*Email</label>
<br />
<input class="input_field_12em email required" name="myemail" id="myemail" />
<br />
</div>
<div id="confirmation" class="step"> <span class="font_normal_07em_black">Last step - Username</span><br />
<label for="username">User name</label>
<br />
<input class="input_field_12em" name="username" id="username" />
<br />
<label for="password">Password</label>
<br />
<input class="input_field_12em" name="password" id="password" type="password" />
<br />
<label for="retypePassword">Retype password</label>
<br />
<input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" />
<br />
</div>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>

2. Include necessary javascript files on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../js/jquery.form.js"></script> 
<script type="text/javascript" src="../js/jquery.validate.js"></script> 
<script type="text/javascript" src="../js/bbq.js"></script> 
<script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script> 
<script type="text/javascript" src="../js/jquery.form.wizard.js"></script> 

3. The javascript

<scripttype="text/javascript">
$(function(){
$("#demoForm").formwizard({
formPluginEnabled:true,
validationEnabled:true,
focusFirstInput:true,
formOptions:{
success:function(data){$("#status").fadeTo(500,1,function(){$(this).html("Youarenowregistered!").fadeTo(5000,0);})},
beforeSubmit:function(data){$("#data").html("datasenttotheserver:"+$.param(data));},
dataType:'json',
resetForm:true
}
}
);
});
</script>

More examples:


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