Form Wizard
Form Wizard generate step navigation for your purpose. You can use it for registration, settings, introduction or presentation of your projects.
Usage is very simple. Only thing you need is html structure of some form with fieldsets and call on this form this plugin.
For more information about options, visit plugin documentation.
5 styles to fit your needs
Form Wizard comes with 5 styles. It's very easy to change style, you just have to change data-style attribute on your form.
Here is a list of each style and how to apply them:
<!-- SEA STYLE -->
<form role="form" class="wizard" data-style="sea">
...
</form>
<!-- SKY STYLE -->
<form role="form" class="wizard" data-style="sky">
...
</form>
<!-- ARROW STYLE -->
<form role="form" class="wizard" data-style="arrow">
...
</form>
<!-- SIMPLE STYLE -->
<form role="form" class="wizard" data-style="simple">
...
</form>
<!-- CIRCLE STYLE -->
<form role="form" class="wizard" data-style="circle">
...
</form>
4 navigation positions
By default, form wizard navigation is on top. Here you can create creative form wizard with left, right or bottom navigation too.
Idem as style, you just have to add data-nav to your form if you want to change it, that's it!
<!-- LEFT NAVIGATION -->
<form role="form" class="wizard" data-nav="left">
...
</form>
<!-- RIGHT NAVIGATION -->
<form role="form" class="wizard" data-nav="right">
...
</form>
<!-- BOTTOM NAVIGATION -->
<form role="form" class="wizard" data-nav="bottom">
...
</form>
How to use Form Validation?
1. Add specific javascript and css
Add in your head page:
<link href="assets/plugins/step-form-wizard/css/step-form-wizard.css" rel="stylesheet">
Add inside body at the end of your page, before main template scripts:
<!-- OPTIONAL, IF YOU NEED VALIDATION --> <script src="assets/plugins/step-form-wizard/plugins/parsley/parsley.min.js"></script> <!-- Step Form Validation --> <script src="assets/plugins/step-form-wizard/js/step-form-wizard.js"></script>
2. Create your form with Tabs
Add html markup for your form with wizard class for your form. Each part inside fieldset willbe a step. Here is a simple example:
<form role="form" class="wizard" data-style="sea">
<!-- FIRST STEP-->
<fieldset>
<legend>Basic information</legend>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password again</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
</fieldset>
<!-- SECOND STEP-->
<fieldset>
<legend>Condition</legend>
In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate
the graphic elements of a document or visual presentation, such as web pages, typography,
and graphical layout. It is a form of "greeking".
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option1" checked data-radio="iradio_square-blue">
Yes, it is totaly right.
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option2" data-radio="iradio_square-blue">
No, I check it twice and it is not right.
</label>
</div>
</fieldset>
<!-- THIRD STEP-->
<fieldset>
<legend>Final step</legend>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="sr-only" for="exampleInputName1">Your name</label>
<input type="text" class="form-control" placeholder="Your name">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="sr-only" for="exampleInputCat1">Name of your cat</label>
<input type="text" class="form-control" placeholder="Name of your cat">
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Form Wizard Validation
You can validate each step, to be sure user have complete all necessary datas. Here we use Parsley Validation plugin.
Parsley Validation Documentation
In order to validate each step, you have add wizard-validation class to your class and to tell which input is in which step.
For example, input 1, 2 and 3 are in step 1. So we have to validate them together.For each "group" of input, you have to add data-parsley-group attribute.
Here is an example:
<form class="wizard wizard-validation" data-style="sea" role="form">
<fieldset>
<legend>Basic information</legend>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required data-parsley-group="block0">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required data-parsley-group="block0" data-parsley-equalto="#password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password again</label>
<input type="password" class="form-control" id="password-repeat" name="password-repeat" placeholder="Password" required data-parsley-group="block0" data-parsley-equalto="#password">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Condition</legend>
In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as web pages, typography, and graphical layout. It is a form of "greeking".
Even though using "lorem ipsum" often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation. "Lorem ipsum" also approximates a typical distribution of letters in English.
<div class="radio">
<label>
<input type="radio" value="option1" name="condition" data-parsley-group="block1" data-radio="iradio_square-blue" data-parsley-errors-container='div[id="condition-error"]' required>
Yes, it is totaly right.
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="option2" name="condition" data-parsley-group="block1" data-radio="iradio_square-blue" data-parsley-errors-container='div[id="condition-error"]' required>
No, I check it twice and it is not right.
</label>
</div>
<div id="condition-error"></div>
</fieldset>
<fieldset>
<legend>Final step</legend>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="sr-only" for="exampleInputName1">Your name</label>
<input type="text" class="form-control" id="exampleInputName1" placeholder="Your name" name="your_name" data-parsley-group="block2" required="">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputCat1">Name of your cat</label>
<input type="text" class="form-control" id="exampleInputCat1" name="exampleInputCat1" placeholder="Name of your cat">
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>