How to use merge variables in Blitzen Forms
Within Blitzen forms, you can use merge variables in order to add personalization and dynamic values. This article will discuss where you can use these variables, which variables are available for use, and some advanced functionality around conditional logic.
How to use merge variables
Merge variables can be added to many different sections in a Blitzen form (see below). In order to use them, it's simply a matter of typing the variables in and wrapping the variable in double curly braces (e.g. {{FNAME}}
). If for example you wanted to add a submitters first name to the title of a blitzen form, it could look something like this:
Available merge variables
There are several different categories of merge variables that can be used on Blitzen forms. These include personalization variables, query parameter variables and field value variables.
Personalization variables
Personalization variables are available if the identity of the user is already known. Note: Some or all of these variables may not be available depending on what identity data can be found on the submitter. See the conditional logic section below for how to best handle this.
{{EMAIL}}
- the email of the submitter{{FNAME}}
- the first name of the submitter{{LNAME}}
- the last name of the submitter{{MNAME}}
- the middle name of the submitter{{PHONE}}
- the phone number of the submitter
Address:
{{CITY}}
- the city of the submitter{{COUNTRY}}
- the country of the submitter{{POSTAL}}
- the postal code of the submitter{{PROVINCE}}
- the porovince / state of the submitter{{STREET1}}
- street line 1 of the submitter{{STREET2}}
- street line 2 of the submitter{{STREET3}}
- street line 3 of the submitter
Company Data:
{{CNAME}}
- the company name of the submitter
Query parameter variables
If you're not familiar with query parameters, you may want to read through this article on the topic. For any query parameters that you add to your form URL, they will also be available to be interpolated into your form (interpolation is just a fancy word for replacing the merge variable name with the value it is associated with). Note: It is important that your query parameter keys do not start with numbers or include non-alphanumeric characters.
For example, if you had a custom link to your form such as https://xyz.blitzen.com/form/myform?id=34
, you would be able to represent that query parameter as {{id}}
.
Field value variables
In the completion text and redirect url sections, along with personalization and query parameter variables, you can also interpolate the values of fields that a submitter has already filled out. This is especially useful when you use !alternative values! on multiple choice questions. When interpolating field values, you have to do a bit more work than with the other variable types. In order to target a specific field value, you must know the unique id for that field. You can find this by inspecting a field via developer tools in a browser of your choice. An example is provided below using Google Chrome. Once you have the field id, you can interpolate it similar to how you would interpolate other fields, but you must prepend an 'f'
to the field id. (This should be done even if the field ID already begins with an 'f'). For example, if the field id was as923a9df023fxk
, then you would interpolate it as {{fas923a9df023fxk}}
.
How to find field ids with google chrome:
Step 1: inspect the form field that you want to use as a merge variable
Step 2: The previous step will open up developer tools, and you will see an HTML representation of the form. Find the element that has the class of form-field-runtime
, and copy down the id. In the screenshot below, the id cbef09b1e0490b9c9452b5921017c3
Where to put merge variables
Merge variables can be included in the following areas:
- Form title
- Form description
- Form field labels
- Form field placeholder text
- Custom form header image
- Custom form background image
- Completion text
- Completion redirection URL
- Submit button text
Conditional Logic
In many cases you will want to display different content depending on if a variable exists or not. For example, if you're looking to greet a user by using their first name, you will likely want different greetings depending on if we can determine their name or not. In this case, a conditional logic statement could look like the following:
{{FNAME ? 'Welcome back, ' + FNAME : 'Nice to meet you' }}
Conditional logic works using what is called ternary logic. If you're not a developer don't fear, we will break it down for you:
In the statement above, there are two logical operators. Namely, we have a question mark, ?
and a colon :
. The logic works like this: the question mark is checking to see if we have a value for the preceding variable. In the example above, that means it is checking to see if we have a value for FNAME
. On either side of the colon (:
), we have a truthy value and a falsy value. If the question mark test returns true (i.e. we can find a value for FNAME
), then the expression on the left side of the colon is evaluated. If the question mark test returns false, then the expression on the right side of the colon is evaluated.
Therefore, if we had a scenario where we knew the submitters first name already (let's call him Jeff), the conditional statement above would evaluate to:
"Welcome back, Jeff"
Alternatively, if we did not know the submitters first name, the conditional statement would evaluate to:
"Nice to meet you"