Cómo enviar emails en formato HTML en PHP utilizando PHPMailer

Ya hemos escrito por aquí cómo enviar un email con PHP, pero era un script simple que solo te solventará aquellos casos más básicos. En este script no enviaremos correos en texto plano, sino que los enviaremos en formato HTML gracias a la librería de PHP, PHPMailer. Como he dicho antes, en casos sencillos, enviar un email en texto plano es suficiente, pero en el marketing por email lo suyo es enviar un email elaborado, y para ello recurriremos al HTML, para así poder dar estilo a nuestro correo.

Los correos en HTML son más útiles para promociones también. En este tutorial no vamos a reinventar la rueda, solo te daremos la pautas necesarias para enviar emails en HTML utilizando tablas. ¿Estás preparado? ¡Pues vamos a ver cómo llevarlo a cabo!

Cuerpo del correo en HTML

Para el ejemplo, utilizaremos este cuerpo HTML para el correo:

$message  = "<html><body>";
   
$message .= "<table width='100%' bgcolor='#e0e0e0' cellpadding='0' cellspacing='0' border='0'>";
   
$message .= "<tr><td>";
   
$message .= "<table align='center' width='100%' border='0' cellpadding='0' cellspacing='0' style='max-width:650px; background-color:#fff; font-family:Verdana, Geneva, sans-serif;'>";
    
$message .= "<thead>
  <tr height='80'>
  <th colspan='4' style='background-color:#f5f5f5; border-bottom:solid 1px #bdbdbd; font-family:Verdana, Geneva, sans-serif; color:#333; font-size:34px;' >Programacion.net</th>
  </tr>
             </thead>";
    
$message .= "<tbody>
             <tr align='center' height='50' style='font-family:Verdana, Geneva, sans-serif;'>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://www.programacion.net/articulos/c' style='color:#fff; text-decoration:none;'>C</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://www.programacion.net/articulos/php' style='color:#fff; text-decoration:none;'>PHP</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://www.programacion.net/articulos/asp' style='color:#fff; text-decoration:none;' >ASP</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://www.programacion.net/articulos/java' style='color:#fff; text-decoration:none;' >Java</a></td>
       </tr>
      
       <tr>
       <td colspan='4' style='padding:15px;'>
       <p style='font-size:20px;'>Hi' ".$full_name.",</p>
       <hr />
       <p style='font-size:25px;'>Sending HTML eMaile using PHPMailer</p>
       <img src='https://4.bp.blogspot.com/-rt_1MYMOzTs/VrXIUlYgaqI/AAAAAAAAAaI/c0zaPtl060I/s1600/Image-Upload-Insert-Update-Delete-PHP-MySQL.png' alt='Sending HTML eMail using PHPMailer in PHP' title='Sending HTML eMail using PHPMailer in PHP' style='height:auto; width:100%; max-width:100%;' />
       <p style='font-size:15px; font-family:Verdana, Geneva, sans-serif;'>".$text_message.".</p>
       </td>
       </tr>
      
              </tbody>";
    
$message .= "</table>";
   
$message .= "</td></tr>";
$message .= "</table>";
   
$message .= "</body></html>";

Formulario para enviar un mail al destinatario

En este formulario utilizaremos dos campos input, el nombre completo y el email. El nombre completo y el email se mostrarán en la plantilla HTML que te hemos mostrado antes, junto al mensaje y una imagen.

<form method="post" class="form-control-static">
        
       <div class="form-group">
            <input class="form-control" type="text" name="full_name" placeholder="Full Name" />
       </div>
            
       <div class="form-group">
            <input class="form-control" type="text" name="email" placeholder="Your Mail" />
       </div>
           
       <div class="form-group">
           <button class="btn btn-success" type="submit" name="btn_send">
           <span class="glyphicon glyphicon-envelope"></span> Send Mail
           </button>
       </div>
        
</form>

Clase PHPMailer

Debes incluir la clase PHPMailer para crear un nuevo objeto llamado $mail. Utilizando esta variable podrás llamar a todas funciones y métodos de la librería PHPMailer.

// include phpmailer class
require_once 'mailer/class.phpmailer.php';
// creates object
$mail = new PHPMailer(true);

Código para enviar el mail

Para este tutorial utilizaré el SMTP de Gmail para enviar el correo. No te preocupes, también funcionará en localhost. Solo tienes que incluir la librería PHPMailer, la cual puedes descargar desde la página oficial, y enviar el correo en el index.php. Como podéis ver, para gestionar los posibles errores, he metido el código dentro de un try, catch.

try
{
 $mail->IsSMTP(); 
 $mail->isHTML(true);
 $mail->SMTPDebug  = 0;                     
 $mail->SMTPAuth   = true;                  
 $mail->SMTPSecure = "ssl";                 
 $mail->Host       = "smtp.gmail.com";      
 $mail->Port       = 465;             
 $mail->AddAddress($email);
 $mail->Username   ="[email protected]";  
 $mail->Password   ="your_gmail_password";            
 $mail->SetFrom('[email protected]','Programacion net');
 $mail->AddReplyTo("[email protected]","Programacion net");
 $mail->Subject    = $subject;
 $mail->Body    = $message;
 $mail->AltBody    = $message;
  
 if($mail->Send())
 {
 
         $msg = "<div class='alert alert-success'>
   Hi,<br /> ".$full_name." mail was successfully sent to ".$email." go and check, cheers :)
   </div>";
 }
}
catch(phpmailerException $ex)
{
  $msg = "<div class='alert alert-warning'>".$ex->errorMessage()."</div>";
}

Código completo del index.php

Aquí tienes el contenido del fichero completo, que contiene todo lo necesario para enviar un email en formato HTML. No olvides de configurar tus credenciales de gmail dentro del bloque try.

<?php
  
  // include phpmailer class
  require_once 'mailer/class.phpmailer.php';
  // creates object
  $mail = new PHPMailer(true); 
  
  if(isset($_POST['btn_send']))
  {
   $full_name  = strip_tags($_POST['full_name']);
   $email      = strip_tags($_POST['email']);
   $subject    = "Sending HTML eMail using PHPMailer.";
   $text_message    = "Hello $full_name, <br /><br /> This is HTML eMail Sent using PHPMailer. isn't it cool to send HTML email rather than plain text, it helps to improve your email marketing.";      
   
   
   // HTML email starts here
   
   $message  = "<html><body>";
   
   $message .= "<table width='100%' bgcolor='#e0e0e0' cellpadding='0' cellspacing='0' border='0'>";
   
   $message .= "<tr><td>";
   
   $message .= "<table align='center' width='100%' border='0' cellpadding='0' cellspacing='0' style='max-width:650px; background-color:#fff; font-family:Verdana, Geneva, sans-serif;'>";
    
   $message .= "<thead>
      <tr height='80'>
       <th colspan='4' style='background-color:#f5f5f5; border-bottom:solid 1px #bdbdbd; font-family:Verdana, Geneva, sans-serif; color:#333; font-size:34px;' >Programacion.net</th>
      </tr>
      </thead>";
    
   $message .= "<tbody>
      <tr align='center' height='50' style='font-family:Verdana, Geneva, sans-serif;'>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://programacion.net/articulos/c' style='color:#fff; text-decoration:none;'>C</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://programacion.net/articulos/php' style='color:#fff; text-decoration:none;'>PHP</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://programacion.net/articulos/ASP' style='color:#fff; text-decoration:none;' >ASP</a></td>
       <td style='background-color:#00a2d1; text-align:center;'><a href='http://programacion.net/articulos/java' style='color:#fff; text-decoration:none;' >Java</a></td>
      </tr>
      
      <tr>
       <td colspan='4' style='padding:15px;'>
        <p style='font-size:20px;'>Hi' ".$full_name.",</p>
        <hr />
        <p style='font-size:25px;'>Sending HTML eMail using PHPMailer</p>
        <img src='https://4.bp.blogspot.com/-rt_1MYMOzTs/VrXIUlYgaqI/AAAAAAAAAaI/c0zaPtl060I/s1600/Image-Upload-Insert-Update-Delete-PHP-MySQL.png' alt='Sending HTML eMail using PHPMailer in PHP' title='Sending HTML eMail using PHPMailer in PHP' style='height:auto; width:100%; max-width:100%;' />
        <p style='font-size:15px; font-family:Verdana, Geneva, sans-serif;'>".$text_message.".</p>
       </td>
      </tr>
      
      </tbody>";
    
   $message .= "</table>";
   
   $message .= "</td></tr>";
   $message .= "</table>";
   
   $message .= "</body></html>";
   
   // HTML email ends here
   
   try
   {
    $mail->IsSMTP(); 
    $mail->isHTML(true);
    $mail->SMTPDebug  = 0;                     
    $mail->SMTPAuth   = true;                  
    $mail->SMTPSecure = "ssl";                 
    $mail->Host       = "smtp.gmail.com";      
    $mail->Port       = 465;             
    $mail->AddAddress($email);
    $mail->Username   ="[email protected]";  
                         $mail->Password   ="your_gmail_password";            
                         $mail->SetFrom('[email protected]','Programacion net');
                         $mail->AddReplyTo("[email protected]","Programacion net");
    $mail->Subject    = $subject;
    $mail->Body    = $message;
    $mail->AltBody    = $message;
     
    if($mail->Send())
    {
     
     $msg = "<div class='alert alert-success'>
       Hi,<br /> ".$full_name." mail was successfully sent to ".$email." go and check, cheers :)
       </div>";
     
    }
   }
   catch(phpmailerException $ex)
   {
    $msg = "<div class='alert alert-warning'>".$ex->errorMessage()."</div>";
   }
  } 
  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sending HTML eMail using PHPMailer in PHP</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://www.programacion.net" title='Programming Blog'>Programacion.net</a>
            <a class="navbar-brand" href="http://programacion.net/articulos/c">C</a>
            <a class="navbar-brand" href="http://programacion.net/articulos/php">PHP</a>
            <a class="navbar-brand" href="http://programacion.net/articulos/java">Java</a>
        </div>
    </div>
</div>


<div class="container">

 <div class="page-header">
     <h1>Send HTML eMails using PHPMailer in PHP</h1>
    </div>
     
    <div class="email-form">
    
     <?php
  if(isset($msg))
  {
   echo $msg;
  }
  ?>
        
     <form method="post" class="form-control-static">
        
            <div class="form-group">
                <input class="form-control" type="text" name="full_name" placeholder="Full Name" />
            </div>
            
            <div class="form-group">
                <input class="form-control" type="text" name="email" placeholder="Your Mail" />
            </div>
            
            <div class="form-group">
                <button class="btn btn-success" type="submit" name="btn_send">
                <span class="glyphicon glyphicon-envelope"></span> Send Mail
                </button>
            </div>
        
     </form>
    </div>    
</div>

</body>

</html>

Y eso es todo. Utilizando este simple script podrás enviar mensajes de correo electrónico en formato HTML. En el tutorial he utilizado el SMTP de Gmail, pero puedes usar el tuyo sin problema alguno. Pruébalo en tu servidor localhost, pero asegúrate de que estás conectado a Internet.

Fuente: codingcage.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.