Basic Content Wizard

Below is an example of a basic horizontal form wizard.

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.

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.

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.

Additional Option Code

cssClass: 'wizard step-equal-width'

Custom Style For Step Indicator

Below are a simple styles for step indicaator of a wizard

Additional Option Code

cssClass: 'wizard wizard-style-1'

Additional Option Code

cssClass: 'wizard wizard-style-2'

Additional Option Code

cssClass: 'wizard wizard-style-3'