Dynamic Redirects After Form Submission

When creating a Submission form, Caspio Bridge allows many possible actions after the end-user clicks the Submit button. You can dynamically redirect a user to a specific URL based on their form input.

This technique can be useful in many situations:

  • Multi-step forms where specific pages are filled out based on user type
  • Registration that includes requests for more information (pictured)
  • Targeted landing pages based on user information such as industry, or location

dynamic-form-redirect

In this section, you create a dynamic action linking user input to form destination.

  1. In the Caspio Bridge homepage, select and open an app. In the App Overview page, click DataPages on the sidebar menu and click New DataPage.
  2. Select Submission Form as the DataPage type.
  3. On the DataPage DataSource screen, you can set the data source, style, localization, and level of access for this DataPage. Check both Enable Advanced Options and Enable parameters.
    Dynamic_redirect_1
  4. You can select the desired fields from your data source to display in the Submission Form.
  5. You can configure the functionality, appearance, data validations, and other properties for each field that were selected on the previous screen. In this example, create a Virtual field. At the lower right hand corner of the DataPage Elements panel, click the Insert button and click Virtual Field. This field is going to receive the user input and translate it into the user’s destination.
    Dynamic_redirect_2
  6. Select the Virtual field you just created and configure the properties to match the image below. Select Dropdown in the Form element drop-down. By default, the source of the dropdown will be custom values. Enter possible choices using the Custom Values tab. The display field will contain the option that is visible to your users. The value tab will contain the destination URL.
    • Full URL: http://www.yoursite.com/pages/choice1.html
    • Relative URL (both HTML pages are in the same directory): choice1.htmlDynamic_redirect_3
      In this example custom elements are used to define the possible destinations. You can also use a lookup table with one field for the dropdown display, and another field for the destination URL value.  If you are not using relative URLs, be sure your URL includes the correct protocol (e.g. http://).
  7. Next, you pass the Virtual field as a parameter. Select the Advanced tab and enter the virtual parameter name in the On exit pass value to next page field.
    Dynamic_redirect_4
  8. You can configure what happens after the form is submitted. In this case, select Go to a new page as the destination and enter or insert the parameter name in Page URL. If you are using a relative URL, check Relative. Click Finish.
    Dynamic_redirect_5

Testing and other concerns

Now when your users click Submit, their browser will be directed to a destination based on their input. In this example, a Virtual field was created to receive input, but if you have a lookup table for your destinations you can also create a hidden cascading dropdown.

Ensure that this dropdown has no blank options, or is marked as required to avoid passing an empty destination parameter.