Email Templates

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.

You may have noticed the use of a contentHtml variable in our templates - we'll cover that next.

Combining with Notification Content #

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 a 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**
psherman@wallaby.com

**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.

Custom Templates

In addition to providing a template for the overall email, you can customise the content for each field.

Be sure to check out Overriding Field 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:

  • _emails
    • email.html
    • fields
      • email.html
      • name.html
      • single-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>
    psherman@wallaby.com
</p>

We can change this to:

<i>{{ field.name }}: </i>{{ value }}<br>

Available Template Variables #

Your templates have access to the following variables:

VariableDescription
fieldA Field object, for the field instance this template is for.
submissionA Submission object, for what the email is notifying about.
nameThe handle of the field.
valueThe content for this field, stored on the Submission. The format of this will depend on the field's content model.
optionsA collection of additional options, available for some fields.

Get started with Formie

Available for Craft 3. Get it from the plugin store.