Create powerful logic and dynamic form elements using variables
You can use data column variables in the app's form builder to make your forms fully dynamic. This is super helpful for form rules, field labels, display fields, field validation, and virtually anything else you can think of!
You're welcome to use variables in all sorts of places in the form builder for Customer Fields, including:
Labels, descriptions, and placeholders for standard & custom fields
Rule conditions and actions
Content for display fields
Field validation rules and errors
Step titles
Language settings
...and more!
The only places in the form builder where data column variables cannot be used are:
Field defaults
Whitelisted tags
Variables rely on form fields
Please note that data column variables only work for data columns that the form is aware of, which are those present in fields. In other words, data column variables will not work if the data column that is being referenced by the variable is not mapped to a field on the form you're editing.
Variable syntax
The syntax used for data column variables is quite simple; single colons (:
) wrapped around a data column key. Here's an example of a variable for a data column that has the key of size_preference
:
:size_preference:
Note: The old syntax of {{ data_column_key }}
will still work if you're already using variables in form rules, but the new syntax is easier, and variables now work almost anywhere in the form builder 🤓
Group and group list data
The app's data column variables are not designed to support objects or arrays, so please note that you cannot use variables for group
or group list
data columns.
Example use-cases
Take a look at five specific examples below for some ideas on how to use data column variables, and feel free to send us your own use-cases if you'd like to share!
Use a variable in a display field to add a personalized message to a form
For this example, we've set up a simple form with multiple steps. The first step collects the customer's first_name
, and we're using a variable to show the customer's name in a display field on the second step:
Here's an animated .gif that shows what this looks like in action:
Use a variable in field labels to make questions dynamic
For this example, we've set up a form that collects the customer's pet name using a single-line text input field. The data column key for this field is pet_name
:
We're using a variable for pet_name
for multiple field labels, including a container element, and two number fields:
To give the form a streamlined user experience, we've added a form rule to automatically show the container element after a pet_name
and pet_type
have been defined:
Here's an animated .gif that shows what this looks like in action (notice we also added variables to the descriptions for the number fields to give some dynamic instructions):
Use a variable in a form's Language settings to display dynamic errors
For this example, we've added a variable for the email
data column to the "Verify email" error:
Use a variable in a form rule to automatically redirect customers to certain collection pages based on field selection
For this example, there is a required radio button field on the form for "Truck manufacturer", using a data column key of truck_manufacturer
:
The "Truck manufacturer" field has lowercase values for each of the options, each of which happen match the URLs for certain collections in the store. The goal here is to redirect the customer to a specific collection based on their selection:
Based on the truck manufacturer the customer selects, we're going to redirect them to a specific collection page on the storefront once the form is submitted. This is accomplished using a rule with a single condition and a single action:
Here's a screencast that shows what this looks like in action on the storefront:
Use a variable with field validation to force a customer to confirm a field value
For this example, there are two single-line text fields on a form to collect a customer's website URL. The first field for "Website URL" has a data column key of website_url
. The second field for "Confirm Website URL" has a validation rule for 'Must equal', using a data column variable from the first field to force the values to match.
Have questions or need help?
Please contact our Support team via chat or email 👍