Multi-step forms are becoming more popular than regular forms, as they are more convenient and provide a step by step procedure to follow by the user.
In this post, we are going to cover how to design a multi-step form with Nintex Forms for Office 365.
This tutorial assumes that you have basic knowledge about designing forms with Nintex Forms.
NB: please remember to continuously save your form throughout this tutorial.
In this tutorial, we are going to design a simple employee registration form with two steps:
In the last step, clicking the submit button will save all the various information.
Open Nintex Form Designer
Click on the List tab and then select Nintex Forms in the Ribbon. A pre-populated form will open up on the forms designer.
Once the designer loads, you need to change the canvas height to make it longer because we need more room to accommodate all our form controls. To do that, open the layout settings and set the Canvas height (pixels) property to 900 and click Save.
Clear the form controls (leave the banner if you like), then drag and drop a panel control from the toolbox on to the canvas. Resize the panel to fit the full canvas width and place it right below the banner image. Then drag and drop controls inside the panel and design the form to look like the picture below.
Controls in use
Panel, Label, Single line of text, Choice, Multi line textbox, Image, Button
Double click on the Next button to open the Settings Property dialog. Set the button properties as below and click Save:
Drag and drop a single line textbox from the toolbox on to the canvas and place it on top of the header image like below.
We are going to use this textbox as a hidden field to store the active step number and then use it with rules to hide and display the correct step when the user click on “Next” or “Previous” buttons.
Next, double click on the textbox to open the settings dialog and set its properties as follow and click save:
Right click on the hidden textbox and click send to back, to send it behind the banner.
Next, select the panel control from the canvas and click Add Rule from the ribbon.
Give the rule a Name “hideStep1” and click on the formula builder icon to add a formula. Then input the formula as shown below and click Ok.
So, with this rule we will only display the step 1 when the value of our hidden textbox is 1 or when we are in display mode; otherwise it will be hidden.
By now, your rule should look like the picture below and we are done with designing step 1 of our multi-step form.
Drag and drop another panel control from the toolbox on to the canvas. Resize the panel to fit the full canvas width and place it right below the first panel and leave some gap. Then drag and drop controls inside the panel and design the form to look like the picture below.
Controls in use
Panel, Label, Single line of text, Choice, Multi line textbox, Date/Time, Button
Double click on the Previous button to open the settings property dialog. Set the button properties as below and click Save:
Select the Submit button and set its properties from the property pane as below:
Select step 2 panel control from the canvas and click Add Rule from the ribbon.
Give the rule a Name “hideStep2” and click on the formula builder icon to add a formula. Then input the formula as shown below and click Ok.
So, with this rule we will only display the step 2 when the value of our hidden textbox is 2 or when we are in display mode; otherwise it will be hidden.
By now, your rule should look like the picture below and we are done with designing step 2 of our multi-step form.
var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId);
When you reached this stage, click Publish in the ribbon to publish the form to SharePoint. Now your form should look like below on your filler.
Cellou - is there a way to change the size of the form designer without affecting the size of the canvas (at runtime)? I am using the above approch to build a 5-6 step form but don't seem to have room to add all of my panels to the designer without changing the Canvas height/width (pixels) setitng. This makes for a lot of wasted space on the edit form when all steps except for one are hidden.
Hi Timothy Donato,
When designing the form leave small gaps between your panels (~5px). At runtime the form will resize and remove the blank/unused space.
Love the tutorial and it works great! The problem I am running into though is that if there are other rules within the panel that hide certain fields in the same panel, it scrunches everything up and puts the fields on top of eachother. If I take the rule to hide a field inside the panel off, it displays properly. Is there a fix for this? Here are pictures of what it looks like during editing, during preview, and the rules.