This month's report will be prepared.
TodayAn email will be sent to the customer.
TodayThe meeting will be held.
YesterdayConversation with users.
YesterdayPayment refund will be made to the customer.
20 min agoPayment form will be activated.
20 min agoSigned in with a different device.
YesterdayYour billing information is not active.
YesterdayYour subscription has expired.
TodayYour storage space is running low
TodayAn all-in-one wizard plugin that is extremely flexible, compact and feature-rich. Demo page.
To use the plugin, you need to add the following files.
<!-- Css -->
<link rel="stylesheet" href="libs/form-wizard/jquery.steps.css" type="text/css">
<!-- Javascript -->
<script src="libs/form-wizard/jquery.steps.min.js"></script>
Below is an example of a basic horizontal form wizard.
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
<div id="wizard-example">
<h3>Personal Information</h3>
<section class="card card-body border mb-0">
<h5>Personal Information</h5>
<p>Try the keyboard navigation by clicking arrow left or right!</p>
</section>
<h3>Billing Information</h3>
<section class="card card-body border mb-0">
<h5>Billing Information</h5>
<p>Wonderful transition effects.</p>
</section>
<h3>Payment Details</h3>
<section class="card card-body border mb-0">
<h5>Payment Details</h5>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
$('#wizard-example').steps({
headerTag: 'h3',
bodyTag: 'section',
autoFocus: true,
titleTemplate: '<span class="wizard-index">#index#</span> #title#'
});
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
<div id="wizard-example">
<h3>Personal Information</h3>
<section class="card card-body border mb-0">
<h5>Personal Information</h5>
<p>Try the keyboard navigation by clicking arrow left or right!</p>
<form id="form1">
<div class="mb-3 wd-xs-300">
<label>First name</label>
<input type="text" class="form-control" placeholder="First name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="mb-3 wd-xs-300">
<label>Last name</label>
<input type="text" class="form-control" name="lastname" placeholder="Enter lastname"
required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</form>
</section>
<h3>Billing Information</h3>
<section class="card card-body border mb-0">
<h5>Billing Information</h5>
<p>Wonderful transition effects.</p>
<form id="form2">
<div class="mb-3 wd-xs-300">
<label class="form-control-label">Email: <span class="tx-danger">*</span></label>
<input id="email" class="form-control" name="email" placeholder="Enter email address"
type="email" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</form>
</section>
<h3>Payment Details</h3>
<section class="card card-body border mb-0">
<h5>Payment Details</h5>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
$('#wizard-example').steps({
headerTag: 'h3',
bodyTag: 'section',
autoFocus: true,
titleTemplate: '<span class="wizard-index">#index#</span> #title#',
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex < newIndex) {
var form = document.getElementById('form1'),
form2 = document.getElementById('form2');
if (currentIndex === 0) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
} else {
return true;
}
} else if (currentIndex === 1) {
if (form2.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
form2.classList.add('was-validated');
} else {
return true;
}
} else {
return true;
}
} else {
return true;
}
}
});