Back

Drupal Forms User Guide

Progress bars

The progress bar shows a neat progress bar down the right hand side of the page. It's mobile-friendly, reverting to a smaller view that sits on top of the form. It work well in some situations, for example:

  • long forms using save and return functionality
  • shorter forms with no page logic

The standard progress bar displays the page names, so you have a form with no pages, the standard progress bar will not appear.

Important note: Progress bars do not work properly until you set the tracking info in settings. Something to bear in mind when you're building a new form and you haven't set the form settings.

Example of a progress bar

Configuring the progress bar

By default, the progress bar is on, but there are a couple of settings you can add to improve it. One useful feature is making the page titles in the bar links.

To activate this, go to the form tab of the form settings page and navigate to the Form wizard settings section:

  • toggle Link to previous pages in progress bar to on

As you might tell from the description, the links only work for pages the user has already navigated past, which appears at first to be a bit of a limitation, but the logic is that the user shouldn't be able to jump past pages they haven't filled in yet.

De-activating the progress bar

To de-activate the progress bar, go to the form tab of the form settings page and navigate to the Form wizard settings section:

  • toggle Show wizard progress bar to off

Limitations

Progress bars do have a couple of drawbacks, which can cause confusion.

Hidden pages

When pages are hidden by page-level logic, they still appear on the progress bar. This can then cause confusion as people see 5 titles in the progress bar and expect to go through 5 pages. If the user skips a hidden page as they had no need to answer any questions on it, they might think that the system is broken somehow.

If a stakeholder likes the idea of a progress bar, and there is the risk of causing confusion with page-level logic, you can get around this by moving your logic to the element level. This way, the progress bar shows an 'honest' list of pages.

Embedded forms

You should only embed a form of one page, so progress bars should not be required.

If in doubt, avoid using progress bars.