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 pago o tienen limitantes lo cual hace que no podamos diseñar al 100% nuestros correos.
Ventajas de usar Contact Form 7
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.
Tenemos un nuevo articulo para los diseñadores web en Perú, un formulario completo en HTML para el libro de reclamaciones
Tenemos un nuevo articulo para los diseñadores web en Perú, un formulario completo en HTML para el libro de reclamaciones
Si aun no sabes como usar el plugin contact form 7 aquí te dejo un pequeño tutorial.
¿ 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, una vez instalado el plugin que está en el repositorio de WordPress 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
Plantilla para enviar correos en Contact Form 7 con HTML 2022
Ahora sí, a lo que vinímos, opia 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 decoding="async" loading="lazy" 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 o encabezado del correo.
//* 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
Espero te se de gran ayuda en tus proyectos, si tienes alguna duda puedes dejarla en los comentarios de abajo.
![Lee más sobre el artículo Briefing Marketing Digital para Diseño de páginas web [Plantilla Gratis]](https://samanproducciones.com/wp-content/uploads/2020/03/briefing-para-diseño-de-pagina-web-300x125.jpg)
Interesante articulo, con esto ya puedo seguir usando Contact Form 7 sin necesidad de agregar otro plugin para enviar correos bonitos 😀