Step Forms

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>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of step form
                    $('.js-step-form').each(function () {
                      var stepForm = new HSStepForm($(this)).init();
                    });
                  });
                </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, according to the rules of the jquery.validation plugin 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.required

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