Step Forms (Wizard)

Create a multi-step form to get more leads and increase engagement.

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="./assets/vendor/hs-step-form/dist/hs-step-form.min.js"></script>
        
      
        
          <script>
            (function() {
              // INITIALIZATION OF STEP FORM
              // =======================================================
              new HSStepForm('.js-step-form', {
                finish ($el) {
                  const $successMessageTempalte = $el.querySelector('.js-success-message').cloneNode(true)

                  $successMessageTempalte.style.display = 'block'

                  $el.style.display = 'none'
                  $el.parentElement.appendChild($successMessageTempalte)
                }
              })
            })();
          </script>

Basic example

Vertical steps

Basic form example

Validation form

Methods

Parameters Description Default value

progressSelector

 A selector that contains a block with progress in the form of numbered or text identifiers of a specific form null

stepsSelector

 ID of the block that contains the blocks with steps null

nextSelector

 Selector, when clicked, the transition to the next step will be carried out '[data-hs-step-form-next-options]'

prevSelector

 Selector, when clicked, the transition to the previous step will be carried out '[data-hs-step-form-prev-options]'

isValidate

 If true, then includes field validation at each step false

classMap.active

 Class that will be given to the element of progress with an active step 'active'

classMap.error

 Will be add to step item if validation has errors 'is-invalid'

classMap.checked

 Class to be given to the validated progress element 'checked'

classMap.focus

 Class to be given to the focused progress element 'focus'

classMap.required

 Сlass that should be added to .step-item if the step container has a required field .js-step-required

finish

 Сalled after the last step () => {}

onNextStep

 Сalled after going to the next step () => {}

onPrevStep

 Сalled after going to the previous step () => {}

preventNextStep

 Сalled before going to the next step. Return promise is required () => { return new Promise((resolve, reject) => { resolve() }) }