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/query-validation/dist/jquery.validate.min.js"></script>

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

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.

Create

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.

Back to Consult

Release

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.

Back to Create 
              
                <!-- 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 -->

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.