🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Wizard Form

Multi-step form template.

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us