Step Form

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 Front to enable it.

<script src="../../assets/vendor/hs-step-form/dist/hs-step-form.min.js"></script>
Copy

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

Basic example

  • 1
    General info
  • 2
    Billing address
  • 3
    Payment
  • 4
    Confirmation
Select One content goes here 
<!-- Step Form -->
<form class="js-step-form"
      data-hs-step-form-options='{
        "progressSelector": "#basicStepFormProgress",
        "stepsSelector": "#basicStepFormContent"
      }'>
  <!-- Step -->
  <ul id="basicStepFormProgress" class="js-step-progress step step-md step-inline">
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">1</span>
        <div class="step-content">
          <span class="step-inline-title">General info</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">2</span>
        <div class="step-content">
          <span class="step-inline-title">Billing address</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">3</span>
        <div class="step-content">
          <span class="step-inline-title">Payment</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">4</span>
        <div class="step-content">
          <span class="step-inline-title">Confirmation</span>
        </div>
      </div>
    </li>
  </ul>
  <!-- End Step -->

  <!-- Content Step Form -->
  <div id="basicStepFormContent" class="border rounded p-4">
    <div id="basicSelectStepOne" 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-hs-step-form-next-options='{
                  "targetSelector": "#basicSelectStepTwo"
                }'>Next</button>
      </div>
    </div>

    <div id="basicSelectStepTwo" 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-hs-step-form-prev-options='{
             "targetSelector": "#basicSelectStepOne"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#basicSelectStepThree"
                }'>Next</button>
      </div>
    </div>

    <div id="basicSelectStepThree" 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-hs-step-form-prev-options='{
             "targetSelector": "#basicSelectStepTwo"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#basicSelectStepFour"
                }'>Next</button>
      </div>
    </div>

    <div id="basicSelectStepFour" style="display: none;">
      Select Four 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-hs-step-form-prev-options='{
             "targetSelector": "#basicSelectStepThree"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
      </div>
    </div>
  </div>
  <!-- End Content Step Form -->
</form>
<!-- End Step Form -->
Copy

Vertical steps

  • 1

    General info

  • 2

    Billing address

  • 3

    Payment

  • 4

    Confirmation

Select One content goes here 
<!-- Step Form -->
<form class="js-step-form"
      data-hs-step-form-options='{
        "progressSelector": "#verticalStepFormProgress",
        "stepsSelector": "#verticalStepFormContent"
      }'>
  <div class="row">
    <div class="col-lg-4">
      <!-- Step -->
      <ul id="verticalStepFormProgress" class="js-step-progress step">
        <li class="step-item">
          <div class="step-content-wrapper align-items-center">
            <span class="step-icon step-icon-soft-primary">1</span>
            <div class="step-content">
              <h4 class="mb-0">General info</h4>
            </div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-content-wrapper align-items-center">
            <span class="step-icon step-icon-soft-primary">2</span>
            <div class="step-content">
              <h4 class="mb-0">Billing address</h4>
            </div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-content-wrapper align-items-center">
            <span class="step-icon step-icon-soft-primary">3</span>
            <div class="step-content">
              <h4 class="mb-0">Payment</h4>
            </div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-content-wrapper align-items-center">
            <span class="step-icon step-icon-soft-primary">4</span>
            <div class="step-content">
              <h4 class="mb-0">Confirmation</h4>
            </div>
          </div>
        </li>
      </ul>
      <!-- End Step -->
    </div>

    <div class="col-lg-8">
      <!-- Content Step Form -->
      <div id="verticalStepFormContent" class="h-100 border rounded p-4">
        <div id="verticalSelectStepOne" 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-hs-step-form-next-options='{
                      "targetSelector": "#verticalSelectStepTwo"
                    }'>Next</button>
          </div>
        </div>

        <div id="verticalSelectStepTwo" 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-hs-step-form-prev-options='{
                 "targetSelector": "#verticalSelectStepOne"
               }'>Back</a>
            <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                    data-hs-step-form-next-options='{
                      "targetSelector": "#verticalSelectStepThree"
                    }'>Next</button>
          </div>
        </div>

        <div id="verticalSelectStepThree" 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-hs-step-form-prev-options='{
                 "targetSelector": "#verticalSelectStepTwo"
               }'>Back</a>
            <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                    data-hs-step-form-next-options='{
                      "targetSelector": "#verticalSelectStepFour"
                    }'>Next</button>
          </div>
        </div>

        <div id="verticalSelectStepFour" style="display: none;">
          Select Four 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-hs-step-form-prev-options='{
                 "targetSelector": "#verticalSelectStepThree"
               }'>Back</a>
            <button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
          </div>
        </div>
      </div>
      <!-- End Content Step Form -->
    </div>
  </div>
</form>
<!-- End Step Form -->
Copy

Basic form example

  • 1
    Account
  • 2
    Profile
  • 3
    Address
  • 4
    Confirmation 
<!-- Step Form -->
<form class="js-step-form"
      data-hs-step-form-options='{
        "progressSelector": "#basicFormStepFormProgress",
        "stepsSelector": "#basicFormStepFormContent"
      }'>
  <!-- Step -->
  <ul id="basicFormStepFormProgress" class="js-step-progress step step-md step-inline mb-5">
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">1</span>
        <div class="step-content">
          <span class="step-inline-title">Account</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">2</span>
        <div class="step-content">
          <span class="step-inline-title">Profile</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">3</span>
        <div class="step-content">
          <span class="step-inline-title">Address</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">4</span>
        <div class="step-content">
          <span class="step-inline-title">Confirmation</span>
        </div>
      </div>
    </li>
  </ul>
  <!-- End Step -->

  <!-- Content Step Form -->
  <div id="basicFormStepFormContent" class="border rounded p-4">
    <div id="basicFormSelectStepOne" class="active">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormUsername">Username</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormUsername" id="basicFormUsername" placeholder="Username" aria-label="Username">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormPassword">Password</label>
        <div class="input-group input-group-sm">
          <input type="password" class="form-control" name="basicFormPassword" id="basicFormPassword" placeholder="Password" aria-label="Password">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormConfirmPassword">Confirm Password</label>
        <div class="input-group input-group-sm">
          <input type="password" class="form-control" name="basicFormConfirmPassword" id="basicFormConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1"
                data-hs-step-form-next-options='{
                  "targetSelector": "#basicFormSelectStepTwo"
                }'>Next</button>
      </div>
    </div>

    <div id="basicFormSelectStepTwo" style="display: none;">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormFirstName">First name</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormFirstName" id="basicFormFirstName" placeholder="First name" aria-label="First name">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormLastName">Last name</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormLastName" id="basicFormLastName" placeholder="Last name" aria-label="Last name">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormEmail">Email</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormEmail" id="basicFormEmail" placeholder="Email" aria-label="Email">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#basicFormSelectStepOne"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#basicFormSelectStepThree"
                }'>Next</button>
      </div>
    </div>

    <div id="basicFormSelectStepThree" style="display: none;">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormAddress1">Address 1</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormAddress1" id="basicFormAddress1" placeholder="Address" aria-label="Address">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="basicFormAddress2">Address 2 <small class="text-body">(optional)</small></label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="basicFormAddress2" id="basicFormAddress2" placeholder="Address" aria-label="Address">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#basicFormSelectStepTwo"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#basicFormSelectStepFour"
                }'>Next</button>
      </div>
    </div>

    <div id="basicFormSelectStepFour" style="display: none;">
      You have successfully completed the form!

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#basicFormSelectStepThree"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
      </div>
    </div>
  </div>
  <!-- End Content Step Form -->
</form>
<!-- End Step Form -->
Copy

Validation form

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

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

<script src="../../assets/js/hs.validation.js"></script>
Copy

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
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>
Copy

Wrap the step form with .js-validate class and data-hs-step-form-options='{ "isValidate": true }'.

  • 1
    Account
  • 2
    Profile
  • 3
    Address
  • 4
    Confirmation 
<!-- Step Form -->
<form class="js-step-form js-validate"
      data-hs-step-form-options='{
        "progressSelector": "#advancedFormStepFormProgress",
        "stepsSelector": "#advancedFormStepFormContent",
        "isValidate": true
      }'>
  <!-- Step -->
  <ul id="advancedFormStepFormProgress" class="js-step-progress step step-md step-inline mb-5">
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">1</span>
        <div class="step-content">
          <span class="step-inline-title">Account</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">2</span>
        <div class="step-content">
          <span class="step-inline-title">Profile</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">3</span>
        <div class="step-content">
          <span class="step-inline-title">Address</span>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">4</span>
        <div class="step-content">
          <span class="step-inline-title">Confirmation</span>
        </div>
      </div>
    </li>
  </ul>
  <!-- End Step -->

  <!-- Content Step Form -->
  <div id="advancedFormStepFormContent" class="border rounded p-4">
    <div id="advancedFormSelectStepOne" class="active">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormUsername">Username</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="advancedFormUsername" id="advancedFormUsername" placeholder="Username" aria-label="Username" required data-msg="Please enter a username address.">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormPassword">Password</label>
        <div class="input-group input-group-sm">
          <input type="password" class="form-control" name="advancedFormPassword" id="advancedFormPassword" placeholder="Password" aria-label="Password" required data-msg="Your password is invalid. Please try again.">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormConfirmPassword">Confirm Password</label>
        <div class="input-group input-group-sm">
          <input type="password" class="form-control" name="advancedFormConfirmPassword" id="advancedFormConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" required data-msg="Password does not match the confirm password.">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1"
                data-hs-step-form-next-options='{
                  "targetSelector": "#advancedFormSelectStepTwo"
                }'>Next</button>
      </div>
    </div>

    <div id="advancedFormSelectStepTwo" style="display: none;">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormFirstName">First name</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="advancedFormFirstName" id="advancedFormFirstName" placeholder="First name" aria-label="First name" required data-msg="Please enter a first name.">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormLastName">Last name</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="advancedFormLastName" id="advancedFormLastName" placeholder="Last name" aria-label="Last name" required data-msg="Please enter a last name.">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormEmail">Email</label>
        <div class="input-group input-group-sm">
          <input type="email" class="form-control" name="advancedFormEmail" id="advancedFormEmail" placeholder="Email" aria-label="Email" required data-msg="Please enter an email address.">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#advancedFormSelectStepOne"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#advancedFormSelectStepThree"
                }'>Next</button>
      </div>
    </div>

    <div id="advancedFormSelectStepThree" style="display: none;">
      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormAddress1">Address 1</label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="advancedFormAddress1" id="advancedFormAddress1" placeholder="Address" aria-label="Address" required data-msg="Please enter a valid address.">
        </div>
      </div>
      <!-- End Input Group -->

      <!-- Input Group -->
      <div class="mb-4">
        <label class="input-label" for="advancedFormAddress2">Address 2 <small class="text-body">(optional)</small></label>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="advancedFormAddress2" id="advancedFormAddress2" placeholder="Address" aria-label="Address">
        </div>
      </div>
      <!-- End Input Group -->

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#advancedFormSelectStepTwo"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover"
                data-hs-step-form-next-options='{
                  "targetSelector": "#advancedFormSelectStepFour"
                }'>Next</button>
      </div>
    </div>

    <div id="advancedFormSelectStepFour" style="display: none;">
      You have successfully completed the form!

      <div class="d-flex justify-content-end">
        <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
           data-hs-step-form-prev-options='{
             "targetSelector": "#advancedFormSelectStepThree"
           }'>Back</a>
        <button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
      </div>
    </div>
  </div>
  <!-- End Content Step Form -->
</form>
<!-- End Step Form -->
Copy

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of step form
    $('.js-step-form').each(function () {
      var stepForm = new HSStepForm($(this)).init();
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-step-form-options='{
   ...
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-step-form-options='{}'.

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

 Class to be given to the validated progress element 'checked'