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)
<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: