How to design multi-step forms using Nintex forms for Office 365 SharePoint Online?

by

In this post, we will discuss how to design multiple steps forms for Office 365 SharePoint Online. The user will fill a few fields in one tab and then use the will click on Next to fill other fields and then they can submit the form.

If you are new to Nintex forms for Office 365 then you can see: Working with Nintex Forms for Office 365 SharePoint Online.

Design multi-step forms using Nintex forms for Office 365

Here we will design two forms with the help of Panel in SharePoint Online. Add the first Panel and then put the controls and design the form. Also, put the Next button.

After that add a single line of the textbox, this will work as a hidden field. Give a name for the textbox and then put the Default value as 1.

Then in the Advanced section, Select Yes or “Store Client ID in JavaScript variable“. And then it will ask for “Client ID JavaScript variable name” and put a name.

nintex multi step forms sharepoint
nintex multi step forms sharepoint

Then double-click on the Next button, Select Button action as JavaSript and in Client click put GoToPage(2) as shown in the fig below:

nintex multi step form
nintex multi step form

Now we will write the rule for a panel to hide the panel when a user clicks on Next button.

Select the Panel and then from ribbon click on Add Rule.

Give a name for the rule and then rule type as Formatting. Then in condition click on f(x) and write the rule like below:

if(Is Display Mode, false, hiddenField !=1)

Then check Hide check box. The rule should like below:

nintex form tabs
nintex form tabs

Then add the other Panel. Here you put required controls and the Previous and Submit button.

Double click on the Previous button and then choose Button action as JavaScript. Then in Client click write GoToPage(1) as shown in the fig below.

nintex forms examples
nintex multi step form sharepoint

Then select the 2nd Panel and write a rule. Give a name for the rule, Rule Type as Formatting and then Condition, write condition as:

if(Is Display Mode, false, hiddenField !=2)

Then select Hide checkbox. The rule should look like below:

nintex multi step form sharepoint online
nintex multi step form sharepoint online

Then from the Ribbon, click on Form Settings. And then in the Custom JavaScript write the below JavaScript code:

function GoToPage(stepNumber)
{
var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId);
hiddenTxtBox.val(stepNumber);
NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox);
}

It should look like below:

nintex multi step forms sharepoint
nintex multi step forms sharepoint

Now publish the form. When you will click on add new item. You will be able to see the first form.

nintex multi step form
nintex multi step form

Then when a user clicks on Next, the next screen will look like below:

design multiple step forms using Nintex forms
design multiple step forms using Nintex forms

You may like following Nintex forms for Office 365 tutorials:

I hope this Nintex forms tutorial will help you to know more about how you can design a multi-step form using Nintex Forms for Office 365 in SharePoint Online.

>