cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

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

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!!

Reply
34 Replies
dan_stoll
Nintex Newbie

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

Great Post

Reply
Nintex Employee
Nintex Employee

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

Outstanding Cellou.  Great job!!!

Reply
Warwick
Nintex Newbie

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

clever design if your looking to keep what's on screen minimal. Nice One

Reply
Warwick
Nintex Newbie

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

I've done the similar for a splash screen on a Live form, where if the user doesn't accept our Privacy Policy they will never see the real form under the splash panel.

Reply
timothydonato
Nintex Newbie

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

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.

0 Kudos
Reply
Not applicable

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

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.

Reply
Not applicable

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

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.display.JPGedit.JPGrules.JPG

Reply
Community Manager Community Manager
Community Manager

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

Nice....needed this to send to a user.  Tak su miket

0 Kudos
Reply
Not applicable

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

Can this be achieved in Nintex Forms 2013 or just in 365?

0 Kudos
Reply