Toggle menu

Multipage Forms and Branching

4. Add logic to the continue buttons

Navigation buttons control which page a user sees when they are pressed. Their default behaviour navigates forwards (left to right) or back (right to left) through the pages of your form as they are laid out in the forms designer.

You can jump to a different page using a button's Navigation Function.

Navigation Function Property
 

Decision page

The navigation button on the decision page needs to check the value of the radio group field, then set the next page appropriately.

Start by creating the following function (there was an introduction to the script editor in the Using the Script Editor tutorial):

Decision Continue Button
 

The example above means if someone answers Yes, they'll be taken to a page to enter their reference number, if they answer No they'll be taken to a page to enter their name. The "value of field" block is the radio group, and "Yes/No" are the two radio button options.

The function also needs to clear data from optional pages should the person filling out the form change their mind. This needs to happen because someone might go through the form, entering all of their details, then go backwards though the form, change their answer to the question on the decision page, then go down the other branch. Without clearing the values you could end up with two sets of answers.

You can remove all of the data from a page that has already been visited using the "remove data" form function block.

Remove Optional Page Data
 

Now, when someone navigates down one branch, any data already entered into the other branch will be removed.

Name page

The navigation button on page 3 (in the forms designer) also needs a function. The default behaviour would navigate to page 4, but we need the button to skip a page and go to the final page of the form.

Name Continue Button
 

Reference number page

The navigation button on this page doesn't need a function. From here the final page of the form is the default as it appears next in the forms designer.

Last modified on June 08, 2022

Share this page

Facebook icon Twitter icon email icon

Print

print icon