Plantilla HTML para correo de Contact Form 7 Gratis 😎

Plantilla HTML para correo de Contact Form 7 Gratis 😎

Plantilla para enviar correos en Contact Form 7 con HTML

Muchas veces queremos personalizar los correos enviados a nuestros clientes o usuarios que llenan uno de los formularios de Contact Form 7 alojados en nuestras páginas webs, pero hacerlo a código no es tarea fácil y más si conoces poco de programación. 😟

Sabemos que existen Plugins que ofrecen excelentes diseños para dicha tarea, sin embargo la mayoría son de paga o tienen limitantes lo cual hace que no podamos diseñar al 100% nuestros correos.

La gran ventaja de Contact Form 7 es que nos permite crear un formato o plantilla totalmente personalizada en código HTML de forma Gratuita 😎

En este ejemplo tenemos una plantilla para enviar un correo con la información de la reservación de un Huesped en un hotel.

¿ Como crear un formulario de Contact Form 7 ?

Para mostrar como se usa este pequeño código HTML debemos crear un nuevo formulario en Contact Form 7, para ello nos vamos a Contacto->Añadir Nuevo

  • Asignamos un nombre para el formulario, agregamos los campos para el caso que ustedes deseen y nos dirigimos a la pestaña Correo Electrónico en donde vamos a pegar el código

  • Activa el uso de contenido HTML

Activar HTML

Copia y pega el siguiente código en el cuerpo del correo modificando según lo que quiera enviar al receptor del correo.

  • Cabecera: Aquí es donde podrás agregar el Logo de tu empresa, solo reemplaza la URL de la imagen, también tendrás el titulo ( Constancia de Reservación )
//*Cabecera del correo*//

<div style="background-color:#e1e8ed;padding:20px">
  <div style="background-color:#ffffff;Margin:0px auto;max-width:680px">
    <table align="center" style="background:#ffffff;background-color:#ffffff;    width:100%">
     <tbody>
      <tr>
       <td style="height: 15.0pt; width: 20pt;" width="20" height="20"></td>
       <td>
        <div align="center">
         <img src="https://tucomboweb.com/wp-content/uploads/2019/imagen.jpg" alt="" width="201" height="201" />
        </div>
       </td>
       <td style="height: 15.0pt; width: 20pt;" width="20" height="20"></td>
      </tr>
      <tr>
       <td style="height: 15.0pt; width: 20pt;" width="20" height="20"></td>
       <td style="text-align: center;">
        <span style="font-size: 15pt;">
          <b>Constancia de reservación</b>
        </span>
       </td>
       <td style="width: 20pt;" width="20"></td>
      </tr>
     </tbody>
    </table>

//* Parrafo principal o Saludo *//
<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
 <tbody>
   <tr>
     <td style="padding:10px 25px;word-break:break-word">
       <div style="font-size:12px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%">
         <span style="font-size: 13pt;">
           Hola Sr/Sra <b>[your-name]</b>!
         </span>
         <span style="font-size: 12pt;">
           El presente es para informar que su reservación ya fue procesada con éxito.
         </span>
         <span style="font-size: 12pt;">
           <b>Estos son los datos de tu reserva</b>
         </span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

  • Luego tienes el mensaje que quieres indicar al receptor del correo, en este caso es un hotel por lo que le indicamos la información de su reservación.
/** Datos del Huesped **/

<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
   <tbody>
     <tr>
       <td style="font-size:0px;padding:10px 55px;word-break:break-word">
         <div style="font-size:11px;text-align:left;direction:ltr;display:inline-         block;vertical-align:top;width:100%">
          <span style="font-size: 11pt;">Nombre y apellido del Huésped: <b> [your-name] [text-567] </b>
           Número de Pasaporte:<b> [tel-5]</b>
           Fecha de Reservación: <b> [_date]</b>
          </span>
         </div>
       </td>
     </tr>
   </tbody>
</table>

/** Fin datos del Huesped **/
  • Continuamos con las columnas donde muestra fecha de reserva y demás datos junto con una pequeña NOTA que también puede ser descripción o información.
/* Nota o descripción */

<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
  <tbody>
    <tr>
      <td style="padding:0px 90px;word-break:break-word">
        <div style="text-align:center;direction:ltr;display:inline-block;vertical-align:top;width:100%">
          <span style="font-size: 14pt;"><br>Datos de la habitación</span>
        </div>
      </td>
     </tr>
  </tbody>
</table>

/* Aquí creamos 2 columnas para mostrar datos */
   <table style="margin:0px;padding:0px 90px;width:100%;height:100%;" border="0" width="80">
      <tbody>
         <tr>
            <td style="margin:50px; text-align: center;" width="50%" height="20">
             <span style="font-size: 12pt;">Tipo <b>[menu-814]</b></span>
           </td>
           <td style="margin:50px; text-align: center;" width="50%" height="20">
              <span style="font-size: 14pt;">Cantidad de Huéspedes <b>[number-149]</b>
              </span>
           </td>
       </tr>
    </tbody>
  </table>

<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
   <tbody>
      <tr>
        <td style="padding:10px 25px;word-break:break-word">
           <div style="font-size:14px;text-align:center;direction:ltr;display:inline-block;vertical-align:top;width:100%">
              <span style="font-size: 14pt;">
                Fecha de reservación
              </span>
           </div>
        </td>
     </tr>
   </tbody>
</table>
        <table style="margin:0px;padding:0px 90px;width:100%;height:100%;" border="0" width="80">
          <tbody>
             <tr style="text-align: center;">
               <td style="margin:50px; text-align: center;" width="50%" height="auto">
                  <span style="font-size: 12pt;">Checkin: <b>[date-128]</b></span>
              </td>
              <td style="margin:50px; text-align: center;" width="50%" height="20">
               <span style="font-size: 12pt;">Checkout: <b>[date-129]</b></span>
              </td>
            </tr>
           </tbody>
        </table>

/* Inicio de la nota */
<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
   <tbody>
      <tr>
         <td style="padding:10px 25px;word-break:break-word">
           <div style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%">
             <span style="font-size: 11pt;">
                NOTA: Este documento es solo de carácter informativo, no es un comprobante de pago, en caso de no poder hacer uso de la reservación, favor llamar con 2 días de anticipación.
             </span>
           </div>
         </td>
      </tr>
    </tbody>
</table>

/* fin de la nota o descripción */

 

  • Finalmente agregamos el Footer o pie de correo
/* Footer */

<table align="center" style="background:#ffffff;background-color:#ffffff;width:100%">
   <tbody>
      <tr>
        <td style="font-size:11px;padding:10px 25px;word-break:break-word">
           <div style="font-size:13px;text-align:center;direction:ltr;display:inline-block;vertical-align:top;width:100%">
              <span style="font-size: 11pt;">
              /* Divisor */
                <hr/>
              <br>Enviado desde <b>https://tucomboweb.com</b>
              <br>Telefono: (+51) 333333333 WhatsApp: (+51) 999 999 999 
Dirección: Prolongación Huánuco 11113 - La Victoria
LIMA - PERU
              </span>
           </div>
         </td>
       </tr>
     </tbody>
   </table>

/* Fin del Footer */

  </div>
</div>

Con este código ya tendrás una base para crear tus formularios 100% personalizados y así destacar con los correos enviados a tus subscriptores o clientes.

El formulario donde se obtienen los datos contiene los siguientes campos:

El Correo enviado quedaría de la siguiente manera

 

¿ Necesitas ayuda para tus campañas de Facebook ?​

Contáctanos por nuestro chat en vivo o escríbenos a info@samanproducciones.com y solicita asesoría de nuestros expertos en campañas de Facebook Ads



Esta entrada tiene un comentario

  1. Alexander Rodriguez

    Interesante articulo, con esto ya puedo seguir usando Contact Form 7 sin necesidad de agregar otro plugin para enviar correos bonitos 😀

Dejanos un comentario