Juanma Guerrero - Web Designer & Developer


Generar con PHP emails con formato HTML e imágenes

Ok, muchos sabemos usar la función mail() de PHP, que lo que hace es enviar un email desde el lado del servidor a una casilla designada, en la mayoría de los casos partiendo de un formulario de contacto o similar desde el frontend.

Ahora (corrígeme si me equivoco) es bastante deprimente ver que nuestro email no tiene formato ni diseño que lo destaque o lo haga más atractivo. Sigue leyendo, entonces, para enterarte cómo enviar emails “enriquecidos” con PHP.

Al final no hay tanta diferencia

Para enviar un email con formato HTML a través de PHP se usa exactamente la misma función:

mail($to, $subject, $message, $headers);

El último parámetro, $headers, es opcional para la función pero lo necesitas para enviar el email con formato HTML, dado que mediante él pasarás la declaración del “Content-Type” que les indicará a los clientes de correo electrónico que interpreten el email como HTML. :)

De hecho, headers te permitirá hacer montones de cosas importantes para con email. Aquí puedes designar el valor del “De:” y del “Responder a:” si lo necesitaras, así como también agregar “CC:” y demás cuestiones.

A continuación puedes ver cómo ir declarando los headers para enviar emails enriquecidos con HTML:

$to = 'tucasilladeemail@gmail.com';

$subject = 'Acá va el asunto del email';

$headers = "From: " . strip_tags($_POST['req-email']) . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['req-email']) . "\r\n";
$headers .= "CC: otracasilladeemail@yahoo.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

¡Ahora podemos usar tags HTML!

El parámetro message (un string largo que pasábamos a la funcion mail() con el cuerpo del mensaje) ahora puede incluir tags HTML. Por ejemplo:

$message = '<html><body>';
$message .= '<h1>Hola, Mundo!</h1>';
$message .= '</body></html>';

¿Quieres ir un poco más allá? Concatenando el string puedes meter imágenes, tablas, etc, etc, etc. ¿Cómo? Así de sencillo, fíjate:

$message = '<html><body>';
$message .= '<img src="http://www.juanmaguerrero.com/img/logo-hover.gif" alt="Juanma Guerrero" />';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Nombre:</strong> </td><td>" . strip_tags($_POST['req-name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['req-email']) . "</td></tr>";
$message .= "<tr><td><strong>Tipo:</strong> </td><td>" . strip_tags($_POST['tipo']) . "</td></tr>";
$message .= "<tr><td><strong>Prioridad:</strong> </td><td>" . strip_tags($_POST['prioridad']) . "</td></tr>";
$message .= "<tr><td><strong>Nombre de usuario a cambiar (principal):</strong> </td><td>" . $_POST['username-principal'] . "</td></tr>";
$addURLS = $_POST['agregarUsuario'];
if (($agregarUsuario) != '') {
    $message .= "<tr><td><strong>Nombre alternativo (adicional):</strong> </td><td>" . strip_tags($agregarUsuario) . "</td></tr>";
}
$curText = htmlentities($_POST['curText']);
if (($curText) != '') {
    $message .= "<tr><td><strong>Contenido actual:</strong> </td><td>" . $contAct . "</td></tr>";
}
$message .= "<tr><td><strong>Nuevo contenido:</strong> </td><td>" . htmlentities($_POST['nuevoCont']) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";

¡Ahora luce mucho mejor ^_^!

En http://css-tricks.com/ tienes una demo online para previsualizar un email formateado mediante HTML. También puedes descargarte los archivos del ejemplo pero te recomiendo copiar el código desde aquí porque esos archivos están mezclados con los de otro proyectos. ¡Ahora, a crear tu propio email HTML!

Por Juanma Guerrero el 4 de Mayo de 2010

Deja tu respuesta:



Categorías:

Noticias 2.0

Usabilidad y Diseño

Código /*Comentado*/

Cosas Geeks

Buscar: