17-Jun-2026 | v7.10.7 | All new article
Passing Data to Email Notifications
Often, we want to display relevant data points to the user or admin, in resulting email workflow notifications or autoresponders, based on the form that was submitted.
Typically, all the data submitted in the form is simply listed out in the email notifications, by looping through the Liquid data object in full. But perhaps we don’t want, or need, all that clutter of information, and instead just want to incorporate a few data points into the email message. Or, we want to use some captured data to display specific items, such as the Event they just registered for, or a product they were enquiring about.
Let’s use the example of a site listing their services via a Custom Module, and on the detail pages for these services, they have an enquiry form.
Form Setup
The form captures the Service’s item ID in a hidden field so that the site owner knows which Service the customer is enquiring about.
The Liquid code used in the form's hidden input value calls in the current item’s ID. But since we are working within the Form layout object, we need to extend out into the parent item scope (outside of the Form layout and into the Service item’s detail layout):
<input type="hidden" id="ServiceItemID" name="ServiceItemID" value="{{this.parent.id}}">
Email Notifications
Now, when the form is submitted, the Service item ID will be captured in the formSubmissionData.
But this alone won't be very helpful in letting the site owner know which Service the customer is enquiring about. So, from this ID we can look up the item directly in the email layout and display any information we like from that item’s data, such as the name, image, description, etc.
Workflow Notification
In the Workflow Notification email, we can do something like this:
{% component source: "Services", layout: "", filterBy: "Id", filterValue: "{{ this.formSubmissionData.fields.custom.serviceItemId.value }}", limit: "1", collectionVariable: "serviceData", type: "module" %}
<p>You have a new enquiry from <strong>{{ this.formSubmissionData.fields.system.firstname.value }}</strong></p>
<p>For item <strong>{{ serviceData.items[0].name }}</strong> (ID: {{ this.formSubmissionData.fields.custom.serviceItemId.value }})</p>
<h4>Submission details:</h4>
<table>
{% for f in this.formSubmissionData.fields.all %}
<tr>
<td>{{f.name}}:</td>
<td>{{f.value}}</td>
</tr>
{% endfor %}
</table>
Email Autoresponder
And to nicely display to the user the Service they enquired about, along with a record of their enquiry, in the Autoresponder email. But one difference here is that we’re using the item ID to render the actual Service item via a component tag and custom list layout.
Email Autoresponder:
<p>Hello {{ this.formSubmissionData.fields.system.firstname.value }}</p>
<p>We've received your enquiry, which is listed below for your records, for the following service:</p>
{% component source: "Services", layout: "Email List", filterBy: "Id", filterValue: "{{ this.formSubmissionData.fields.custom.serviceItemId.value }}", limit: "1", type: "module" %}
<hr>
<p>Your enquiry:</p>
<p>{{ this.formSubmissionData.fields.custom.enquiry.value }}</p>
<hr>
<p>We'll be in touch soon...</p>
<p>Regards,<br />Max</p>
List Layout (built for email display):
<table>
<tr>
<td width="20%">
<img src="{{this.parent.siteURL}}{{this['ListImage']}}?height=180" alt="{{this['Name']}}">
</td>
<td width="2%"> </td>
<td width="78%">
<h3>{{this['Name']}}</h3>
<p>{{this['ListDescription']}}</p>
</td>
</tr>
</table>
As we can see above, any data submitted with the form can be referenced from the formSubmissionData object using Liquid, and we can use that data in various ways, including to populate a component tag to render even more site data.
I’m sure you’ll be able to use this concept in many other creative ways to improve your email notifications!
