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

Projects

Progress value is 30%

Wizard Form

Multi-step form template.

Copy: 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. All variations share the same SCSS/JS code. They only differ in their HTML.

How to

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

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 use the WizardForm object to initialize your form:

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

Note that in the wizard-form.js, we do not initialize the WizardForm object.

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

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

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[0]);
// show step one
wizardFormObj.showStep(1);

Categories

✅ Project duplicated

✅ Project created

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