Multi-Step form for Office 365

Document created by eharris04 Employee on May 22, 2016
Version 1Show Document
  • View in full screen mode

This asset walks through how to setup a multi-step form in Office 365 with Nintex.

 

AuthorCellou Diallo
Long Description

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

Dependencies

None

Support InfoEric Harris - How to design a Multi-Step form with Nintex Forms for Office 365
Compatibility

Nintex Forms Office 365

Platform

Office 365

Screenshots

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 DesignerClick 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 usePanel, Label, Single line of text, Choice, Multi line textbox, Image, Buttonimg3.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 usePanel, Label, Single line of text, Choice, Multi line textbox, Date/Time, Buttonimg11.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 clickSave.

  1. function goStep(stepNumber) 
  2. var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId); 
  3. hiddenTxtBox.val(stepNumber); 
  4. NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox); 
  5.   

Publish/View form

Additional Information

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

1 person found this helpful

Attachments

Outcomes