Create Select, Checkbox, and Radio Cascading LookupsPRO

Cascading select, checkbox and radio fields allow you to create dynamic lookups that change based upon the value of another field on your WordPress form. For example, you could create a vehicle make and model lookup using this feature.

In the example below, you can see how the selection of a vehicle make filters the vehicle model options. Likewise selecting a vehicle model filters the vehicle year options.

Demo

Select, checkbox and radio fields are configured using a data grid. Data grids are much like a spreadsheet and allow you to easily manage select options, checkboxes or radios. You can even use data sources to rapidly build data grids.

The diagram below illustrates how the example above works for the Make and Model fields.

WS Form - Cascading Select and Radio Fields

Cascading works as follows:

  1. Choose a Filter Value. This is the field on your form that WS Form will use to filter your options by. In the example above we choose the Make radio field as the filter value. This will have the value Toyota, Ford or Honda.
  2. Choose a Filter Column. This is the column you want to filter values by in your data grid. So, if Toyota was selected in the Make radio field, then this data grid would be filtered to only show the rows where the Make column is equal to Toyota. The values in this field should precisely match the values in your Filter Column.
  3. If your filter column contains comma separated values, you can check the Filter Column – Comma Separate setting. This will tell WS Form that you wish to treat each comma separated value as individual values to check against.
  4. WS Form automatically renders the select field using the filtered options.

You can also daisy chain cascaded select and radio fields as in the example above.

Enabling Cascade

To enable cascading on a field:

  1. Click the settings icon on a select, checkbox or radio field to open the settings sidebar.
  2. Click the Options, Checkboxes or Radios tab to view the data grid for that field.
  3. Check the Cascade checkbox.
  4. Select the Filter Column. This is the column in your data grid you want to filter.
  5. Select the Filter Value. This is a select or radio field on your form you want to filter by.
  6. For larger datasets using select fields, you may wish to enable the Use AJAX option to improve form performance.
  7. Click Save & Close.