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.
Contact Us