How's it Progressing? Add a Progress Bar to your Nintex Form

Nintex Forms is awesome and offers a ton of flexibility and methods to add custom functionality to your form. One bit of functionality I've been asked about was a progress bar.

For example, you have a Nintex Form with tab functionality, but you want to have a progress bar on each panel to show how far along the end user is with the sections they are filling out. Let's take a look at how to do that.

The Build

Go ahead and create a Nintex Form with three 'Panels' and a 'Choice' control with the following configuration:

Next, add a few controls to each panel. I placed a label control with a question (See if you can guess where I got the questions), and a Single Line Text Box:

Almost there!!

Now the fun part. Nintex Forms allows you to add custom HTML to controls such as 'Rich Text' and 'Label'. When you click on the body section of the control configuration, you will see a button for 'Edit Source'. 

Add a label control to each panel. Now, in the first label you added, open up the configuration settings (click Edit Source!!!) and let's add the following HTML!

The Code

<progress value="1" max="3"></progress>

Make sure you have clicked 'Edit Source' before you place the code in, because otherwise the label will render the exact text value you entered instead of a progress bar. 

Since I have three panels, the max value is 3 and the value of the first panel is 1. The next two panels are as follows:

<progress value="2" max="3"></progress>
<progress value="3" max="3"></progress>

This is pretty simple stuff, but visual aids like a progress bar go along way with improving usability. I then added a label next to each progress bar to note it is for showing the progress of the form, and viola! 

Next, you'll have to build the Formatting Rules for each panel that you want to hide. Remember, place the hide rule only on the panel you want to hide and not the controls nested within the panel. Here is how the rule is configured for the first panel:

First Rule Configuration

After adding the additional rules for the second and third panel, give the form a test.

The Result

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all things Nintex.