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

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.

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:

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:

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.

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:

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:

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

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

You may like following Nintex forms for Office 365 tutorials:

• Steps to create column in Nintex forms designer in Office 365 SharePoint Online
• How to use Repeating Section in Nintex forms for Office 365 SharePoint online?
• How to change Nintex Forms header banner in SharePoint Online Office 365?
• How to apply rules in Nintex forms for Office 365 SharePoint online?
• How to reset to out of box list forms from Nintex Forms customization in SharePoint Online
• How to use set field value in Nintex Forms for Office 365 in SharePoint Online using JavaScript?
• How to use JavaScript in Nintex forms for Office 365?
• How to implement mandatory field validation in Nintex forms in Nintex forms for Office 365 SharePoint Online?
• Steps to show cascading dropdown in Nintex Forms for Office 365 SharePoint Online
• How to implement validation rules by condition in Nintex forms for Office 365 SharePoint Online?
• Add different layouts into Nintex forms in Office 365 SharePoint Online
• How to set a default value for lookup column in Nintex forms for Office 365 SharePoint online?

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.