Create a form progress bar using Twitter Bootstrap
Complex web applications usually require a significant amount of data from their users, and forms are one of the primary tools that allow those applications to retrieve and handle data, whether for storage or using it to generate information.
It is an important matter to stimulate and facilitate users to provide this data. If the developers and designers do not do so, users are likely to run away from the forms and avoid using the applications.
There are many tools and techniques that help build easy to use and attractive forms to make sure users are not giving up filling them, such as gamification, splitting forms into smaller and self-contained parts and letting users feel a sense of progress. The latter is pretty significant and useful. If users see how much they advanced and how much is left for them to fill, they are more likely to continue filling the form (or saving current progress to continue later).
Since Bootstrap is a consolidated framework amongst the development community (as they say, “Bootstrap makes front-end web development faster and easier”), let’s see how to build a progress bar that auto increases/decreases as users fill or erase inputs.
The first step is to write the HTML code for the Bootstrap progress bar component:
<p><strong>Progress:</strong></p>
<div id="progress-inputs" class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">0% Complete</span>
</div>
</div>
The code above will produce a result like this:
Let’s also write the markup of a small form so we can test our future script:
<form id="input-progress" role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" id="age" name="age" class="form-control">
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" id="street" name="street" class="form-control">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" class="form-control">
</div>
<div class="form-group">
<label for="state">State</label>
<select id="state" name="state" class="form-control">
<option value="">- Select -</option>
<option value="ST1">First State</option>
<option value="ST2">Second State</option>
<option value="ST3">Third State</option>
</select>
</div>
<div class="form-group">
<button type="button" class="btn btn-success">SEND</button>
</div>
</form>
Our little form will look like this:
Now let’s do the fun part - write a small JavaScript code to make the progress bar react to the inputs filling and select choosing. We are going to update the progress bar when one of the following events occur:
- Any form element (inputs and select) are focused out. This is because we don’t want to recalculate the progress after each keypress. We just need to update the progress bar once the user finishes editing an element and navigates to another one.
- The SEND button is clicked. We want to recalculate the progress when this button is hit since we can do another action (like showing a feedback message, for example) in some cases. Example: showing a congratulations message if everything is filled.
To make the progress bar work, we just need the following piece of JavaScript code:
<script type="text/javascript">
$(document).ready(function() {
function updateInputProgress() {
var filledFields = 0;
$('#input-progress').find('input, select').each(function() {
if ($(this).val() != '') {
filledFields++;
}
});
var percent = Math.ceil(100 * filledFields / totalFields);
$('#progress-inputs .progress-bar')
.attr('aria-valuenow', percent)
.width(percent + '%')
.find('.sr-only').html(percent + '% Complete');
return percent;
}
// Input progress.
var totalFields = $('#input-progress').find('input, select').length;
$('#input-progress').find('input, select').blur(function() {
updateInputProgress();
});
$('#input-progress .btn-success').click(function() {
var percent = updateInputProgress();
if (percent == 100) {
alert('Finished inputs successfully!');
}
});
});
</script>
Note that the updateInputProgress() function is called when any input or select element is blurred and also when the button is clicked, like explained above. If your form has other elements (like text areas) we can just increase the list of elements that listen to the blur event, and also increase the list of elements used to calculate the progress on $('#input-progress').find('input, select').each(function() {.
The examples can be downloaded, or you can see them visualized. There are two examples: updating the progress bar for each input and updating the progress bar when an entire fieldset is filled.
