Step Forms (Wizard)

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

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>:

    
      <script>
        (function() {
          // INITIALIZATION OF STEP FORM
          // =======================================================
          new NueStepForm('.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

ParametersDescriptionDefault value

progressSelector

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

stepsSelector

ID of the block that contains the blocks with stepsnull

nextSelector

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

prevSelector

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

isValidate

If true, then includes field validation at each step, according to the rules of the jquery.validation pluginfalse

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() }) }