Steps Form

Questions or comments?

Purpose

This component provides the ability to break a form into steps.

Use when

Working example

Evaluation and report

How to implement

  1. Create a <div> element with class wb-steps (you can also add class wb-frmvld for validation). 
    <div class="wb-frmvld wb-steps"></div>
  2. Within previous the <div> element add a <form> element. 
    <form action="#" method="get" id="steps-example"></form>
  3. Within previous the <form> element add your <fieldset> element which will need an <legend> and <div>. These will become your steps 
    <fieldset>
    <legend>Client Information</legend>
    <div>(Any content in the div will be hidden.)</div>
    </fieldset>
  4. (Optional) Add the class quiz to the div with the class wb-steps to convert into a steps quiz format. 
    <div class="wb-frmvld wb-steps quiz"></div>

Configuration options

There are no configuration options.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-steps Triggered manually (e.g., $( ".wb-steps" ).trigger( "wb-init.wb-steps" );). Used to manually initialize the steps form. Note: You'll need to initialize Form validation before initializing wb-steps (you can add the wb-frmvld to the a <div> then trigger that div).
wb-ready.wb-steps (v4.0.24+) Triggered automatically after steps form initializes. Used to identify the element where steps form has initialized (target of the event) 
$( document ).on( "wb-ready.wb-steps", ".wb-steps", function( event ) {});
$( ".wb-steps" ).on( "wb-ready.wb-steps", function( event ) {});
wb-ready.wb (v4.0.24+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {});

Source code

Steps form source code on GitHub

Date modified: