Email

How To Setup Email Templates

Since version 0.13 email templates can be added directly from the dashboard. Templates can either be pure HTML or MJML. The preferred format for email templates is MJML since it makes it trivial to create complex, beautiful email templates.

Creating a template

{% load mjml account i18n static %}
{% block subject %}Contact Form Message{% endblock %}
{% block html %}
{% mjml %}
    <mjml>
      <mj-body>
        <mj-section>
          <mj-column>
            <mj-image align="center" src="{{ site_url }}{% get_static_prefix %}images/logo.png"
              width="40px"></mj-image>
            <mj-text align="left" font-size="16px" font-weight="400" font-family="open Sans Helvetica, Arial, sans-serif"
              padding-left="25px" padding-right="25px" padding-bottom="30px" padding-top="50px">
              Hi admin,
            </mj-text>
            <mj-text>
              Message from {{full_name}}, {{email}}
            </mj-text>
            <mj-text>{{ message }}</mj-text>

            <mj-button align='left' background-color="#4f46e5" color="white" href="{{ domain | safe }}">Dashboard
            </mj-button>
            <mj-divider border-width="1px" border-style="solid" border-color="#eef2ff"/>
            <mj-text>Thank you for using {{ site_name }}.</mj-text>
          </mj-column>
        </mj-section>
      </mj-body>
    </mjml>
  {% endmjml %}
{% endblock html %}

Notes

Creating the template itself is straightforward, but there are three simple rules to observe.

  1. {% load mjml account i18n static %} - you can add/use any of the django template tags that would be available in your normal templates.
  2. {% block subject %}Contact Form Message{% endblock %} - Keep the subject block out of the mjml block. The subject text must be plain text.
  3. {% block html %} {% mjml %}...{% endmjml%}{% endblock html %} - Wrap the mjml block in with the html block. This is necessary as the starter kit still uses django templated email under the hood. This may change in future versions.

Styling

MJML tags can be styled directly by using attributes. For example, <mj-button align='left' background-color="#4f46e5"..> to give the button a different background. You can see the mjml page for more inspiration.