Sending HTML emails with Drupal

on

I’ve set up a few sites that send out email notifications using Rules, commonly for sending out a notification when a user adds a comment to the site so that a site administrator can review it and approve or remove it. The default plain text format for these emails is a little lacklustre.

It would much better is we could send these email in HTML, like this:

As well as just looking nicer there are a few benefits in sending emails as HTML. For one thing, they can be styled and images can be displayed. Also, it’s easier to track open rates and clicks if the email is HTML.

Initial Setup

For this example I’m going to be looking at sending HTML emails with Rules. I won’t be going into a lot of detail of how Rules works. However, these techniques can be used 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:

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

Configure Mail System

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

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

Set up your 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 you emails. For this example I’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.

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

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

This will allow us to use this template for each email sent regardless of the main body text.

mail.css

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

Send HTML Emails using Rules

Mime Mail integrates beautifully with Rules. The module implements two 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.

I won’t go through the process of creating a basic rule. I’ll 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.

As you can see, sending HTML emails from Drupal is not that hard. However, if you’re emails are still being sent as plain text and you have a lot of modules installed start reviewing your existing setup. Occasionally, a module might change some mail setting that prevents an email from being sent as HTML.

Troubleshooting

My HTML tags are being stripped from the email!

Make sure that the text format selected in E-mail format under Configuration > Mime Mail allows the tags or use the Full HTML format.

Leave a Reply

Your email address will not be published. Required fields are marked *