jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view.
1. Initialize the plugin by referencing the necessary files
// vendor js
<script src="jquery.steps.min.js"></script>
// template css
<link rel="stylesheet" type="text/css" href="wizard.css">
Note!
If you want to add extra components, then you have to add
js/css files accordingly.
Find Form Wizard style options below
| Wizard style options | Class | Description |
|---|---|---|
| Wizard with Icon | .step-icon |
Use this class for circle style wizard steps with icons. |
| Wizard with Icon on Top | .fonticon-wrap |
Use this class for get Icon on top of the step icon. |
| Wizard with Validation | .required |
Use this class for validating wizard steps. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://www.jquery-steps.com/Examples |
| Template Page | https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-wizard.html |
To add icons to step instead of number use
.step-icon class and also use
.fonticon-wrap class for icon on top of the
step icon.
1. HTML Markup
<form action="#" class="wizard-horizontal">
<h6>
<i class="step-icon"></i>
<span class="fonticon-wrap">
<i class="livicon-evo" data-options="name:morph-doc.svg; size: 50px; style:lines; strokeColor:#adb5bd;"></i>
<span>
</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"></i>
<span class="fonticon-wrap">
<i class="livicon-evo" data-options="name:truck.svg; size: 50px; style:lines; strokeColor:#adb5bd;"></i>
<span>
</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control" id="emailAddress" >
</div>
</fieldset>
</form>
2. Javascript-Initialize Jquery Steps
// Wizard tabs with icons setup
$(".wizard-horizontal").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#,
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
3. Javascript-Initialize Step Icon
// Initialize step icon
$(".current").find(".step-icon").addClass("bx bx-time-five");
// Step icon change on different step
$(".actions [href='#next']").click(function () {
$(".done").find(".step-icon").removeClass("bx bx-time-five").addClass("bx bx-check-circle");
$(".current").find(".step-icon").removeClass("bx bx-check-circle").addClass("bx bx-time-five");
});
We are using jquery Validation in wizard.
1. Initialize the plugin by referencing the necessary files
// vendor js
<script src="jquery.steps.min.js"></script>
<script src="jquery.validate.min.js"></script>
//template css
<link rel="stylesheet" type="text/css" href="wizard.css">
2. HTML Markup
<form action="#" class="wizard-validation">
<h6>
<i class="step-icon"></i>
<span>Baisc Information</span>
</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"></i>
<span>Job Details</span>
</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control required" id="emailAddress" >
</div>
</fieldset>
</form>
3. Javascript-Initialize Jquery Steps and Validation
// Validate steps wizard
// Show form
var form = $(".wizard-validation").show();
$(".steps-validation").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#',
labels: {
finish: 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
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
$(".wizard-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
}
}
});
To get Vertical Form wizard reference the following html markup.
2. HTML Markup
<form action="#" class="wizard-vertical">
<h3>
<span class="fonticon-wrap mr-1">
<i class="livicon-evo" data-options="name:gear.svg; size: 50px; style:lines; strokeColor:#adb5bd;"></i>
</span>
<span class="icon-title">
<span class="d-block">Users Details</span>
<small class="text-muted">Setup your account details here.</small>
</span>
</h3>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control required" id="fullName" >
</div>
</fieldset>
<h3>
<span class="fonticon-wrap mr-1">
<i class="livicon-evo" data-options="name:location.svg; size: 50px; style:lines; strokeColor:#adb5bd;"></i>
</span>
<span class="icon-title">
<span class="d-block">setup location</span>
<small class="text-muted">Choose your location here.</small>
</span>
</h3>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control required" id="emailAddress" >
</div>
</fieldset>
</form>
3. Javascript-Initialize Vertical Jquery Steps
// Wizard vertical setup
$(".wizard-vertical").steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "fade",
enableAllSteps: true,
stepsOrientation: "vertical",
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});