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.

e家彩票计划官方

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!

准确率高幸运飞艇计划群

Billing Information

Wonderful transition effects.

Looks good!

vr彩票计划

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; } }});