Up to now our Webform has been sending rather boring e-mails in plain text format. By empowering our site with the ability to send HTML e-mails we can create a professional impression by sending out e-mails that have color, varying font sizes, and/or embedded images.
Let's have a look at the steps we need to follow to have our site send pretty HTML e-mails using the Mail System and Mime Mail contributed modules.
Let us go to the project home page to download and install the modules from http://drupal.org/project/mailsystem.
We have several steps to negotiate on our way to achieving HTML e-mails being sent from Webform:
- Firstly we need to enable Mail System, Mime Mail, and Mime Mail CSS Compressor.
- Next we need to configure Mime Mail to send e-mails in HTML format. Let's navigate to our Configuration menu option and select Mime Mail under the System heading.
- We want to check the Include site style sheets option and ensure that the Send plain text email only option is enabled.
- Let's also select Filtered HTML for E-mail format and Current for Theme to render the emails.
- Finally, we need to ensure that Webform is configured to send HTML e-mails. To effect this let's visit the Configuration menu and click on Webform settings.
- Select HTML at Format (under Default e-mail values) and select the Send all e-mails in the default format option at Format override.
- The following is the first plain text version of the e-mail, followed by the same e-mail sent with HTML enabled.
- In step 4, we configured Mime Mail to use the current theme when applying CSS to our HTML e-mails. The effect of this setting is for anonymous users to receive e-mails with our default theme, whereas an administrative user will cause e-mails to be sent out using the websites, administrative theme, for example, Seven. The following screenshot shows the e-mail themed with the test site's default Bartik theme:
The e-mails sent by Webform will now be processed by the Mime Mail module and sent in HTML format. We have configured Mime Mail to use our site theme CSS files to style the e-mails, so there will be consistency in presentation between the e-mails and the Webforms on our site. We could, alternatively, place a mail.css file in our default theme directory to style our e-mail messages instead.
The Mime Mail module sends the e-mails as multipart messages which includes both the HTML version and a plain text version of the e-mail content. This means that e-mail clients that are not configured (or are unable) to render HTML e-mails will show the e-mail content in plain text.
As the HTML image tag is an allowed Webform tag we may now navigate to our Webform's e-mail configuration utility and let our imaginations run riot. We may want to consider adding a WYSIWYG (What You See Is What You Get) editor to our site to avoid having to code in HTML ourselves.