Form Wizards
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.

HTML Code

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

Javascript Code

$('#wizard1').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '#index# #title#'
});
Basic Form Wizard with Validation

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

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.

Additional Option Code

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 Wizard

A basic content wizard with vertical orientation.

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.

Additional Option Code

stepsOrientation: 1
Step Indicator Auto Equal Width

A basic wizard that adds a custom style to make the step indicator equal width.

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.

Additional Option Code

cssClass: 'wizard step-equal-width'