RailsCasts Pro episodes are now free!

Learn more or hide this

Sending HTML Email

#312 Sending HTML Email

Jan 02, 2012 | 5 minutes | Tools, Mailing
HTML email can be difficult to code because any CSS should be made inline. Here I present a few tools for doing this including the premailer-rails3 and roadie gems.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (41.6 KB)
  • mp4Full Size H.264 Video (16 MB)
  • m4vSmaller H.264 Video (9.19 MB)
  • webmFull Size VP8 Video (8.07 MB)
  • ogvFull Size Theora Video (23.3 MB)
Avatar
Bill Horsman almost 13 years ago

I wrote my own gem to do this a few weeks ago, inline_styles_mailer, but it looks like I've got a lot to learn by reading how premailer and roadie work. Thanks Ryan.

Avatar
Radoslav Stankov almost 13 years ago

Good episode. Aslo is good to mention the MailView plugin ( https://github.com/37signals/mail_view ) which is really nice way to test without sending the html mails.

Avatar
Joe Van Dyk almost 13 years ago

We just went through the painful process of sending fancy html emails on Rails 3.1 a month ago. The CSS in our emails even have media queries so they look right on mobile devices. We used premailer-rails3, but it needed a lot of patching before it worked properly.

Our post about it is here: http://joevandyk.com/post/12980661035/fancy-html-emails-with-rails-3-1

Avatar
Onno Faber almost 13 years ago

Does not seem to work in production like this (I'm precompiling the assets).

Avatar
Onno Faber almost 13 years ago

Ok, for anyone interested, i got it working now. It cannot find the fingerprinted stylesheet in production (don't know why), so i'm setting the tag manually to point to the non-fingerprinted file.

Avatar
Swami Atma almost 13 years ago

Did you add the CSS stylesheet to the list of assets to precompile in the production environment file?

Avatar
ik almost 13 years ago

I'm using the Mail project to send emails:
https://github.com/mikel/mail

Avatar
Brian Armstrong almost 13 years ago

Great episode, thanks!

Has anyone seen a good way to automatically generate the plain text emails from the html emails?

It always seemed a bit redundant to maintain both. I imagine they wouldn't look perfect but might be good enough if the primary goal was just to improve email deliverability.

Thanks Ryan!

Avatar
Joe Van Dyk almost 13 years ago

premailer can generate plain-text emails.

Avatar
Andrew Shatnyy almost 13 years ago

If I may ask how did you set up your environment variables?
I'm on rails 3.1.3 and I can't put my head around how to do that in one place for many env like you have ENV['var']

Avatar
Jefferson Queiroz Venerando almost 13 years ago

In your shell:
export VAR=value

Or...

echo '\nexport VAR=value' >> ~/.bash_profile
then
source ~/.bash_profile

Avatar
Jeff Shantz almost 13 years ago

+1 to Andrew's request. I would love to see (and would pay for) some good tutorials on setting up server infrastructure for Rails, including monitoring with a tool like Monit/God (without having the monitoring tool crash or leak memory), and storing passwords securely.

Avatar
Philipe almost 13 years ago

Thanks for the screencast! Glad to see my gem here.

One thing to note about premailer-rails3 is that it will automatically create a text version of the HTML email.

Avatar
Zaid almost 13 years ago

We bundled together premailer with some Mailchimp templates at Sandglaz and use that for our newletters. It is published as the Maktoub gem at https://github.com/Sandglaz/maktoub.

Contributions and improvements are welcome.

Avatar
Kira Corina over 11 years ago

Thank you Ryan! Good RailsCast as always.

Avatar
Allen Chun over 11 years ago

Hi I just want to ask on how to configure live email account by Microsoft on

My Gmail config that is working

config/environments/development.rb 
config.action_mailer.default_url_options = { host: "example.com" }
config.action_mailer.raise_delivery_errors = true
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  address: "smtp.gmail.com",
  port: 587,
  domain: "localhost",
  authentication: "plain",
  enable_starttls_auto: true,
  user_name: ENV["GMAIL_USERNAME"],
  password: ENV["GMAIL_PASSWORD"]
}

how about the live email account configuration that is similar with gmail smtp configuration?
example
username: myemail@live.com
password: SamplePassword

Thanks!

Avatar
Gleb Mazovetskiy over 11 years ago

There is Rails Email Preview, a gem I wrote for previewing and editing emails, with i18n and premailer support!

screenshot

Avatar
Scott Goci about 10 years ago

Hey Ryan,

Just wanted to mention you misspelled the gem name in the ASCIICast:

You put:

ruby 
gem 'hrpicot'

It should be:

ruby 
gem 'hpricot'

(Note the switch of hrp with hpr)

Great tutorial as always!

Avatar
arav99 over 9 years ago

Hello Friends i know i m new here but i m sharing an html email Composer with mysql database php code here and i hope this may be helpful for anyone

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "">http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Compose HTML Email

<?php

$id=secureget('id');

$uinfo = mysql_query("SELECT * FROM mydata WHERE id=$id");
$guinfo = mysql_fetch_array($uinfo);
$uname = $guinfo['user'];
$email = $guinfo['email'];

if (isset($_REQUEST['subject'])&&(isset($_REQUEST['msg'])))
//if "email" is filled out, send email
{
//send email
$subject = $_REQUEST['subject'];
$team = $_REQUEST['team'];
$name = $_REQUEST['name'];
$foot = 'Best regards,Company '.$team.' '.$name.'
Support Email - email@email.com

Copyrights [c] 2015 Company
';
$to = ''.$email.'';
$mail = 'Company '.$team.'c@mail.com';

// 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";

// Create email headers

$headers .= 'From: '.$mail."\r\n".
'Reply-To: '.$mail."\r\n" .
'X-Mailer: PHP/' . phpversion();
$headers .= 'BCC: ' . implode(', ', $recipients) . "\r\n";

$message1 = $_REQUEST['msg'];
$message .= ''.$message1.'
'.$foot.'';

$do = mail($to, $subject, $message, $headers);
if($do){
echo "Sent...";
}
else {
echo 'Failed!';
}
}

Read full Code and article here http://quickwebinfo.com/blog/2015/08/how-to-compose-a-html-email-using-mysql-database-php

Avatar
arav99 over 9 years ago

Hello Friends i know i m new here but i m sharing an html email Composer with mysql database php code here and i hope this may be helpful for anyone

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "">http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Compose HTML Email

<?php

$id=secureget('id');

$uinfo = mysql_query("SELECT * FROM mydata WHERE id=$id");
$guinfo = mysql_fetch_array($uinfo);
$uname = $guinfo['user'];
$email = $guinfo['email'];

if (isset($_REQUEST['subject'])&&(isset($_REQUEST['msg'])))
//if "email" is filled out, send email
{
//send email
$subject = $_REQUEST['subject'];
$team = $_REQUEST['team'];
$name = $_REQUEST['name'];
$foot = 'Best regards,Company '.$team.' '.$name.'
Support Email - email@email.com

Copyrights [c] 2015 Company
';
$to = ''.$email.'';
$mail = 'Company '.$team.'c@mail.com';

// 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";

// Create email headers

$headers .= 'From: '.$mail."\r\n".
'Reply-To: '.$mail."\r\n" .
'X-Mailer: PHP/' . phpversion();
$headers .= 'BCC: ' . implode(', ', $recipients) . "\r\n";

$message1 = $_REQUEST['msg'];
$message .= ''.$message1.'
'.$foot.'';

$do = mail($to, $subject, $message, $headers);
if($do){
echo "Sent...";
}
else {
echo 'Failed!';
}
}

Read full Code and article here http://quickwebinfo.com/blog/2015/08/how-to-compose-a-html-email-using-mysql-database-php