4 Easy Steps to Configure Drupal to Send HTML Emails
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.
Step 1: Install Required Modules and Update Configuration
Here is a tutorial on how to install modules for Drupal 7.
Go to admin/modules and verify the following modules are enabled.
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.
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.
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.
- 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.