Data grids allow you to set up the options shown in Select, Checkbox and Radio fields.
To access the data grid, field click the settings icon on a field.
On a select field you access the data grid by clicking the Options tab. On a checkbox field it is called Checkboxes and on a radio field the tab is called Radios.
An example of a data grid would be a list of countries or states. A more advanced data grid might be a table containing country abbreviations, full names, and ISO codes.
What is Column Mapping?
Column mapping allows you to map different columns of your data grid to different parts of your field.
Let’s take a Select field for example:
Select fields contain options. Each option has a Value that is saved when the form is submitted and a Label that is shown to the user when viewing the form.
To determine which column of the data grid is mapped to the Value of an option and which column is used for the Label of an option, you use the Column Mapping settings. These settings are found in the Options tab when editing the field, immediately below the data grid, as shown in the screenshot below:
In its simplest form, a data grid can contain a single column and you would map that single column to all of the column mapping settings.
In a more advanced data grid you can use additional columns and map those columns to different column mapping settings. For example, you could add a Value column and map that to the value column mapping as is shown in the example above.
Column Mapping Settings
The column mapping settings are described below:
Labels Mapping
The Labels mapping setting determines which column of your data grid is used for the label of each option, i.e. what the user sees when choosing an option.
Values Mapping
The Values mapping setting determines which column of your data grid is used for the value of each option, i.e. what value is saved when the form is submitted.
Values should be unique for each option.
Action Variables Mapping
The Action Variables mapping determines which column to use if you reference a field in an action. For example, you might put:
#field(1)
… in a Send Email action. In the screenshot above we have mapped the Label column to Action Variables so the label of the option chosen by the user would appear in the email.
Price Mapping
E-Commerce fields have an addition price mapping setting. This is used to determine which column in your data grid contains the price for that option.
Enter values without a currency symbol, e.g.
123.45
WooCommerce Cart Mapping
The WooCommerce Cart mapping will only show if you have the WooCommerce Product Add-Ons extension installed. It determines which column to use when a field is shown in the WooCommerce cart.
Adding Additional Columns to Your Data Grid
To add an additional column to your data grid, click the + icon at the top:
Once the column is added you can immediately name it and start to enter data.
Other Data Grid Features
WS Form offers the most comprehensive tools for configuring your Select, Checkbox and Radio fields using data grids.
Other features of data grids include:
- Data Sources – Load data from a variety of sources including Presets and data from Post and User data.
- Import / Export CSV files – Bulk import and export CSV files to/from your data grid.
- Checked, Disabled, Visibility toggling.
- Auto Optgroup – Create optgroups automatically by choosing a column in your data grid.
Using #field With Delimiter and Column Parameters
The #field variable allows you to extract the value of a field and place it elsewhere on your form or in an action.
#field can be used to dynamically access other columns of your data grid by providing additional parameters.
Learn more: Using #field With Delimiter and Column Parameters