Form wizard with icon tabs
Add .wizard class to form tag to apply wizard steps. To add icons to step instead of number use .step-icon class along with icon.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.steps.min.js"></script>
2. HTML Markup:
<form action="#" class="icons-tab-steps wizard">
<h6><i class="step-icon ft-home"></i> Step 1</h6>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control" id="fullName" >
</div>
</fieldset>
<h6><i class="step-icon ft-message-circle"></i>Step 2</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control" id="emailAddress" >
</div>
</fieldset>
<h6><i class="step-icon ft-airplay"></i>Step 3</h6>
<fieldset>
<div class="form-group">
<label for="eventName">Event Name :</label>
<input type="text" class="form-control" id="eventName" >
</div>
</fieldset>
<h6><i class="step-icon ft-layout"></i>Step 4</h6>
<fieldset>
<div class="form-group">
<label for="meetingName">Name of Meeting :</label>
<input type="text" class="form-control" id="meetingName" >
</div>
</fieldset>
</form>
3. Javascript.
// Wizard tabs with icons setup
$(".icons-tab-steps").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
Validation Example
Add .wizard class to form tag to apply style wizard steps. Add class .required to form fields order to validate form wizard steps.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.steps.min.js"></script>
2. HTML Markup:
<form action="#" class="steps-validation wizard">
<h6><i class="step-icon ft-home"></i> Step 1</h6>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control required" id="fullName" >
</div>
</fieldset>
<h6><i class="step-icon ft-message-circle"></i>Step 2</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control required" id="emailAddress" >
</div>
</fieldset>
<h6><i class="step-icon ft-airplay"></i>Step 3</h6>
<fieldset>
<div class="form-group">
<label for="age">Age :</label>
<input type="text" class="form-control required" id="age" >
</div>
</fieldset>
<h6><i class="step-icon ft-layout"></i>Step 4</h6>
<fieldset>
<div class="form-group">
<label for="meetingName">Name of Meeting :</label>
<input type="text" class="form-control required" id="meetingName" >
</div>
</fieldset>
</form>
3. Javascript.
// Validate steps wizard
// Show form
var form = $(".steps-validation").show();
$(".steps-validation").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow previous action even if the current form is not valid!
if (currentIndex > newIndex)
{
return true;
}
// Forbid next action on "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age-2").val()) < 18)
{
return false;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex)
{
// To remove error styles
form.find(".body:eq(" + newIndex + ") label.error").remove();
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
}
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
alert("Submitted!");
}
});
// Initialize validation
$(".steps-validation").validate({
ignore: 'input[type=hidden]', // ignore hidden fields
errorClass: 'danger',
successClass: 'success',
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules: {
email: {
email: true
}
}
});
Form wizard with vertical tabs
Add .wizard class to form tag to apply style wizard steps. Set "stepsOrientation" option to "vertical" in order to have vertical style form wizard steps.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.steps.min.js"></script>
2. HTML Markup:
<form action="#" class="vertical-tab-steps wizard">
<h6>Step 1</h6>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control" id="fullName" >
</div>
</fieldset>
<h6>Step 2</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control" id="emailAddress" >
</div>
</fieldset>
<h6>Step 3</h6>
<fieldset>
<div class="form-group">
<label for="eventName">Event Name :</label>
<input type="text" class="form-control" id="eventName" >
</div>
</fieldset>
<h6>Step 4</h6>
<fieldset>
<div class="form-group">
<label for="meetingName">Name of Meeting :</label>
<input type="text" class="form-control" id="meetingName" >
</div>
</fieldset>
</form>
3. Javascript.
// Vertical tabs form wizard setup
$(".vertical-tab-steps").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
stepsOrientation: "vertical",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://www.jquery-steps.com/ |
| Template Page | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-wizard.html |