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

design multiple step forms using Nintex forms

In this post, we will discuss how can 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 then you can see: Working with Nintex Forms for Office 365.

Here we will design two forms by the help of Panel. Add the first Panel and then put the contols and design the form. Also, put the Next button.

Also, read:
Get All Attachments From SharePoint 2013 List Item using Rest API

Delegate Controls in SharePoint 2013 using Visual Studio 2013

Add Custom Web Part Properties in SharePoint 2013 Visual Web Part

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 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 forms
nintex forms

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

nintex sharepoint forms
nintex sharepoint forms

Now we will write the rule for a panel to hide the panel when user click 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 liek below:
if(Is Display Mode, false, hiddenField !=1)
Then check Hide check box. The rule should like below:

nintex sharepoint 2013 form
nintex sharepoint 2013 form

Then add the other Panel. Here you put required controls and 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 forms examples

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 check box. The rule should be look like below:

nintex forms sharepoint
nintex forms sharepoint

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 looks like below:

nintex forms and workflow
nintex forms and workflow

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

nintex workflow cloud forms
nintex workflow cloud forms

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

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →