Form wizard with number tabs
Add .wizard-circle class to form tag to apply circle style wizard steps. This is the default style with circle wizard steps.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.steps.min.js"></script>
<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.
2. HTML Markup:
<form action="#" class="number-tab-steps wizard-circle">
<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.
$(".number-tab-steps").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
Form wizard with icon tabs
Add .wizard-circle class to form tag to apply circle style 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>
<link rel="stylesheet" type="text/css" href="wizard.css">
2. HTML Markup:
<form action="#" class="icons-tab-steps wizard-circle">
<h6><i class="step-icon feather icon-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 feather icon-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 feather icon-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 feather icon-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.");
}
});
Form wizard Validation
Add .wizard-circle class to form tag to apply circle 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>
<link rel="stylesheet" type="text/css" href="wizard.css">
2. HTML Markup:
<form action="#" class="steps-validation wizard-circle">
<h6><i class="step-icon feather icon-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 feather icon-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 feather icon-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 feather icon-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-circle class to form tag to apply circle 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>
<link rel="stylesheet" type="text/css" href="wizard.css">
2. HTML Markup:
<form action="#" class="vertical-tab-steps wizard-circle">
<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/ |
| Circle Style Wizard | https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/form-wizard.html |
| Notification Style Wizard | https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/form-wizard-notification-style.html |