How to create a conditional multi-page form

In the following article we will present an example on how to build a multi-page form that displays a different page based on the user's selection.

Download Sample Form

rsfp_changePage function

Before we get started you should first familiarize yourself with the default function used by the RSForm!Pro component to change pages: rsfp_changePage()(you can find the function in media/com_rsform/js/script.js). This function offers 4 parameters:

  • formId: this parameter stores the id of the form you are using
  • page : this parameter stores the page that you will move to
  • totalPages: this parameter stores that total number of pages your form contains(please note that the page count starts from 0)
  • validate: this parameter returns either true or false, based if you want the data entered in the fields to be validated before the page is changed

Extending its functionality

Since the function does not offer the conditional feature by default, you will need to create a custom function that will first check the user's input and then trigger the default rsfp_changePage() function with different parameters so that the conditional functionality is generated.

In our example we have used a simple 4 pages form and used a radio group(named 'skip') on the first page that will determine if the second page of the form will be shown.

Example

The custom function that controls the change page functionality should be set in the CSS & Javascript tab and should be similar to:

    <script type="text/javascript">
    function rsfp_conditionalPage(formId, page, totalPages, validate){

      //the following if clause will address the change page functionality when the "Next" button is used
      if(page == 1 && document.getElementById('skip0').checked && typeof validate != 'undefined'){
      /* this will check if the user tries to change the page to the conditional page(the second page),if the user 
      selected to skip this page and if a "Next" button was used*/
        rsfp_changePage(formId, page+1, totalPages, validate);
      /* this will trigger the default change page function while incrementing the page parameter one more time so that 
      the form moves to the third page directly*/
        return '';
      // this is used so that after the function is triggered the script is stopped    
      }

      //the following if clause will address the change page functionality when the "Previous" button is used
      if(page == 1 && document.getElementById('skip0').checked && typeof validate == 'undefined'){
      /* this will check if the user tries to return to the conditional page(the second page),if the user selected to 
      skip this page and if a "Previous" button was used*/
        rsfp_changePage(formId, page-1, totalPages, validate);
      /* this will trigger the default change page function while decrementing the page parameter so that the form 
      moves to the first page directly*/
        return '';
      // this is used so that after the function is triggered the script is stopped    
      }
      rsfp_changePage(formId, page, totalPages, validate);
      // this is used so that the multi-page display is properly shown when the form is first loaded
    }
    </script>

In order to replace the default change page function with your custom one you will require an additional script in the Scripts called on form display field of the PHP Scripts tab:

    $formLayout = str_replace('rsfp_changePage(', 'rsfp_conditionalPage(', $formLayout);

10 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Conditional fields are not working

Conditional fields feature first-hand example