Skip to main content

Step Form

Easily create wizard-like interfaces and group content into sections for a more structured and orderly page view.

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.step-form.js plugin.

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

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

    // initialization of step form
    $.HSCore.components.HSStepForm.init('.js-step-form');
  });
</script>
Copy

Basic example

Consult

This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.

<!-- Step Form -->
<form class="js-step-form"
      data-progress-id="#basicStepFormHeader"
      data-steps-id="#basicStepFormContent"
      novalidate="novalidate">
  <!-- Step Form Header -->
  <ul id="basicStepFormHeader" class="js-step-progress list-inline mb-5">
    <li class="list-inline-item">
      <span class="border rounded py-2 px-3">1. Consult</span>
    </li>
    <li class="list-inline-item">
      <span class="border rounded py-2 px-3">2. Create</span>
    </li>
    <li class="list-inline-item">
      <span class="border rounded py-2 px-3">3. Release</span>
    </li>
  </ul>
  <!-- End Step Form Header -->

  <!-- Step Form Content -->
  <div id="basicStepFormContent">
    <div id="consultStep" class="active">
      <h2 class="h5">Consult</h2>
      <p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>

      <div class="d-sm-flex justify-content-sm-end align-items-sm-center">
        <button type="button" class="btn btn-sm btn-primary" data-next-step="#createStep">Proceed to Create</button>
      </div>
    </div>

    <div id="createStep">
      <h2 class="h5">Create</h2>
      <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

      <div class="d-sm-flex justify-content-sm-between align-items-sm-center">
        <a class="d-block text-secondary mb-3 mb-sm-0" href="javascript:;" data-previous-step="#consultStep">
          <span class="fa fa-arrow-left mr-2"></span>
          Back to Consult
        </a>
        <button type="button" class="btn btn-sm btn-primary" data-next-step="#releaseStep">Proceed to Release</button>
      </div>
    </div>

    <div id="releaseStep">
      <h2 class="h5">Release</h2>
      <p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>

      <div class="d-sm-flex justify-content-sm-between align-items-sm-center">
        <a class="d-block text-secondary mb-3 mb-sm-0" href="javascript:;" data-previous-step="#createStep">
          <span class="fa fa-arrow-left mr-2"></span>
          Back to Create
        </a>
        <button type="submit" class="btn btn-sm btn-primary">Submit</button>
      </div>
    </div>
  </div>
  <!-- End Step Form Content -->
</form>
<!-- End Step Form -->
Copy

JavaScript behavior

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

 The content container attribute which will be used to wrap all step headers.

data-steps-id

 The content container attribute which will be used to wrap all step contents.

data-next-step

 Label for the next button.

data-previous-step

 Label for the previous button.