This blog post demonstrates a simple method for adding a progress bar to your multi-paged forms using a third-party plugin found on the WordPress repository. The plugin is called "Progress Bar" and it can be found here. With this plugin installed and activated, you can add nice looking CSS3 progress bars to your forms by adding progress shortcodes in your form. Follow these steps:
- Install and activate the Progress Bar plugin by Chris Reynolds
- Build your multi-page form in Formidable Pro using the "page break" field type to indicate where each page will start
- Add new "HTML" fields before your "page 1" fields and directly following all "page break" fields in your form. This assumes you want the progress bar at the top of your pages, but you can add them anywhere you would like progress bars to be displayed in your form.
- Add progress bars to your newly created HTML fields by clicking on the "field options" bar on each of your HTML fields. You can type the Progress Bar shortcode directly in the "content" box found in these field options.
- Your HTML field options should look something like this
- If you would also like to add a progress bar to the success message, you can do so on the form setting page as shown here:
That's it. The result should be a progress bar at the top of each page of your form indicating the total progress. Here is a screenshot of what my overall form looks like on the form builder page and an example of page 2 of my form:
Read more: Adding progress bar to multi-page forms