1. Components
2. Forms
3. Form Wizard

Form Wizard

jQuery Steps, an all-in-one wizard plugin that is extremely flexible, compact and feature-rich. Read the Official jQuery Steps Documentation for a full list of instructions and other options.

---

Basic Wizard

Below is an example of a basic horizontal form wizard.

<div id="wizard1">
  <h3>Personal Information</h3>
  <section>
    <p class="mg-b-20">Try the keyboard navigation by clicking arrow left or right!</p>
    ...
  </section>
  <h3>Billing Information</h3>
  <section>
    <p class="mg-b-20">Wonderful transition effects.</p>
    ...
  </section>
  <h3>Payment Details</h3>
  <section>
    <p class="mg-b-20">The next and previous buttons help you to navigate through your content.</p>
    ...
  </section>
</div>

$('#wizard1').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>'
});

---

With Validation

A basic form wizard with form validation using Parsley js form validation plugin.

$('#wizard2').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>',
  onStepChanging: function (event, currentIndex, newIndex) {
    if(currentIndex < newIndex) {
      // Step 1 form validation
      if(currentIndex === 0) {
        var fname = $('#firstname').parsley();
        var lname = $('#lastname').parsley();

        if(fname.isValid() && lname.isValid()) {
          return true;
        } else {
          fname.validate();
          lname.validate();
        }
      }

      // Step 2 form validation
      if(currentIndex === 1) {
        var email = $('#email').parsley();
        if(email.isValid()) {
          return true;
        } else { email.validate(); }
      }
    // Always allow step back to the previous step even if the current step is not valid.
    } else { return true; }
  }
});

---

Vertical Orientation

A basic content wizard with vertical orientation.

$('#wizard3').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>',
  stepsOrientation: 1
});

---

Tab Variation

A basic content wizard with custom style variation of the steps.

<div id="wizard4" class="wizard-tab">...</div>