Advanced Submission Variables and Templating

Submission Variables#

Submission variables are important because they allow you to personalize messages by using the details of the form submission. Type {{ to open the dropdown menu to see your options – your form fields and other relevant details will show up. We highly reccomend using {{values.name}} or your equivalent to personalize your salutation.

Submission Variables#

Submission variables allow you to personalize messages/text by using the contents of the form submission and relevant metadata. Inputs that accepts submission variables are denoted in the UI with a little vars icon, button, or explicit message. In these inputs, you can type {{ to open a dropdown menu to see available variables. These include the following.

VariableDescription
{{project.id}}Project ID
{{project.name}}Project Name
{{project.slug}}Project Slug
{{form.id}}Form ID
{{form.name}}Form Name
{{form.slug}}Form Slug
{{submit.id}}Submission ID
{{values}}Values of the submission. Use dot-notation for nested access.

Handlebars Templating#

Both the Rich Text and Raw HTML Email editors use Handlebars as a template language. We provide your form submission data as well as other relevant information to your templates as an input object so that you can generate dynamic text values and/or add logic.

Example#

Let's walk through an example to see how this works. Imagine we have a basic contact form with firstName, lastName, email, workEmail, and company fields.

When the end-user submits this form, Formik Cloud will provide the these submission variables to the Email Actions with a nested input object that looks like this:

Within the Email Action, you'd be able to reference each field using Handlebars using dot-notation to get to the nested properties: