All Collections
Examples & Tutorials
How to add a progress bar to your form
How to add a progress bar to your form

Let's explore how you can use custom html and JavaScript to display a progress bar within a form.

Updated over a week ago

It can be useful to display a progress bar within your form to indicate to the responder how much they have completed. In this tutorial we will demonstrate a basic example of how to display a progress bar based on some basic logic:

  1. All questions will contribute to the percentage completion.

  2. All questions will contribute equally to the final percentage.

Since all organisations and forms may apply different rules for what should contribute to the final percentage (e.g. only mandatory questions contribute to the percentage complete or some questions bare more weight than other) you may need to adapt the calculation shown here to match your specific scenario.

Step 1 - Adding a progress field

The first step to displaying the progress bar is to first create a field that will calculate the percentage completion. For this we will add a number field call Progress to our form (don't worry we can set this to hidden later). In the data tab add the following JavaScript to the calculated value property:

// The progress calculation and submit button
// Should not count towards the percentage complete

const currentQuestion = instance.component.key
const ignoreQuestions = [currentQuestion,'submit']

const questions = _(data).omit(ignoreQuestions)
const totalQuestions = questions.size()

value = questions.reduce((percentage, response) => {
percentage += (1/totalQuestions) * 100
return percentage
}, 0)

Step 2 - Add the progress bar

To add the progress bar, we will use the HTML component and add the html below to the content property. In addition we will enable "Refresh on change".

<progress id="file" value={{data.progress}} max="100" style="width:100%"> </progress>

Notice how we set the value property dynamically using the handlebars syntax

{{ data.progress }} to access the calculated field we setup in Step 1

Did this answer your question?