This time I will share jQuery Plugin and tutorial about Easy Sequential Step Wizard With Data Validation – jQuery Stepform, hope it will help you in programming stack.
Just another jQuery form wizard plugin which displays grouped form fields in a multi-step wizard interface with data validation integrated. Great for signup forms, survey forms and more. Keyboard interaction is supported as well.
How to use it:
1. Load the following JavaScript files into the document and the Stepform plugin is ready for use.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jq.stepform.js"></script> |
2. Create your own form steps grouped by the fieldset elements with the CSS class of ‘sf-step’ as this:
01 |
<form class="stepform" action="" method="post"> |
02 |
<fieldset class="sf-step"> |
03 |
<legend>1. Basic Details</legend> |
05 |
<label class="control-label" for="firstname">First Name</label> |
09 |
<label class="control-label" for="lastname">Last Name</label> |
10 |
<input class="form-control" id="lastname" name="lastname" data-validate="1"/> |
13 |
<fieldset class="sf-step"> |
14 |
<legend>2. Contact Details</legend> |
16 |
<label class="control-label" for="email">Email Address</label> |
17 |
<input class="form-control" id="email" name="email" data-validate="email"/> |
20 |
<label class="control-label" for="mobile">Mobile Number</label> |
21 |
<input class="form-control" id="mobile" name="mobile" data-validate="10"/> |
25 |
<fieldset class="sf-step"> |
26 |
<legend>3. Payment</legend> |
27 |
<strong>Payment Mode</strong> |
29 |
<label><input name="nameradio1" type="radio" value="online" />Online </label> |
30 |
<label><input name="nameradio1" type="radio" value="offline"/>Offline </label> |
31 |
<label><input name="nameradio1" type="radio" value="later" />Later </label> |
34 |
<label class="control-label" for="namecard">Name on Card</label> |
35 |
<input class="form-control" id="namecard" name="namecard" type="text" /> |
38 |
<label><input name="nameradio2" type="radio"/>Option 1 </label> |
39 |
<label><input name="nameradio2" type="radio"/>Option 2 </label> |
40 |
<label><input name="nameradio2" type="radio"/>Option 3 </label> |
41 |
<label><input name="nameradio2" type="radio"/>Option 4 </label> |
44 |
<fieldset class="sf-step"> |
45 |
<legend>4. Newsletter</legend> |
47 |
<label><input name="subscribeto" type="checkbox"/>News</label> |
48 |
<label><input name="subscribeto" type="checkbox"/>Events</label> |
49 |
<label><input name="subscribeto" type="checkbox"/>Jobs</label> |
54 |
<label class="control-label" for="newsletter">Newsletter</label> |
55 |
<select id="newsletter" name="newsletter" class="form-control"> |
56 |
<option value="Daily" selected>Daily</option> |
57 |
<option value="Weekly">Weekly</option> |
