An all-in-one wizard plugin that is extremely flexible, compact and feature-rich. Demo page.

<!-- Css --><link rel="stylesheet" href="vendors/form-wizard/jquery.steps.css" type="text/css"><!-- Javascript --><script src="vendors/form-wizard/jquery.steps.min.js"></script>
Basic Content Wizard

Below is an example of a basic horizontal form wizard.

十一选五彩票计划软件免费

Personal Information

Try the keyboard navigation by clicking arrow left or right!

三分快三计划阳光彩票官网

Billing Information

Wonderful transition effects.

幸运飞艇两码一期计划

Payment Details

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#'});
Basic Form Wizard with Validation

中金彩票软件计划手机版下载

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Looks good!
Looks good!

吉林快3一定牛形态走势

Billing Information

Wonderful transition effects.

Looks good!

万彩吧彩票开奖高手计划

Payment Details

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="form-group 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="form-group 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="form-group 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; } }});