Step Form

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

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.validation.js plugin.

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

            
              <script src="../../assets/js/components/hs.step-form.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
                  $.HSCore.components.HSStepForm.init('.js-step-form');
                });
              </script>

Validation

To validate the the plugin, we use jQuery Validation.

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

            
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

            
              <script src="../../assets/js/components/hs.validation.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 form validation
                  $.HSCore.components.HSValidation.init('.js-validate');
                });
              </script>

Basic example

Select One content goes here 
                  
                    <!-- Step Form -->
                    <form class="js-validate js-step-form"
                          data-progress-id="#progressStepForm"
                          data-steps-id="#contentStepForm"
                          novalidate="novalidate">
                      <div class="card">
                        <div class="card-header p-5">
                          <nav id="progressStepForm" class="js-step-progress nav nav-icon nav-justified text-center">
                            <a href="javascript:;" class="nav-item">
                              <span class="nav-icon-action">
                                <span class="fas fa-user-circle nav-icon-action-inner"></span>
                              </span>
                              Select One
                            </a>
                            <a href="javascript:;" class="nav-item">
                              <span class="nav-icon-action">
                                <span class="fas fa-file-invoice-dollar nav-icon-action-inner"></span>
                              </span>
                              Select Two
                            </a>
                            <a href="javascript:;" class="nav-item">
                              <span class="nav-icon-action">
                                <span class="fas fa-paperclip nav-icon-action-inner"></span>
                              </span>
                              Select Three
                            </a>
                          </nav>
                        </div>

                        <!-- Content Step Form -->
                        <div id="contentStepForm" class="card-body p-5">
                          <div id="selectStepOne" class="active">
                            Select One content goes here

                            <div class="d-flex justify-content-end">
                              <button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1" data-next-step="#selectStepTwo">Next</button>
                            </div>
                          </div>

                          <div id="selectStepTwo" style="display: none;">
                            Select Two content goes here

                            <div class="d-flex justify-content-end">
                              <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#selectStepOne">Back</a>
                              <button type="button" class="btn btn-sm btn-primary transition-3d-hover" data-next-step="#selectStepThree">Next</button>
                            </div>
                          </div>

                          <div id="selectStepThree" style="display: none;">
                            Select Three content goes here

                            <div class="d-flex justify-content-end">
                              <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#selectStepTwo">Back</a>
                              <button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
                            </div>
                          </div>
                        </div>
                        <!-- End Content Step Form -->
                      </div>
                    </form>
                    <!-- End Step Form -->

JavaScript behavior

Config 

            
              activeClass: 'active' - string
              validate: function(){} - callback function

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-progress-id="".

Attribute Description

data-progress-id

 ID of the block that contains the block with progress in the form of numbered or text identifiers of a specific form.

data-steps-id

 The ID of the block that contains the blocks with separate forms.

data-next-selector

 ID of the element that goes to the next step.

data-previous-step

 ID of the element that goes to the previous step.