{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Universal email template for Craft CMS
Posted on Aug 16, 2020 by Piotr Pogorzelski

Universal email template for Craft CMS

Email template on github gists
Simple email template built with Twig that can be used for any kind notifications.

Creating email templates is a task that can quickly erode the sanity of developer. To make messages display correctly on a vast plethora of email clients, you need to be aware of all their idiosyncrasies and use techniques that are long forgotten in the world of frontend development - for example, table-based layouts.

That's why it is often preferable to use premade templates - I have decided to use Postmark Transactional Email Templates as a base for universal email Template for Craft CMS. It has a minimalistic design and is responsive - when displayed on a mobile device, it will fit a screen. I utilize it mainly for contact form submissions and any other notification messages.

Email template structure #

Since template source code contains tons of clutter, I will not paste full code into this article - you need to visit this github gist to obtain it. Here's how example message made with universal email template looks like:

The template is composed of three main parts - header, content box and footer. These parts are available as blocks that your message can inject content into. There is also preview block - there, you can put the text that will show up in the inbox of most email clients, below subject.

The content area of the message contains three elements - text, title and call to action button, which of course can be used more than one time if needed. While text is just text, title and button are Twig macros defined at beginning of email template. Here's how to create a message that looks like one on the screenshot above:

{% set buttonColor = '#2980b9' %}
{% import 'email_layout' as m %}
{% extends 'email_layout' %}

{% block preview %}
Urgent message, be sure to open it.
{% endblock %}

{% block header %}
CRAFTSNIPPETS.COM
{% endblock %}

{% block footer %}
Click HERE to unsubscribe
{% endblock %}

{% block content %}
{{m.title('This is important message')}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo dignissimos, nostrum quam illo unde quaerat facere perspiciatis. Voluptatum, amet nesciunt explicabo! Id nam vitae distinctio repudiandae voluptatibus ducimus.

{{m.button('Call to action', 'http://website.com', buttonColor)}}
{% endblock %}

As you can see, message template code looks pretty much like regular entry template, which uses extends to inject content into blocks of base template. It's worth noting that first we declared buttonColor variable (if we didnt, button color would default to red). We did that before using extends, so thanks to template interhirence this variable will be injected into base template - which has CSS declaration of button color:

.button {
  background-color: {{buttonColor}};
  border-top: 10px solid {{buttonColor}};
  border-right: 18px solid {{buttonColor}};
  border-bottom: 10px solid {{buttonColor}};
  border-left: 18px solid {{buttonColor}};
}

This variable is also passed directly to button macro - macros are isolated from the variable scope and need all of their variables passed into them.

But why do we actually need to pass this variable into a macro? It's because all CSS styles are placed in regular <style> tag in base template AND later inlined - added to every HTML element inside style attribute. This means that every styling used by email template appears in multiple places. Such a solution is used because some email clients prefer their styles inlined, and some in separate <style> tag.

Going further #

If you want to create your own email template, you can use MJML to make your job easier. It's HTML-like syntax which is later compiled into ready to use HTML code.

If you would rather work with HTML directly, Style inliner Craft plugin might be useful to you. Thanks to it, you will be able to declare CSS styles in single <style> tag - the plugin will automatically inline them in all HTML elements of the template. So, no need to declare every CSS in multiple places.


TAGS:
#twig
If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Quick links for this article:
Email template on github gists
Articles on blog:
  • User account management with Craft CMS
  • Frontend testing for Craft CMS websites with Codeception and Cypress
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


User account management with Craft CMS

Frontend testing for Craft CMS websites with Codeception and Cypress

Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Copyright ©2023 Piotr Pogorzelski