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.

Create a Form With Progress Bar

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.

Using the progress bar is a highly effective conversion strategy. Because people have a tendency to remember unfinished tasks, they’re more likely to complete a form that shows how close they are to the finishing line.

It’s one of the best ways to minimize form abandonment.

How to Make a Form With a Progress Bar

Here are the steps we’re going to take:

1. 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.

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.

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.

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

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

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.

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.

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

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.

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.

Once you find your desired template, hover over it and click the 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.

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.

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

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

Progress Bar:

Circles:

Connector:

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

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

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

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.

You might also want to allow your users to save their progress and fill the remainder of your form at a later time. This is a great way of reducing form abandonment and increasing form completion rates.

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.

You can then use the Embed Wizard to integrate your form onto your website by clicking the Embed 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.

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.

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

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.

5. Check Your Form Progress Bar

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

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 a Form With Progress Bar

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