Create powerful logic and dynamic form elements using variables

👋 Hey power users! 💪 Guess what??

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!

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 everywhere in the form builder 🤓

Example use-cases

Take a look at four 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!

Example 1

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:

Example 2

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 group field, and two number fields:

To give the form a streamlined user experience, we've added a form rule to automatically show the group field 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):

Example 3

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:

Example 4

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: 

Have questions or need help? 

Please contact our Support team via chat or email 👍  

Did this answer your question?