How to make a form with a progress bar

How to Make a Form With a Progress Bar

Would you like to know how to add a progress bar to a form?

Having a progress bar on your form helps reduce form abandonment by keeping your visitor informed on their progress.

We’re going to show you how to add one to your form below.

What Is the Progress Bar on Forms?

Progress bars are visual features that show users how many pages are in your form and which page they are currently on.

Progress indicators, as they’re also known, will track and indicate the user’s overall progress as they fill out the form.

How to Make a Form With a Progress Bar

Here are the steps we’re going to take:

WPForms is the best WordPress Form Builder plugin. Get it for free!
    1. Install the WPForms Plugin
    2. Create a New Form
    3. Add Page Breaks to Your Form
    4. Save and Publish Your Form
    5. Check Your Form Progress Bar

Let’s start by installing the form plugin we’ll need for the progress bar.

1. Install the WPForms Plugin

Firstly, to have a progress bar on your form, you’ll need to purchase a WPForms Pro Licence and then log in to your WPForms account. Once you’ve logged in, click on the Downloads tab.

Download tab in WPForms

This will show you a page with all of your available licenses. To download the plugin, click on the Download WPForms button next to one of your licenses. This will save a zipped file of the WPForms plugin to your computer.

Download WPForms button

Important: You will need WPForms Pro as it includes the Page Break field. You need the Page Break field if you have various steps on your form and to show the progress bar.

Installing WPForms Onto Your Site

Once you’ve downloaded your zip file, head to your WordPress site where you’d like to install WPForms. Then, inside the admin dashboard, go to Plugins » Add New and click the Upload Plugin button.

Upload plugin button on WordPress

From here, click on the Choose File button and select the WPForms zip file you just downloaded.

Red arrow pointing towards the Choose File button

After your file is uploaded, click on the Install Now button.

Install now button on WordPress

This will begin the installation process for you. Once the plugin is installed, click on the Activate Plugin button to activate WPForms on your site.

Red arrow pointing to the Activate Plugin button

After activating the plugin, verify your WPForms license key to receive automatic updates and plugin support. Adding your license key will also allow you to easily install and activate WPForms addons from inside your WordPress dashboard.

That’s it! We can now go ahead a create a new form.

2. Create a New Form

To begin, you’ll need to be logged into your WordPress admin area. Once there, click on WPForms in the admin sidebar to go to the Forms Overview page.

Then, to create a new form, click on the Add New button to launch the WPForms form builder.

Add new form WPForms

On the Setup page of the form builder, you can name your form in the Form Name input field.

Highlighting the field where you can name your form

If no name is chosen, then the form name will default to the name of the template you choose.

Below the Form Name field, you’ll find hundreds of form templates in the Select a Template section. These are pre-built templates of commonly used forms to help you get started quickly.

Note: If you want to build your form from scratch, use the Blank Form template.

Select a template section in WPForms

To select a template, you can use the categories in the menu on the left. You can also use the search bar in the top left corner of the template library to search through the available options.

Highlighting the template search bar feature

Once you find your desired template, hover over it and click the Use Template button.

Arrow pointing at the large orange Use Template button

If you’re having any difficulty creating your form, read our in-depth instructions on how to create and fully customize your form.

3. Add Page Breaks to Your Form

You’re now ready to add your page breaks and a progress bar. By adding a page break, the form will automatically include the progress bar.

Once you have the form builder open, go ahead and add any fields you’d like to include in your form. Then drag a Page Break field into the preview area and drop it wherever you’d like to create a new form page.

A moving image of dragging the page break field to the form builder

Each Page Break field that you add will split the form into additional pages, and you can add as many pages as needed. To move the Page Break to a different section of your form, simply click on it in the preview area and drag it wherever you’d like.

Customizing Your Progress Bar

Once you’ve added a Page Break, you may notice that in the preview area a First Page area has appeared at the top of your form. Click on First Page / Progress Indicator to access the options for your multi-page form.

Arrow pointing towards the first page/progress indicator

You can customize your progress bar in the Progress Indicator dropdown.

An arrow pointing towards the progress bar customization options

You can then choose from the three Progress Indicator styles: Progress Bar, Circles, or Connector.

Progress Bar:

An image of the progress indicator bar on WPForms

Circles:

WPForms' progress bar circle style

Connector:

Connector style for WPForms' progress bar

To change the color of your Progress Indicator, use the color picker or enter the HEX code.

The color selector for the progress bar feature on WPForms

Finally, enter a name for your form’s first page in the Page Title field.

An arrow pointing towards the form title field to rename your form

However, if you’re happy with how your form looks as it comes, you can hide the progress bar by selecting None.

Arrow pointing towards the progress indicator style button

Want to learn more? Read the full how to create multi-page form instructions and customizing details to take full advantage of this form feature.

4. Save and Publish Your Form

Once you’ve finished customizing your form, you can now publish it. First, click the large orange Save button at the top right corner of your form builder.

The big orange Save button to save your form

You can then use the Embed Wizard to integrate your form onto your website by clicking the Embed button.

Embed form button

From here, you’ll have the option to either create a new page to embed your form on, or to select an existing page to add your form to.

Embed options on WPForms

If you select the Create New Page option, you’ll be asked to enter a name for the page. Then click the Let’s Go button to embed your form and publish your page.

Name new page for embedding form

If you choose the Select Existing Page option, you’ll be asked to pick which page to embed your form on from the dropdown.

Select existing page option with a large Let's Go button

Then click the Let’s Go button to embed your form.

You can now view your form on the selected page. Either go to the page you’ve embedded it on or go to WPForms » All Forms. Hover over the form title to display an additional menu of options. Once the options appear, click Preview.

Preview form option on WPForms

5. Check Your Form Progress Bar

You will now have a form that will have a progress indicator similar to this:

An example of how the progress bar will look on a WPForm

We recommend testing your form by filling out the fields and submitting it, to ensure everything looks good and it works the way you want it to.

Note: The page break fields can be moved up or down on the form if you’d like to adjust the layout.

Next, Become a Form Building Expert

Would you like to increase your WPForm building knowledge? Be sure to check out our complete guide to form fields and how to customize the fields on your forms.

Are you ready to build your form now? Remember to sign up for WPForms Pro as it includes the Page Break field and progress bar, hundreds of free templates, and we also offer a 14-day money-back guarantee.

Create Your WordPress Form Now

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.