Email templates allow you to create custom templates for the emails that Formie sends out. These can be used similar to a "wrapper" around the content body of the email.
Let's take an example template:
<!doctype html>
<html>
<head>
<title>Thanks for your email</title>
</head>
<body>
<h1>Thanks for your email enquiry. The below email was sent from {{ siteName }}.</h1>
{{ contentHtml }}
</body>
</html>
Here, we've created a new template - let's name this file index.html, and place this in the following path templates/_emails/index.html.
Then, navigate to Formie → Settings → Email Templates and select New Template. Give it an appropriate name, and enter _emails in the HTML Template field. This is because we want to set the templates to a folder that contains all email-related templates.
You'll notice there's a Copy Templates field. You can use this to copy the default template into the provided folder to get off to an even quicker start to customise the template.
Your templates have access to the following variables:
| Variable | Description |
|---|---|
notification | A Notification object, for current email notification. |
submission | A Submission object, for what the email is notifying about. |
form | A Form object, for what the email is notifying about. |
contentHtml | The HTML generated from the Email Content field for the email notification. |
Let's cover the contentHtml variable next.
You may have noticed the Email Content rich text field when editing an email notification. Here, you can provide content for all manner of things, including static rich text, variables and more.
As such, for this email template, you have access to a contentHtml variable. This is the HTML generated by the content provided in the Email Content field for the notification.
For our example, let's go ahead and edit an Email Notification for a form. If you haven't added one yet, go ahead and create a new one. For the Email Content field, use the variable select field (plus icon with a circle) and select All Form Fields. This is a dynamic tag that outputs the content of all the fields' content. Much easier than having to loop through them!
Now, the email delivered will look something like this:
Subject: Thanks for your email
Body:
Thanks for your email enquiry. The below email was sent from Craft Test Site.
**First Name:**
Peter
**Last Name:**
Sherman
**Email Address**
[email protected]
**Message**
Just wanted to say, I love the new website!
Don't forget, Formie will automatically generate a plain-text version of your HTML emails.
In addition to providing a template for the overall email, you can customise the content for each field.
Be sure to check out Custom Templates which is largely the same process, and applies to overriding email field templates.
Keeping with the same example, we can create templates for individual fields in a fields folder. So our template folder would look like:
_emailsemail.htmlfieldsemail.htmlname.htmlsingle-line-text.html...Here, we've provided template override files for email, name and single-line-text fields. Formie will use the content of these files to render the HTML for the field in an email.
Don't forget, you don't need to override all field templates, just the ones you want to alter.
For example, you might want to alter the content of an email address field. Take Formie's example HTML:
<p>
<strong>{{ field.name }}</strong><br>
{{ value }}
</p>
{# Would generate... #}
<p>
<strong>Email Address</strong><br>
[email protected]
</p>
We can change this to:
<i>{{ field.name }}: </i>{{ value }}<br>
Your templates have access to the following variables:
| Variable | Description |
|---|---|
field | A Field object, for the field instance this template is for. |
submission | A Submission object, for what the email is notifying about. |
name | The handle of the field. |
value | The content for this field, stored on the Submission. The format of this will depend on the field's content model. |
options | A collection of additional options, available for some fields. |