Feature

Form progress bar

A form progress bar shows the lead how much of your form they have completed. It gives them a reason to keep going, because they can see how little is left.

Start free trial

A form step with a line progress bar showing how much is complete

What is a form progress bar?

A form progress bar is a progress indicator that shows the lead how far through your form they are. A multi-step form progress bar fills as each step is completed, so the remaining effort is visible from the first question to the last.

In Growform the bar is part of the form itself. It updates as the lead moves between the steps of a multi-step form.

Which progress bar types can you choose?

Growform has three progress bar types, and each one has its own settings.

Line. You set the height of the line and can switch on “Show %” to display the percentage completed. The line can also carry stripes, and the stripes can be animated.
Bars. You set the height of the bars and choose between a compact and a wide layout.
Circles. You set the size of the circles.

Where does the progress bar sit on the form?

The progress bar sits in one of three positions, which are “Window top”, “Form top” and “Form bottom”. A bar at the top shows progress before the lead reads the question. A bar at the bottom leaves the question as the first thing on the screen.

How do you change the color of the progress bar?

You change it in the theme settings, where the progress bar has a color of its own next to your primary, text and error colors. The bar can match your brand color or stand apart from your buttons. The rest of the theme is covered under custom style and design.

If you write custom CSS for your form, the bar can be targeted with the .progressBar class.

How do you add a progress bar in Growform?

Select the progress bar

Open your form in the editor and click the progress bar. Its settings open in the side panel.

Pick one of three types

Choose Line, Bars or Circles, then adjust the options for that type, such as the height, “Show %” or stripes.

Set the position

Choose “Window top”, “Form top” or “Form bottom”.

Set the color and save

Pick the progress bar color in the theme settings and save the form.

Why showing progress helps a lead form convert

The lead can see that your form has an end.
The bar fills with every completed step, so step five never looks the same as step one.
The contact step reads as the last request.
A nearly full bar tells the lead that the name, email and phone number are the final things you will ask for.
Longer qualifying forms become easier to finish.
A mortgage inquiry with eight questions is easier to continue when “Show %” puts a number on how much is done.
The bar looks like part of your landing page.
Its color comes from your theme, so it matches the buttons and text around it.

Is the progress bar on every plan?

All three progress bar types come with every plan.

Basic: Yes
Professional: Yes
Scale: Yes
Custom: Yes

Frequently asked questions

Is there a way to display the percentage completed?

Yes. The Line type has a “Show %” option that prints the percentage on the bar.

What happens to the bar while a loading animation plays?

It is hidden. While a loading animation is on screen, the form hides the progress bar and the continue and submit buttons to prevent accidental navigation.

Can custom CSS restyle the bar?

Yes. The bar carries the .progressBar class, which you can target from the form's custom CSS box.

Does the bar need any code to work?

No. The type, position and color are settings, and custom CSS is optional.