How to send HTML/CSS emails?

php css email xhtml

20,970

Solution 1

As for direct format, I've always done inline CSS styling, however I use SwiftMailer (http://swiftmailer.org/) for PHP5 to handle email functionality and it has helped immensely.

You can send multipart messages with different formats so if the email client doesn't like the HTML version, you can always default to the text version so you know at least something is getting through clean.

In your "views" folder, you can set apart routes for different email formats (I use smarty too, hence the .tpl extension). Here's what a typical SwiftMailer::sendTemplate() function would look like when you're setting up the templates:

 $email_templates = array('text/html' => 'email/html/' . $template . '.en.html.tpl',
                        'text/plain' => 'email/text/' . $template . '.en.txt.tpl');

foreach ($email_templates as $type => $file) {
  if ($email->template_exists($file)) {
    $message->attach(new Swift_Message_Part($email->fetch($file), $type));
  } elseif ($type == 'text/plain') {
    throw new Exception('Could not send email -- no text version was found');
  }
}

You get the idea. SwiftMailer has a bunch of other good stuff, including returning "undeliverable" addresses, logging delivery errors, and throttling large email batches. I'd suggest you check it out.

Solution 2

You need to add a header that says the content is HTML. When you use the mail() function, one of the headers should be: Content Type: html/text (That might not be the 'exact' header).

Let me find you an example: (From the php.net/mail page)

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mary <[email protected]>, Kelly <[email protected]>' . "\r\n";
$headers .= 'From: Birthday Reminder <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";
$headers .= 'Bcc: [email protected]' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);

Solution 3

To add to the above example, (in case you don't know PHP very well), you just have to build the "email" using the variables: to, subject, message, and headers

Let me know if you want to know how to create a form to fill and run this PHP script, otherwise, you can simply enter everything in this file manually, save as a PHP file, throw it up on a server that supports PHP, and navigate to the file in your browser.

Here's the code:

// Setup recipients
$to = '[email protected]' . ',' // comma separates multiple addresses
$to .= '[email protected]';

// subject
$subject = 'PHP Email Script - Test Email';

// message (to use single quotes in the 'message' variable, supercede them with a back slash like this-->&nbsp; \'
$message = '
<html>
<head>
  <title>PHP Email Script</title>
</head>
<body>
  <p style="background: #ccc; width: 100%;">Test Email Script</p>
</body>
</html>
';


// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mary <[email protected]>, Kelly <[email protected]>' . "\r\n";
$headers .= 'From: Birthday Reminder <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";
$headers .= 'Bcc: [email protected]' . "\r\n";

// Send the email
mail($to, $subject, $message, $headers);

20,970

Author by

James Skidmore

I'm a web developer/designer in Dallas, TX. I primarily work with PHP on the Symfony framework, along with MySQL, jQuery, Objective-C (for iPhone development), and of course XHTML/CSS.

Updated on July 09, 2022

Comments

James Skidmore almost 2 years

Most email clients have problems reading CSS in HTML emails (including Gmail and Hotmail). I often use this service to convert my HTML/CSS to proper email format so that everything looks normal on the user's end. Basically what it does is convert all CSS to inline styles:

http://premailer.dialect.ca/

Do any of you have any other methods for sending CSS in your HTML emails? I automatically generate the emails, and due to some restrictions, I can't modify the the inline styles.