Drupal HTML emails

Drupal HTML emails

Posted on 30 March 2016 by Robert

A common feature on our Drupal websites is the sending of notification emails. These are usually triggered by events such as:

  • A user joins the site
  • An article comment is posted
  • An ecommerce order is placed
  • e.t.c

By default these emails are sent in plain text which, while functional, is a little lacklustre.

It would much better if we could send formatted emails in HTML, like this:

Using HTML emails means we can style the emails to match site branding and include images. Additionally  it's easier to track open rates and clicks if the email is HTML.

Setting up HTML emails

Here’s how we can set up a site to use HTML emails. We’ll be going over emails sent by the Rules module. We won’t be going into a lot of detail of how Rules works, however this example can be used as a guide for any email sent out by your site

Required Modules

You will require the following modules so download and enable them if you don’t have them already:

Once everything has been downloaded, enable the following modules if you haven’t already:

  • Mail System
  • Mime Mail
  • Mime Mail CSS Compressor
  • Rules
  • Rules UI

Mail System

Go to Configuration > System > Mail System and ensure that MimeMailSystem has been selected in the Site-wide default MailSystemInterface class and Mime Mail module class drop-down list.

Mime Mail

Now, go to Configuration and click on Mime Mail. On this page you can change a few of the module's configuration options. The one we're interested in is the E-mail format.

Change it from Plain text to either Filter HTML or Full HTML. This means that when emails are sent they'll be filtered by either the Filter HTML or Full HTML text format.

At this point, you should be able to send HTML emails. If certain HTML tags are being filtered out, make sure that the text format selected in E-mail format allows the tags or use the Full HTML format.

Adding a HTML email template

There are two important files used by Mime Mail to style HTML emails:

  • mimemail-message.tpl.php contains the HTML template of your emails
  • mail.css contains the styles to be used in the template

You may already have a HTML template set up for your emails. For this example we’ll be using Lee Munroe’s Really Simple Responsive HTML Email Template.

mimemail-message.tpl.php

Create a PHP file in your theme’s directory called mimemail-message.tpl.php to override the default template and paste in your HTML email template. You’ll need to make a few alterations to it.


   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
            <meta name="viewport" content="width=device-width" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Really Simple HTML Email Template</title>
        
            <?php if ($css): ?>
                <style type="text/css">
                <!--
                    <?php print $css ?>
                -->
                </style>
            <?php endif; ?>
        </head>
    
        <body bgcolor="#f6f6f6">
            <?php print $body ?>
        </body>

    </html>

Replace any links to your stylesheet or inline styles with this section at the top.


   <?php if ($css): ?>
        <style type="text/css">
        <!--
        <?php print $css ?>
        -->
        </style>
    <?php endif; ?>

This will be replaced with the styles in your mail.css file when the email is generated.

Replace the main content area of your email template with


    <?php print $body ?>

This will allow us to use this template for each email sent and we’ll only need to set the main body text.

mail.css

Place all the styles to be used in your HTML email in a stylesheet named mail.css in your theme directory. This will be automatically detected by Mime Mail when your emails are generated.

Sending HTML Emails using Rules

Mime Mail integrates really well with the Rules module. There are two new custom actions: Send HTML e-mail and Send HTML mail to all users of a role. As you may have guessed, both actions allow you to send emails as HTML.

We won't go through the process of creating a basic rule and assume you've already created one. So go and edit a rule that will send an email.

Click on Add action and select Send HTML e-mail or Send HTML mail to all users of a role from the drop-down list.

The Key field is a machine name for your email.

In the Body field enter the HTML you took out of the template and modify it to include your content.

Don’t forget to enter a plain text alternative message as well.

Sending HTML emails from PHP

You can send HTML emails directly from PHP in your custom modules since Mime Mail overrides Drupal’s default mail handling.

In your code invoke drupal_mail by using something like this


…

$body_html = "<p>This is my <strong>HTML</strong></p>";
$email = 'me@email.com';

$params = array(
    'subject' => 'My email subject',
    'body' => $body_html,
);

drupal_mail('mymodule', 'an_email_key', $email, language_default(), $params);

Then in your module implement hook_mail


/**
* Implements hook_mail();
*/

function mymodule_mail($key, &$message, $params) {
    switch ($key) {
       case 'an_email_key':
           $message['subject'] = $params['subject'];
           $message['body'][] = $params['body'];
           break;
    }
}

That’s all there is to it! Sending HTML emails is a simple yet effective addition to any Drupal site that looks a lot more pleasing and professional in your client’s inbox.

Trouble sending emails with SMTP

If you’re finding that you can’t send email when previously you were using the SMTP module of similar, try the following:

  1. Enable Mail System, SMTP and a HTML module (HTML Mail or MIME Mail)
  2. Go to admin/config/system/mailsystem
  3. Hit New Class
  4. Select class HTMLMailSystem (HTML Mail) or MIMEMailSystem (MIME Mail) for format() method
  5. Select class SmtpMailSystem for mail() method (DefaultMailSystem is drupal's method, with php mail)

  6. Save
  7. Select the new class created (ie, HTMLMailSystem__SmtpMailSystem) for module/setting intended (ie, Site-wide default MailSystemInterface class for all general mails) on Mail System Settings

  8. Save

Problems with 'Message body empty'

If you are receiving the error 'message body empty', check the 'Link images only' setting in Configuration > System > Mime Mail.

Tagged In

Like what you're reading?

If you'd like professional support to kick-off your digital marketing strategy or if you have a project brief you're ready to share we'd love to hear from you...

Get in touch