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>

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 -->

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="".