Plantilla HTML para correo de Contact Form 7 Gratis 😎

En este momento estás viendo Plantilla HTML para correo de Contact Form 7 Gratis 😎

   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.

Tabla de contenidos

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 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

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 class="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20201%20201'%3E%3C/svg%3E" data-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.

Hugo Borges fundador y CEO de Samán Agencia de Marketing
Autor
Hugo Borges

Soy un emprendedor enfocado en apoyar a pequeñas empresas y personas que comienzan con sus proyectos.

Especialista en: Redes Sociales, WordPress, Facebook Ads y Posicionamiento Web.
Ecologista - Diseñador web - Informático

Si te gustó esta publicación compártela en tus redes sociales

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Share on pinterest
Share on whatsapp
Share on twitter
Share on linkedin
5/5 - (16 votos)

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 😀

Deja una respuesta