Wizard Form

Multi-step form template.

Dependencies

• Password Visibility Control
• Password Strength Indicator
• File Upload
• Choice Images
• Choice Buttons
• Steps v2
• Form Validator

How to

The Wizard Form is a template that walks the user through multiple steps before submitting the form.

Use the WizardForm object to initialize your form:

var wizardForm = document.getElementsByClassName('js-wiz-form')[0];
var wizardFormObj = new WizardForm(wizardForm);

⚠️ Note: in the wizard-form.js, we do not initialize the WizardForm object. You would need to initialize it (as shown in the above code snippet) for it to work properly.

The content of each step is completely customizable:

<!-- step 1 -->
<fieldset class="wiz-form__step js-wiz-form__step">
  <!-- your content -->
</fieldset>

<!-- step 2 -->
<fieldset class="wiz-form__step wiz-form__step--next js-wiz-form__step">
  <!-- your content -->
</fieldset>

<!-- step 3 -->
<fieldset class="wiz-form__step wiz-form__step--next js-wiz-form__step">
  <!-- your content -->
</fieldset>

Because all the steps are in position absolute, it's important to set a height for the .wiz-form element. In the first demo, the height is equal to 100vh (viewport height). In the second demo, it's equal to a fixed value set in CSS.

You can listen to the submit event to detect when the Wizard Form has been submitted:

// initialize the Wizard form
var wizardForm = document.getElementsByClassName('js-wiz-form')[0];
var wizardFormObj = new WizardForm(wizardForm);

// detect when form is submitted
wizardForm.addEventListener('submit', function(event) {
  // form has been submitted
});

If you need to move to a specific step (e.g., after the form submission, you want to redirect the user to the first step to show an error message), use the showStep method:

var wizardForm = document.getElementsByClassName('js-wiz-form')[0];
var wizardFormObj = new WizardForm(wizardForm);
// show step one
wizardFormObj.showStep(1);

Validate Form #

If you want to validate your form fields before moving from one step to another, you can use the Form Validator plugin.

When initializing the WizardForm object, pass, as second argument, the options the Form Validator plugin should use. For example:

var wizardForm = document.getElementsByClassName('js-wiz-form');
new WizardForm(wizardForm[0], {
  inputErrorClass: 'form-control--error',
  customValidate: {
    // custom validation functions
  }
});

For addition details about those options, check the Form Validator plugin info page.

Categories

• Forms > Templates

Bug report & feedback

Component Github page ↗