pesikwane

Nintex Live Form with Tabs, a Privacy Policy, General Instructions and Custom Buttons

Blog Post created by pesikwane on Apr 22, 2015

Greetings everyone,

 

I am currently working on a Nintex Live Form for one of my clients, and the requirements are:

 

  1. A Nintex Live Form with a tab for multiple sections
  2. Allow users to read a Privacy Policy and click on Continue before they fill out any data on the form
  3. Once they click Continue Provide General Instructions to Users with guide lines on how to complete the form
  4. Custom Save and Cancel button to match the corporate identity of the client

 

In this post I will share some tips and tricks on how I was able to meet each of the 4 requirements above

 

Requirement 1:

This can be achieved using Rules and a choice control on Nintex forms:

 

On your form add the following:

 

A choice control (call it Tabs) - add each of your desired tabs as a line on your choice control and render as tabs. Your configuration should look something like this:

 

 

Requirement 2 & 3:

Just below your Tab Control add a Panel Control (change its title to Privacy Policy), then within that panel add a Label control, edit your label and put in your Privacy Policy wording in the label control.

 

On the bottom right corner of your panel, add a choice column (call it ContinueTab) with the following configuration:

Now add the following rule to Tabs

 

And the end of this step, your panel should look something similar to this:

 

Next add a formatting rule to your panel with the following configuration:

 

Now you can add your General Instructions Panel (use the same approach as you did with your Privacy Policy Tab above i.e. a Label control with the instructions within a Panel control)

 

 

Add the following rule to your General instructions panel:

 

 

Now you can add all of your other Panels/Sections of your form as well as the associated rules to show/hide them when Tabs is clicked

 

For example if we add a Panel with the Address Details.. our rule will look something similar to this:

Requirement 4:

The last requirement we have now is the custom CSS button. I made use of this neat CSS Button Maker online tool here from CSS-Tricks.com. it gives you following options to tweak the look and feel of your button:

How awesome is that??

 

 

I put in the colours from my clients colour palette as per their Corporate Identity, viewed the CSS, copied it and placed it under Settings -> Custom CSS

Then configure your Save and Cancel button to be of type Link

and add the button class to your Save and Cancel buttons:

You should see the changes immediately.

 

Publish your form and enjoy

 

Below is final result of the form I was able to achieve using the techniques above

 

 

Each section and all associated controls is shown when the
user clicks each tab

 

Attachments

Outcomes