logo
Form Wizard

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

Usage

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>

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="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;
        }
    }
});
On this page