Jun 21, 2019 in Drupal 8, Snippets

One of the biggest flaws in drupal is the disability to do something easy as sending html emails out-of-the-box. In drupal 8 it is already slightly better, but you would need to know some things. This tutorial shows you how.

Get started

Download and enable mailsystem and swiftmailer:

composer require drupal/mailsystem
composer require drupal/swiftmailer

At /admin/config/system/mailsystem configure the mailsystem:

  • Set 'Default formatter' and 'Default sender' to Swiftmailer
  • Set 'Theme to render the emails' to your custom theme

At /admin/config/swiftmailer/messages configure swiftmailer:

  • Set 'Message format' to html
  • Disable 'Respect provided e-mail format.'

In your custom theme, add a file named swiftmailer.html.twig in templates/mail:

<style type="text/css">
 td {
   font-family: Arial, sans-serif;
   font-size: 12px;
   overflow-wrap: break-word;
   word-wrap: break-word;
   color: #333;
 }
 a {
   color: #000;
 }
</style>
<table width="100%" cellpadding="20" cellspacing="0" bgcolor="#999999">
  <tr>
    <td align="center" valign="top">
      <div style="padding:40px 0">
        <table width="600" cellpadding="0" cellspacing="0">
          {% if site_logo %}
            <tr>
              <td align="left" valign="top" style="padding: 20px 0">
                <a href="{{ base_url }}"><img src="{{ site_logo }}" alt="{{ site_name }}" border="0"/></a>
              </td>
            </tr>
          {% endif %}
          <tr>
            <td align="left" valign="top" bgcolor="#ffffff" style="padding:20px">
              <h3>{{ subject }}</h3>
              {{ body|nl2br }}
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

Clear caches now. Go to /admin/config/swiftmailer/test and send a test e-mail. This should now be in html. Also, because you disabled the 'Respect provided e-mail format.' all custom e-mails will be in html as well. Enjoy!