How can I create a multi-page form?

Long forms are sometimes necessary but can look difficult to the user as well as being difficult to work through and navigate. It often helps to break them up into separate pages or tabs. In this FAQ we'll look at building a simple multi-page form.

This form only has one element and a submit button on each page. We suggest that you start with a simple form like this to see how it works and then go back and add more elements and actions.

In the Form Wizard Preview box drag in these elements in this order:

  1. A Text Box element
  2. A Submit button element
  3. A Page Break element from the Advanced group
  4. A Checkbox element
  5. A second Submit button element
  6. A second Page Break element from the Advanced group
  7. A Radio Box element
  8. A third Submit button element

Edit the first two Submit button elements and change the Text box to 'Next page'

See the screen shot below for the final element set.

It may help later to give names to the Page Break elements to identify the blocks of elements.

Now click the Events tab and create two new events by clicking the Add Event button. Name these events 'Page Two' and 'Page Three'.

Click the 'Form Settings' tab; give the form a name and then click the Save icon in the Toolbar. Reopen the Events tab when the form has saved. (This will update the Events lists that we want to use in the next step.)

In the On Load event drag in a Multi Page action from the Utilities Group followed by a Show HTML action from the Core actions group. Open the Show HTML action and click the 'Multi Page' tab.

  • Set the Submission Event to Page Two (because we want to show Page Two when Page One submits). 
  • Set the Page Number to 1 to identify the block of elements from the Preview window that this action should display.
Repeat dragging in the two actions and the Show HTML settings for the Page Two event setting the Submission Event to Page Three and the Page Number to 2.
Repeat again for the Page Three event setting the Submission Event to Submit and the Page Number to 3. 
Lastly Drag a Multi Page action and a Debugger action into the On Submit event. (The Debugger is just to show us the form results.
See the screen shot below for the final event and action set.
Save and test your new form.
Once you have this simple version working go back and add more elements and actions.
 

Category: CFv4 Actions