Step Form
Creates a multi step form to get more leads and increase engagement.
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.validation.js plugin.
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.step-form.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 step form
$.HSCore.components.HSStepForm.init('.js-step-form');
});
</script>
Validation
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-paste the following <script> near the end of your pages under JS Front to enable it.
<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');
});
</script>
Basic example
<!-- Step Form -->
<form class="js-validate js-step-form"
data-progress-id="#progressStepForm"
data-steps-id="#contentStepForm"
novalidate="novalidate">
<div class="card">
<div class="card-header p-5">
<nav id="progressStepForm" class="js-step-progress nav nav-icon nav-justified text-center">
<a href="javascript:;" class="nav-item">
<span class="nav-icon-action">
<span class="fas fa-user-circle nav-icon-action-inner"></span>
</span>
Select One
</a>
<a href="javascript:;" class="nav-item">
<span class="nav-icon-action">
<span class="fas fa-file-invoice-dollar nav-icon-action-inner"></span>
</span>
Select Two
</a>
<a href="javascript:;" class="nav-item">
<span class="nav-icon-action">
<span class="fas fa-paperclip nav-icon-action-inner"></span>
</span>
Select Three
</a>
</nav>
</div>
<!-- Content Step Form -->
<div id="contentStepForm" class="card-body p-5">
<div id="selectStepOne" 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-next-step="#selectStepTwo">Next</button>
</div>
</div>
<div id="selectStepTwo" 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-previous-step="#selectStepOne">Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover" data-next-step="#selectStepThree">Next</button>
</div>
</div>
<div id="selectStepThree" 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-previous-step="#selectStepTwo">Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
</div>
</div>
</div>
<!-- End Content Step Form -->
</div>
</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 |
|---|---|
|
|
ID of the block that contains the block with progress in the form of numbered or text identifiers of a specific form. |
|
|
The ID of the block that contains the blocks with separate forms. |
|
|
ID of the element that goes to the next step. |
|
|
ID of the element that goes to the previous step. |