Data column variables

Learn how to use data column variables in the app's form builder to make forms dynamic

Kyle Weiskopf avatar
Written by Kyle Weiskopf
Updated over a week ago

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 👍  

Did this answer your question?