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

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Billing Information

Wonderful transition effects.

Payment Details

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

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Looks good!
Looks good!

Billing Information

Billing Information

Wonderful transition effects.

Looks good!

Payment Details

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