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>
Basic example
<!-- Step Form -->
<form class="js-step-form"
data-hs-step-form-options='{
"progressSelector": "#basicStepFormProgress",
"stepsSelector": "#basicStepFormContent"
}'>
<!-- Step -->
<ul id="basicStepFormProgress" class="js-step-progress step step-md step-inline">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<span class="step-title">General info</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<span class="step-title">Billing address</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<span class="step-title">Payment</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<span class="step-title">Confirmation</span>
</div>
</div>
</li>
</ul>
<!-- End Step -->
<!-- Content Step Form -->
<div id="basicStepFormContent" class="border rounded p-4">
<div id="basicSelectStepOne" 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-hs-step-form-next-options='{
"targetSelector": "#basicSelectStepTwo"
}'>Next</button>
</div>
</div>
<div id="basicSelectStepTwo" 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-hs-step-form-prev-options='{
"targetSelector": "#basicSelectStepOne"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#basicSelectStepThree"
}'>Next</button>
</div>
</div>
<div id="basicSelectStepThree" 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-hs-step-form-prev-options='{
"targetSelector": "#basicSelectStepTwo"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#basicSelectStepFour"
}'>Next</button>
</div>
</div>
<div id="basicSelectStepFour" style="display: none;">
Select Four 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-hs-step-form-prev-options='{
"targetSelector": "#basicSelectStepThree"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
</div>
</div>
</div>
<!-- End Content Step Form -->
</form>
<!-- End Step Form -->
Vertical steps
<!-- Step Form -->
<form class="js-step-form"
data-hs-step-form-options='{
"progressSelector": "#verticalStepFormProgress",
"stepsSelector": "#verticalStepFormContent"
}'>
<div class="row">
<div class="col-lg-4">
<!-- Step -->
<ul id="verticalStepFormProgress" class="js-step-progress step">
<li class="step-item">
<div class="step-content-wrapper align-items-center">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="mb-0">General info</h4>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper align-items-center">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="mb-0">Billing address</h4>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper align-items-center">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="mb-0">Payment</h4>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper align-items-center">
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<h4 class="mb-0">Confirmation</h4>
</div>
</div>
</li>
</ul>
<!-- End Step -->
</div>
<div class="col-lg-8">
<!-- Content Step Form -->
<div id="verticalStepFormContent" class="h-100 border rounded p-4">
<div id="verticalSelectStepOne" 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-hs-step-form-next-options='{
"targetSelector": "#verticalSelectStepTwo"
}'>Next</button>
</div>
</div>
<div id="verticalSelectStepTwo" 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-hs-step-form-prev-options='{
"targetSelector": "#verticalSelectStepOne"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#verticalSelectStepThree"
}'>Next</button>
</div>
</div>
<div id="verticalSelectStepThree" 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-hs-step-form-prev-options='{
"targetSelector": "#verticalSelectStepTwo"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#verticalSelectStepFour"
}'>Next</button>
</div>
</div>
<div id="verticalSelectStepFour" style="display: none;">
Select Four 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-hs-step-form-prev-options='{
"targetSelector": "#verticalSelectStepThree"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
</div>
</div>
</div>
<!-- End Content Step Form -->
</div>
</div>
</form>
<!-- End Step Form -->
Basic form example
<!-- Step Form -->
<form class="js-step-form"
data-hs-step-form-options='{
"progressSelector": "#basicFormStepFormProgress",
"stepsSelector": "#basicFormStepFormContent"
}'>
<!-- Step -->
<ul id="basicFormStepFormProgress" class="js-step-progress step step-md step-inline mb-5">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<span class="step-title">Account</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<span class="step-title">Profile</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<span class="step-title">Address</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<span class="step-title">Confirmation</span>
</div>
</div>
</li>
</ul>
<!-- End Step -->
<!-- Content Step Form -->
<div id="basicFormStepFormContent" class="border rounded p-4">
<div id="basicFormSelectStepOne" class="active">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormUsername">Username</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormUsername" id="basicFormUsername" placeholder="Username" aria-label="Username">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormPassword">Password</label>
<div class="input-group input-group-sm">
<input type="password" class="form-control" name="basicFormPassword" id="basicFormPassword" placeholder="Password" aria-label="Password">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormConfirmPassword">Confirm Password</label>
<div class="input-group input-group-sm">
<input type="password" class="form-control" name="basicFormConfirmPassword" id="basicFormConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1"
data-hs-step-form-next-options='{
"targetSelector": "#basicFormSelectStepTwo"
}'>Next</button>
</div>
</div>
<div id="basicFormSelectStepTwo" style="display: none;">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormFirstName">First name</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormFirstName" id="basicFormFirstName" placeholder="First name" aria-label="First name">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormLastName">Last name</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormLastName" id="basicFormLastName" placeholder="Last name" aria-label="Last name">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormEmail">Email</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormEmail" id="basicFormEmail" placeholder="Email" aria-label="Email">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#basicFormSelectStepOne"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#basicFormSelectStepThree"
}'>Next</button>
</div>
</div>
<div id="basicFormSelectStepThree" style="display: none;">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormAddress1">Address 1</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormAddress1" id="basicFormAddress1" placeholder="Address" aria-label="Address">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="basicFormAddress2">Address 2 <small class="text-body">(optional)</small></label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="basicFormAddress2" id="basicFormAddress2" placeholder="Address" aria-label="Address">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#basicFormSelectStepTwo"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#basicFormSelectStepFour"
}'>Next</button>
</div>
</div>
<div id="basicFormSelectStepFour" style="display: none;">
You have successfully completed the form!
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#basicFormSelectStepThree"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
</div>
</div>
</div>
<!-- End Content Step Form -->
</form>
<!-- End Step Form -->
Validation form
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="./node_modules/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>
Wrap the step form with .js-validate class and data-hs-step-form-options='{
"isValidate": true
}'.
<!-- Step Form -->
<form class="js-step-form js-validate"
data-hs-step-form-options='{
"progressSelector": "#advancedFormStepFormProgress",
"stepsSelector": "#advancedFormStepFormContent",
"isValidate": true
}'>
<!-- Step -->
<ul id="advancedFormStepFormProgress" class="js-step-progress step step-md step-inline mb-5">
<li class="step-item">
<div class="step-content-wrapper"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepOne"
}'>
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<span class="step-title">Account</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepTwo"
}'>
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<span class="step-title">Profile</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepThree"
}'>
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<span class="step-title">Address</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepFour"
}'>
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<span class="step-title">Confirmation</span>
</div>
</div>
</li>
</ul>
<!-- End Step -->
<!-- Content Step Form -->
<div id="advancedFormStepFormContent" class="border rounded p-4">
<div id="advancedFormSelectStepOne" class="active">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormUsername">Username</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="advancedFormUsername" id="advancedFormUsername" placeholder="Username" aria-label="Username" required data-msg="Please enter a username address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormPassword">Password</label>
<div class="input-group input-group-sm">
<input type="password" class="form-control" name="advancedFormPassword" id="advancedFormPassword" placeholder="Password" aria-label="Password" required data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormConfirmPassword">Confirm Password</label>
<div class="input-group input-group-sm">
<input type="password" class="form-control" name="advancedFormConfirmPassword" id="advancedFormConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" required data-msg="Password does not match the confirm password.">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepTwo"
}'>Next</button>
</div>
</div>
<div id="advancedFormSelectStepTwo" style="display: none;">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormFirstName">First name</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="advancedFormFirstName" id="advancedFormFirstName" placeholder="First name" aria-label="First name" required data-msg="Please enter a first name.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormLastName">Last name</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="advancedFormLastName" id="advancedFormLastName" placeholder="Last name" aria-label="Last name" required data-msg="Please enter a last name.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormEmail">Email</label>
<div class="input-group input-group-sm">
<input type="email" class="form-control" name="advancedFormEmail" id="advancedFormEmail" placeholder="Email" aria-label="Email" required data-msg="Please enter an email address.">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#advancedFormSelectStepOne"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepThree"
}'>Next</button>
</div>
</div>
<div id="advancedFormSelectStepThree" style="display: none;">
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormAddress1">Address 1</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="advancedFormAddress1" id="advancedFormAddress1" placeholder="Address" aria-label="Address" required data-msg="Please enter a valid address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="mb-4">
<label class="input-label" for="advancedFormAddress2">Address 2 <small class="text-body">(optional)</small></label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="advancedFormAddress2" id="advancedFormAddress2" placeholder="Address" aria-label="Address">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#advancedFormSelectStepTwo"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover"
data-hs-step-form-next-options='{
"targetSelector": "#advancedFormSelectStepFour"
}'>Next</button>
</div>
</div>
<div id="advancedFormSelectStepFour" style="display: none;">
You have successfully completed the form!
<div class="d-flex justify-content-end">
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;"
data-hs-step-form-prev-options='{
"targetSelector": "#advancedFormSelectStepThree"
}'>Back</a>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Done</button>
</div>
</div>
</div>
<!-- End Content Step Form -->
</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' |
|
|
Class to be given to the focused progress element | 'focus' |
|
|
Сalled after the last step | () => {} |
|
|
Сalled after going to the next step | () => {} |
|
|
Сalled after going to the previous step | () => {} |