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
<!-- 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 -->
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 |
---|---|
|
The content container attribute which will be used to wrap all step headers. |
|
The content container attribute which will be used to wrap all step contents. |
|
Label for the next button. |
|
Label for the previous button. |