Step Form
Create a multi-step form to get more leads and increase engagement.
How to use?
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/vendor/hs-step-form/dist/hs-step-form.min.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
$('.js-step-form').each(function () {
var stepForm = new HSStepForm($(this)).init();
});
});
</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/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
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>
Basic example
<!-- Step Form -->
<form class="js-step-form"
data-hs-step-form-options='{
"progressSelector": "#progressStepForm",
"stepsSelector": "#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">
<i class="fas fa-user-circle"></i>
</span>
Select One
</a>
<a href="javascript:;" class="nav-item">
<span class="nav-icon-action">
<i class="fas fa-file-invoice-dollar"></i>
</span>
Select Two
</a>
<a href="javascript:;" class="nav-item">
<span class="nav-icon-action">
<i class="fas fa-paperclip"></i>
</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 -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of step form
$('.js-step-form').each(function () {
var stepForm = new HSStepForm($(this)).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-step-form-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-step-form-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
A selector that contains a block with progress in the form of numbered or text identifiers of a specific form | null |
|
|
ID of the block that contains the blocks with steps | null |
|
|
Selector, when clicked, the transition to the next step will be carried out | '[data-hs-step-form-next-options]' |
|
|
Selector, when clicked, the transition to the previous step will be carried out | '[data-hs-step-form-prev-options]' |
|
|
If true, then includes field validation at each step, according to the rules of the jquery.validation plugin |
false |
|
|
Class that will be given to the element of progress with an active step | 'active' |
|
|
Class to be given to the validated progress element | 'checked' |