The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

configure Drupal to send html emails banner

Learn how to configure Drupal to send out HTML emails. Also, learn how to add images and colours to email in order to enhance your user’s experience.

We are going to use mail system and mime mail in this tutorial. I will try to keep things simple. Four steps to configure Drupal to send HTML email.

 

Step 1: Install Required Modules and Update Configuration

  1. https://www.drupal.org/project/mailsystem
  2. https://www.drupal.org/project/mimemail

Here is a tutorial on how to install modules for Drupal 7.

Go to admin/modules and verify the following modules are enabled.

  • Mail System
  • Mime Mail
  • Mime Mail CSS Compressor

Go to admin/config/system/mimemail and make sure the E-mail format is set to Full HTML. You can leave rest settings to default.

 

Step 2: Add Custom CSS to Your Theme Directory

Create a new file named mail.css under your custom theme directory, so it looks like this:

site/all/theme/YOUR_CUSTOM_THEME/css/mail.css

The Mime Mail CSS Compressor module will scan this CSS file and convert them to inline styles for your HTML email.

Drupal Development banner image banner

Step 3: Add an HTML Email Template to Your Theme Directory

Create a mail directory under your custom sub theme templates directory.

copy mimemail-message.tpl.php from sites/all/modules/contrib/mimemail/theme directory and put it here.

The final result should look like this:

site/all/theme/YOUR_CUSTOM_THEME/template/mail/mimemail-message.tpl.php

If you want to have a config HTML template per module, read the mimemail README.txt file. Their documentation is pretty good.

Note: depends on your site setup, you might not have contrib directory in your file path.

 

Step 4: Update Your Default Mail Template and Test It.

You have to update your Drupal default mail templates, otherwise, all content will be displayed in a single paragraph.

Go to admin/config/people/accounts, at the bottom of this page and you will find all the default drupal mails body, use the HTML tags to format them.

If you have Drupal Commerce installed, you might want to update all the rules that are sending out emails.

That’s it.

 

Optional Steps: Use Tables in Your Template

Using Tables is still the best way to create an  email layout. You can get a table template from MailChimp. Insert the table structure to mimemail-message.tpl.php form Step 3.

Other Tips:

  • Try to keep HTML email as simple as possible.
  • Your email should still be readable even if images arent loaded.
  • It will be a good idea to include other style sheets in your mail.css, so you don’t have to style things twice.
  • If you want to add your email template to a third party service, it will be a good idea to copy your HTML source from a web mail service, like Google, since all CSS has already been converted to in inline style for you. You can do that with Firebug or devel tools.

Need help with a Drupal project? Our Cheeky Monkey Media Drupal development team works with other agencies that need some extra hands on deck for big projects. We also offer Drupal Support and Drupal Migration services.

 

Posted in Drupal Planet