EDIT: As Cheekysoft points out in the comments, this code as written is not secure and would allow a malicious user to send any arbitrary email content through your app.
In other words, do not use the code below as-is.
I ended up using a combination of jQuery and PHP to get the job done.
- On my survey page I added a small form to collect the user's email address.
- I used jQuery to POST this form and the contents of the page's wrapper tag to a PHP script.
- In that PHP script, I used Emogrifier to add in-line tags to the HTML passed in by jQuery using a stylesheet as reference (because most email clients, including Gmail, don't allow using linked styleheets).
- Then (still in the PHP script) I sent the actual email using SwiftMailer (thanks for pointing me towards it, Marc B) and a Google Apps account's SMTP functionality.
Works great!
In case it will help anyone in the future, here's the PHP script (sanitized):
<?php
/***** INITIALIZE *****/
/* Import libraries */
require_once 'swiftmailer/swift_required.php';
require_once 'emogrifier/emogrifier.php';
/* Email stylesheet location */
$stylesheet = 'http://example.com/email.css';
/* SMTP Account Info */
$smtpusername = "sender@gmail.com";
$smtppassword = "senderpassword";
$smtpserver = "smtp.gmail.com";
$smtpport = 465;
$smtpsecurity = "ssl";
/***** RETRIEVE THE DATA *****/
/* Retrieve the passed-in variables */
/* HTML for the email body */
$html = $_POST['content'];
/* Recipient mail address */
$address = $_POST['address'];
/* Recipient name */
$name = $_POST['name'];
if ($name==NULL || $name=="") {
$name = "You";
}
/***** MODIFY THE HTML *****/
// Get stylesheet contents as a string
$css = file_get_contents($stylesheet);
// Convert stylesheet into in-line styles using Emogrifier - http://www.pelagodesign.com/sidecar/emogrifier/
$converter = new Emogrifier($html, $css);
$content = $converter->emogrify();
/***** CREATE THE MESSAGE *****/
/* Create the message */
$message = Swift_Message::newInstance()
//Give the message a subject
->setSubject("Results for $name")
//Set the From address with an associative array
->setFrom(array('sender@gmail.com' => 'Sender Name'))
//Set the To addresses with an associative array
->setTo(array($address => $name))
//Give it a body
->setBody($content, 'text/html')
;
/***** SEND THE EMAIL *****/
//Create the Transport
$transport = Swift_SmtpTransport::newInstance($smtpserver, $smtpport, $smtpsecurity)
->setUsername($smtpusername)
->setPassword($smtppassword)
;
//Create the Mailer using your created Transport
$mailer = Swift_Mailer::newInstance($transport);
//Send the message
$result = $mailer->send($message);
if ($result == "1") {
echo "<span class='sendstatus success'>Email sent successfully. </span>";
} else {
echo "<span class='sendstatus failure'>An error occurred. Result code: $result </span>";
}
?>
And here's the jQuery form (simplified a bit):
<div id="emailresults">
<form id="emailRecsForm" action="http://example.com/emailresults/emailrecs.php"> <!-- THIS PAGE WHERE THE PHP ABOVE IS LOCATED -->
<h3><img src="email-icon.png" /> Email Your Results</h3>
<label for="name">Name</label><input type="text" id="name" name="name" placeholder="Recipient's name (optional)" />
<label for="address">Email address</label><input type="text" id="address" name="address" class="required email" placeholder="recipient@address.org" />
<div id="submitdiv"><input type="submit" class="submit" value="Send Results" /></div>
</form>
<!-- the result of the send will be rendered inside this div -->
<div id="result"></div>
</div>
<script>
/* attach a submit handler to the form */
$("#emailRecsForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
$( "#submitdiv" ).empty().append('<span class="sendstatus working"><img src="/images/loadwheel.gif" alt="Sending..."></img></span>');
/* get some values from elements on the page: */
var $form = $( this ),
name = $form.find( 'input[name="name"]' ).val(),
address = $form.find( 'input[name="address"]' ).val(),
html = $('.container').html(),
url = "http://example.com/emailrecs.php";
/* Send the data using post and put the results in a div */
$.post( url, { name: name, address: address, content: html },
function( data ) {
$( "#submitdiv" ).empty().append('<br />').append( data ).append('<input type="submit" class="submit" value="Send Results" />');
$form.find( 'input[name="name"]' ).val("");
$form.find( 'input[name="address"]' ).val("");
}
);
});
</script>
