Buy Now
Sign in

FAQ search

How can I switch form pages in CFv5?

Details
Published: Saturday, 02 May 2015 15:13

One of the uses of a multi-page form is to be able to show different pages to the user depending on their previous answers. You might want to skip a page, or show an alternative page. This FAQ shows a way to do that using an Event Switcher action.

In this FAQ we'll show how to do this with a very simple form. The same method can be extended to more complex forms. For the example we'll have a form with three pages

On the Designer tab

Drag in three Container elements from the Advanced group and set each of them to Type Page.

+ In the first container add a Radio Box element and a Submit Button

+ Configure the Radio Box with the name page_switch and with two Options like this:

page_2=Go to Page 2
page_3=Go to Page 3

and set the Checked Value to page_2 (this just makes sure that the Radio Box always submits a value).

+ In the other two Page Containers add a Custom Action with some text e.g. 'This is page 2' and 'This is page 3'

On the Setup tab

+ As well as the On Load event we'll need two other new events called page_2 and page_3

+ Add an HTML (Render form) action to the On Load event.

+ Do the same with the On page_2 and On page_3 events but edit the HTML (Render form) action to set the Page to 2 and 3 respectively. 

+ In the On Submit event add an Event Switcher action. In the settings set The Events to page_2,page_3; then Save and Close the action. Open it again and click on Load Events, then Save and Close again and you should see two new events in the action: On page_2 and On page_3

+ Drag an Event Loop action into each of these and set their Event Names to page_2 and page_3. So the On page_2 Event Loop points to the page_2 event.

+ Open the Event Switcher action settings again and add this code to the Code box. This just says that if the Radio Box is set to page_2 then switch to the page_2 event.

<?php
switch ($form->data['page_switch'] ) {
  case 'page_2':
  default:
    return 'page_2';
    break;
  case 'page_3':
    return 'page_3';
    break;
}
?>

Save and Close the action; Save the form and Test. You should find that when you select the Page 2 radio button and submit you are shown Page 2 and whe you select Page 3 you are shown Page 3.

Note: this is a simple example to deomstrate how this works, in practice you would have more form elements, possibly more pages and more complex logic for the switiching. If you are building a form like this it is best to create the logic with the simplest possible form, get that working correctly then add more elements to the form.