Adding progress bars to your form

This article is a discussion of a sample form that you can view here. For longer forms with progress bars, you can find a custom sample form to help you save time here. This custom sample will automatically calculate percentage values and add HTML code for progress bars to your question text through spreadsheet formulas. Save copies to your Google Drive or download as Excel workbooks.

Depending on your form’s specifics, a progress bar can have positive effects in your completion rates. In fact, it’s common to see computer-assisted web interviewing (CAWI) platforms with progress bars by default as it is a helpful feature for web forms. It keeps respondents motivated and informed about how much longer it will take to reach the end, boosting completion rates. So, you may wonder, can I have a progress bar in my SurveyCTO forms? Yes, definitely! Progress bars can be added to web forms and forms running in SurveyCTO Collect on Android!

How to create a progress bar

In practice, a progress bar is nothing more than an HTML table with one row and two cells with contrasting colors filling up the background:

25%

To change the progress percentage, we simply keep changing the percentage of the cell filled with the darkest color so that it can guide us through the completion of our form.

As you may already know, SurveyCTO lets you change the format of a label using basic HTML tags. You don’t need to understand HTML to style your labels in SurveyCTO as the online form designer has an easy WYSIWYG label editor for styling labels, just like you would in Microsoft Word. 

However, with a bit of know-how you can go beyond the limits of the WYSIWYG label editor and write HTML code to add this great feature. Here’s the code for a 50% completion rate, formatted in HTML:

Text version of this code to copy is available below.

I’ll break up the code in pieces and explain all HTML tags and attributes used to create this ‘table’:

• <table width=“100%"> starts building one table with the <table> tag. Inside HTML tags, we can specify any attributes with related formatting (colors, width, alignment, etc.). We want to ensure that the progress bar has the same width as the form, so we include width=100%.
• <tbody></tbody> tags are used to indicate the body content of the table. Everything that we want to create inside the table must be enclosed by these tags.
• <tr></tr> tags define one row in our table. Following the same logic as above, everything we want to create inside our row must be enclosed by these tags.
• <td></td> tags define one cell. In our example, we are creating two cells in our table row:
• <td style="background-color: #047cc2” width=”x%”>&nbsp;</td> is the first cell with two attributes: background color and width. The colors are usually written using HEX color codes, so you can easily change your color by changing this code. The width of the cell should be equal to the current completion rate. 
• The x, in width=”x%” in the above point, can take any value from 0 (start point) to 100 (end of the form).
• <td style="background-color: #cde5f3;">&nbsp;</td> corresponds to the second cell. We don’t need to define the width of this cell because, by default, if the first cell has a width x%, the second cell will have a corresponding width (100%-x%).
• &nbsp is a non-breaking space ensuring that there is no line break between <td> and </td>, as in the image above.
• 50% - This is plain text, outside our expression, that will add a subtitle in the bottom left of the progress bar. This value should be equal to the width of the first cell. You can change it according to your needs.

Here’s the full HTML for a 50% completion rate. You can simply paste this into a field’s label, and change the % number as needed:

<table width="100%">
 <tbody>
  <tr>
   <td style="background-color: #047cc2" width="50%">&nbsp;</td>
   <td style="background-color: #cde5f3">&nbsp;</td>
  </tr>
 </tbody>
</table>
50%

If we type this code into a field’s label, this is what you’ll get:

50%

Where should we place this code in the form?

The progress bar HTML code should always be entered in the label column, but depending on your form design you can place it in different field labels:

Scenario 1. One question per page In this scenario, the best approach is to place the progress bar HTML code into your field’s label. Add a few line-breaks between the code and the question text, and you can achieve a nice-looking design.

Scenario 2. Several questions in the same page In this scenario, the best approach would be to create a note field for your Progress Bar HTML code. You can either place the note field at the top or bottom of a group of fields with the “field-list” appearance option.

Note: SurveyCTO Collect only supports a small subset of HTML elements. Your exact Android device, operating system version, and other device-related factors will affect what HTML can be rendered, and how it is rendered. In the case of SurveyCTO Collect, one needs to be careful as this only works with field labels, not group labels.

Also, HTML support can be disabled/enabled in SurveyCTO Collect from the bottom of Admin Settings, so if you’re seeing HTML code in labels, please check this option.

100%

You’ve reached the end of this article. Thank you!

Do you have thoughts on this support article? We'd love to hear them! Feel free to fill out this feedback form.