A custom progress bar can be added to the form to enhance the user experience and indicate the remaining steps within the form.
Step 1: Start by dragging an ‘HTML Component’ into the form builder.
Step 2: Click on the Settings (gear) icon and edit the ‘HTML tag’ field from p to div in the ‘Display’ tag
Step 3: Copy the following code into the ‘Content’ section (creates 4 tabs)
| Code Block |
|---|
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a class="persistant-disabled" href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2">
<div class="round-tab"><span>1</span></div>
</a>
</li>
<li role="presentation" class="disabled">
<a class="persistant-disabled" href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2">
<div class="round-tab"><span>2</span></div>
</a>
</li>
<li role="presentation" class="disabled">
<a class="persistant-disabled" href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Step 3">
<div class="round-tab"><span>3</span></div>
</a>
</li>
<li role="presentation" class="disabled">
<a class="persistant-disabled" href="#stepper-step-4" data-toggle="tab" aria-controls="stepper-step-4" role="tab" title="Complete">
<div class="round-tab"><span>4</span></div>
</a>
</li>
</ul> |
Step 4: Navigate to the ‘Logic’ tab and click on the ‘Add Logic’ button
Step 5: Enter any ‘Logic Name’ and select the ‘Javascript’ type from the ‘Trigger’ dropdown
Step 6: