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: Enter the following code in the ‘TextArea’ that appears.
| Code Block |
|---|
let cssId = 'myCss';
const head = document.getElementsByTagName('head')[0];
if (!document.getElementById(cssId))
{
const link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://timisenco2015.github.io/formulator.github.com/css/chefsCustomCss.css';
link.media = 'all';
head.appendChild(link);
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.form.io/formiojs/formio.full.min.js';
head.appendChild(script);
} |
Step 7: Click on ‘Save Logic’ and then ‘Save’ the component.
Step 8: Next, add a ‘Tabs’ component from the ‘Advanced Fields’ and edit the tabs based on your requirements.
Step 9: Under the Tab settings, enter progressStepper in the ‘Custom CSS Class’
Step 10: Under the ‘Logic’ tab, click on the ‘Add Logic’ button and add any ‘Logic Name’
Step 11: In the ‘Trigger’ section, select the ‘Event’ type from the dropdown
Step 12: Enter change as the ‘Event Name’