Skip to main content

Wizard

A series of html elements into sequential steps.

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

<script src="../../assets/js/components/hs.wizard.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 wizard
    $.HSCore.components.HSWizard.init('.js-wizard');
  });
</script>
Copy

Basic example

1
Meet our agent
2
Discuss with the owner
3
Make a deal
Image Description

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!

Get Started Next Step 
<!-- Wizard -->
<div class="js-wizard wizard"
     data-wizard-steps="#wizardSteps"
     data-wizard-content="#wizardContent">
  <!-- Wizard Steps -->
  <div id="wizardSteps" class="wizard-steps w-lg-80 mx-auto mb-9">
    <div class="wizard-steps-item text-muted cursor-pointer"
         data-next-step="#selectStepOne">
      <div class="wizard-steps-num-wrapper">
        <div class="wizard-steps-num shadow">
          <div class="wizard-steps-num-inner">1</div>
        </div>
      </div>
      <h5 class="wizard-steps-title d-none d-sm-block">Meet our agent</h5>
    </div>

    <div class="wizard-steps-item text-muted cursor-pointer"
         data-next-step="#selectStepTwo">
      <div class="wizard-steps-num-wrapper">
        <div class="wizard-steps-num shadow">
          <div class="wizard-steps-num-inner">2</div>
        </div>
      </div>
      <h5 class="wizard-steps-title d-none d-sm-block">Discuss with the owner</h5>
    </div>

    <div class="wizard-steps-item text-muted cursor-pointer"
         data-next-step="#selectStepThree">
      <div class="wizard-steps-num-wrapper">
        <div class="wizard-steps-num shadow">
          <div class="wizard-steps-num-inner">3</div>
        </div>
      </div>
      <h5 class="wizard-steps-title d-none d-sm-block">Make a deal</h5>
    </div>
  </div>
  <!-- End Wizard Steps -->

  <!-- Wizard Content -->
  <div id="wizardContent">
    <div id="selectStepOne" class="row align-items-lg-center active">
      <div class="col-md-6 mb-4 mb-md-0">
        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
      </div>

      <div class="col-md-6 pl-lg-4">
        <h2 class="text-lh-xs mb-4">Title</h2>
        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
        <a class="btn btn-sm btn-outline-primary border-1" href="javascript:;"
            data-next-step="#selectStepTwo">
          Next Step
        </a>
      </div>
    </div>

    <div id="selectStepTwo" class="row align-items-center" style="display: none;">
      <div class="col-md-6 mb-4 mb-md-0">
        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
      </div>

      <div class="col-md-6 pl-lg-9">
        <h2 class="text-lh-xs mb-4">Title</h2>
        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
        <a class="btn btn-sm btn-outline-primary border-1" href="javascript:;"
            data-next-step="#selectStepThree">
          Next Step
        </a>
      </div>
    </div>

    <div id="selectStepThree" class="row align-items-center" style="display: none;">
      <div class="col-md-6 mb-4 mb-md-0">
        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
      </div>

      <div class="col-md-6 pl-lg-9">
        <h2 class="text-lh-xs mb-4">Title</h2>
        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
      </div>
    </div>
  </div>
  <!-- End Wizard Content -->
</div>
<!-- End Wizard -->
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-wizard-content="".

Attribute Description

data-wizard-steps

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

data-wizard-content

 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.