Generar emails con formato HTML e imágenes desde PHP

Emails hechos con PHP

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” desde 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($casilla, $asunto, $mensaje, $cabeceras, );

El último parámetro, $cabeceras, 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, esta variable te permitirá hacer montones de cosas importantes para con el 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:

$casilla = 'tucasilladeemail@gmail.com';

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

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

¡Ahora podemos usar tags HTML!

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

$mensaje = '<html><body>';
$mensaje .= '<h1>¡Hola mundo!</h1>';
$mensaje .= '</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:

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

¡Ahora luce mucho mejor ^_^!

Emails formateados en HTML desde PHP

Ya no hay excusas. ¡A crear tu propio email HTML!

Fuente: CSS Tricks

Código /*comentado*/ Etiquetas: , , ,

10 comentarios alucinantes:

  1. Muy buen tutorial, estaba buscando exactamente esto y me sirvió muchas gracias

    Comentó Matías Geek, el 30 de mayo de 2011 a las 1:27
  2. bastante util tu post, solo que en lugar de poner

    $mensaje= ” cuerpo del correo “;
    $mensaje .= ” + lo que sea “;
    $mensaje .= ” + aun mas de lo q sea “;

    Resulta ser bastante tedioso si es un HTML algo grande
    Asi que puedes sustituir

    || $mensaje .= ” || y || “; || en cada linea

    por

    $mensaje = <<<EOT

    Aqui va tooodo el codigo HTML que quieran, no importa si lleva "" '' (comillas) o lo que sea

    EOT;

    No importa que uses HTML, dentro del EOT no sera tomado en cuenta el contenido por el programador PHP

    .:: @NuBiS Corp ::.
    Soluciones en Informatica

    Comentó anubiscorp, el 24 de septiembre de 2011 a las 20:39
  3. muchas gracias es justo lo que andaba buscando.

    Comentó luz, el 3 de septiembre de 2012 a las 20:09
  4. Excelente!, me funciono al primer intento de aplicarlo, Dios te bendiga borther!

    Comentó william, el 28 de septiembre de 2013 a las 12:36
  5. Muy bueno, muchas gracias

    Comentó Antonio Galán, el 10 de octubre de 2013 a las 5:31
  6. Muchas gracias por esta info!! Fue de muchísima ayuda!!

    Comentó Willy, el 11 de octubre de 2013 a las 12:16
  7. Parece muy interesante lo que pones. Yo estoy aplicando la clase phpmailer. Echale un ojo por si no la conoces es muy interesante. Intentaré aplicar el cuerpo del mensaje a esta clase que también permite incluir html. Gracias amigo

    Comentó Berenes, el 6 de diciembre de 2013 a las 7:41
  8. Gracias Mil Gracias!

    Comentó Jeux, el 24 de septiembre de 2014 a las 18:38
  9. Muchas gracias!

    Por fin y tras mucho buscar he conseguido embeber una imagen en los emails automáticos de mi web hecho en php con tu método de HTML.

    Gran Post!

    Comentó Carlos, el 17 de marzo de 2015 a las 7:24

Me muero por oír tu opinión:

Puede ser tu perfil en Twitter, LinkedIn, Facebook o blog personal :)

Puedes insertar código entre corchetes, ej:
[html]<p>hola</p>[/html] / [css] #id { color:red; } [/css] / [js]alert("hola");[/js]