How to design a Multi-Step form with Nintex Forms for Office 365

Document created by cellou.diallo@nintex.com Employee on Aug 25, 2014Last modified by emily.billing@nintex.com on Jan 30, 2015
Version 2Show Document
  • View in full screen mode

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:

  • Step 1 – Personal details
  • Step 2 – Work experience

 

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.

img1.png

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.

img2.png

Form number one (Personal details)

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

img3.png

Double click on the Next button to open the Settings Property dialog. Set the button properties as below and click Save:

 

  • General -> Button action -> JavaScript
  • Advanced -> Client Click -> goStep(2)

img4.png

Transition from form number one to form number two

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.

img5.png

 

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:

 

  • General -> Name -> hiddenTxtBox
  • General -> Default Value -> 1
  • Advance -> Store Client ID in JavaScript variable -> Yes
  • Advance -> Client ID JavaScript variable name -> “hiddenTxtBoxId”

img6.png

 

Right click on the hidden textbox and click send to back, to send it behind the banner.

img7.png

Next, select the panel control from the canvas and click Add Rule from the ribbon.

img8.png

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.

img9.png

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.

img10.png

Form number two (Work Experience)

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

img11.png

Double click on the Previous button to open the settings property dialog. Set the button properties as below and click Save:

 

  • General -> Button action -> JavaScript
  • Advanced -> Client Click -> goStep(1)

img12.png

Select the Submit button and set its properties from the property pane as below:

 

  • General -> Button action -> Save
  • General -> Button label -> “Submit”

Show/hide Condition

Select step 2 panel control from the canvas and click Add Rule from the ribbon.

img13.png

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.

img14.png

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.

img15.png

Custom JavaScript

Click on the Forms Settings icon in the Ribbon and copy and paste the following JavaScript code in the Custom JavaScript field and click Save.

 

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

 

img16.png

Publish/View form

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.

img17.png

img18.png

Thanks!!

2 people found this helpful

Attachments

    Outcomes