plantilla HTML para Contact Form 7

Uno de los mejores Plugins para crear formularios de contacto en WordPress es sin duda alguna Contact Form 7, es un Plugin gratuito que podemos encontrar en el repositorio de Plugins de WordPress, el problema es que la plantilla base de email que tiene es muy básica, por eso hoy veremos como crear una platilla HTML de email para Contact Form 7.

Lo primero que tendremos que hacer es instalar el Plugin en nuestro WordPress, para ello vamos a la ruta “plugins/añadir nuevo”, en el buscador de la derecha escribimos “contact form 7”, el primer resultado que aparece será el Plugin que estamos buscando.

Lo instalamos y activamos, una vez hecho esto nos aparece un nuevo menú a la izquierda llamado “contacto”, iremos a la ruta “contacto/añadir nuevo/, como nombre en el ejemplo le pondremos “contacto”, en la caja de texto llamada “formulario” pondremos el siguiente código para que nos quede igual que la imagen.

Ahora copiamos el Shortcode que nos aparece arriba, nos vamos a la ruta “paginas/añadir nueva” y creamos una pagina llamada “contacto”, elegimos crear un nuevo bloque llamado shortcode, en Gutenberg ya nos viene uno creado, solo tenemos que utilizar el buscador de bloques para que nos aparezca, una vez creado el bloque shortcode añadimos el que habíamos copiado en el formulario de contacto y guardamos la pagina, si abrimos la pagina en el FrontEnd veremos algo como la siguiente imagen.

Ahora viene lo interesante, crear la plantilla HTML para el email de Contact Form 7, para ello iremos a la ruta “contacto/formularios de contacto” y pincharemos sobre editar en el formulario que habíamos creado anteriormente, dentro del formulario iremos a la pestaña “correo electrónico”.

En el campo “para” pondremos el email al que debe llegar el formulario una vez enviado, en el campo “de” pondremos un nombre para que nos aparezca en el asunto del email y una dirección de email, lo tendremos que hacer así “Ricard FS <soy@ricardfs.es>”.

En el campo “asunto” pondremos algo parecido a lo siguiente “Ricard FS «[your-subject]»”, el campo “cabeceras adicionales” lo dejaremos vacío, ahora viene lo interesante, en la caja de texto llamada “cuerpo del mensaje” añadiremos el siguiente código.




<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body style="margin: 0; padding: 0">
    <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#DCDDE1" border="0" style="background-color: #DCDDE1; padding-top: 20px;">
        <tr>
            <td align="center">
                <div style="width: 100%; max-width: 650px; margin: 0 auto;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 650px; margin: 0 auto;">
                        <tbody>
                            <tr>
                                <td>
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 620px; margin: 0 auto;">
                                        <tbody>
                                            <tr>
                                                <td height="400" bgcolor="#37B5CE" style="background-repeat: no-repeat; background-color: #37B5CE; text-align: center; font-family: Courier, Courier New, monospace, Arial; padding: 0 25px;">
                                                    <img src="https://ricardfs.es/wp-content/themes/ricardfses/images/logo5.png" alt="" style="display: inline-block;">
                                                    <span style="display: block; color: #ffffff; font-size: 20px; font-weight: bold; letter-spacing: 0.050em; text-align: left; margin-bottom: 10px; padding-top: 40px;"> Hola Ricardo</span>
                                                    <p style="margin: 5px 0 10px; font-family: Verdana, sans-serif; text-align: left; color: #ffffff;">Este mensaje llega desde Ricard FS</p>
                                                    <p style="margin: 5px 0 0; font-family: Verdana, sans-serif; text-align: left; color: #ffffff;">Estos son los detalles.</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td bgcolor="#ffffff">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td height="40"></td>
                                                            </tr>
                                                            <tr>
                                                                <td width="500" style="" align="center">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Asunto
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-subject]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Nombre
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-name]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Email
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-email]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-size: 18px; vertical-align: top; color: #A0A0A2;" width="500">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: Verdana, sans-serif; color: #A0A0A2; text-align: left; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;">
                                                                                    Mensaje escrito
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="color: #f18f4e;" width="500">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: sans-serif, Arial; color: #74737B; text-align: left; padding-left: 15px; padding-right: 15px; padding-bottom: 35px; font-size: 16px; line-height: 24px;">
                                                                                    [your-message]
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            <!-- Msg Strat -->
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Si todo lo hemos realizado al pie de la letra obtendremos un resultado como el de la siguiente imagen.

Como podemos ver en las primeras lineas estamos añadiendo una imagen, esta imagen será el logo de nuestra pagina web, para ello creamos una imagen con nuestro logo y la llamamos “logo5.png”, luego la subimos a la carpeta images de nuestro Theme y pondremos en la linea de código la ruta absoluta de la imagen en cuestión.

Observamos que estamos creando un conjunto de tablas donde anidamos los diferentes elementos que hemos creado en nuestro formulario de contacto, para que esto funcione bien no debemos olvidar marcar la casilla “usar contenido de tipo HTML”, así el formulario de contacto que llegue a nuestra bandeja de entrada tendrá el siguiente aspecto.

Ahora vamos a crear una respuesta automática para que sea enviada a la cuenta de correo del usuario que ha rellenado el formulario, para ello pincharemos en “Usar correo electrónico (2)” y veremos como se abre un nuevo apartado para poner más datos sobre un nuevo destinatario de correo.

En el campo “para” pondremos “[your-email]”, de esta manera el destinatario del correo será el correo electrónico que se haya puesto en el formulario de envío, en el campo “de” volvemos a poner “Ricard FS <soy@ricardfs.es>” igual que hicimos anteriormente, en el campo “asunto” repetimos la operación y ponemos “Ricard FS «[your-subject]»” y el campo “cabeceras adicionales” lo dejamos de nuevo en blanco.

Ahora sí, procedemos a crear la plantilla HTML para el email de Contact Form 7, como este correo le debe llegar al usuario que ha rellenado el formulario la plantilla cambia un poco respecto a la anterior, de manera que en el campo “cuerpo del mensaje” copiamos y pegamos el siguiente código.




<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body style="margin: 0; padding: 0">
    <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#DCDDE1" border="0" style="background-color: #DCDDE1; padding-top: 20px;">
        <tr>
            <td align="center">
                <div style="width: 100%; max-width: 650px; margin: 0 auto;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 650px; margin: 0 auto;">
                        <tbody>
                            <tr>
                                <td>
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 620px; margin: 0 auto;">
                                        <tbody>
                                            <tr>
                                                <td height="400" bgcolor="#37B5CE" style="background-repeat: no-repeat; background-color: #37B5CE; text-align: center; font-family: Courier, Courier New, monospace, Arial; padding: 0 25px;">
                                                    <img src="https://ricardfs.es/wp-content/themes/ricardfses/images/logo5.png" alt="" style="display: inline-block;">
                                                    <span style="display: block; color: #ffffff; font-size: 20px; font-weight: bold; letter-spacing: 0.050em; text-align: left; margin-bottom: 10px; padding-top: 40px;"> Hola [your-name]</span>
                                                    <p style="margin: 5px 0 10px; font-family: Verdana, sans-serif; text-align: left; color: #ffffff;">Esto es una respuesta automática desde Ricard FS</p>
                                                    <p style="margin: 5px 0 0; font-family: Verdana, sans-serif; text-align: left; color: #ffffff;">En breve responderemos a tu mensaje.</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td bgcolor="#ffffff">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td height="40"></td>
                                                            </tr>
                                                            <tr>
                                                                <td width="500" style="" align="center">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Asunto
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-subject]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Nombre
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-name]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-family: Courier, Courier New, monospace, Arial; color: #74737B; text-align: left; padding-bottom: 35px; padding-left: 15px; padding-right: 15px;">
                                                                                    <table cellpadding="0" cellspacing="0" width="100%;">
                                                                                        <tr>
                                                                                            <td style="font-size: 18px; color: #A0A0A2; font-family: Verdana, sans-serif;" width="200">
                                                                                                Email
                                                                                            </td>
                                                                                            <td style="font-size: 16px; font-family: sans-serif, Arial;" width="300">
                                                                                                [your-email]
                                                                                            </td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-size: 18px; vertical-align: top; color: #A0A0A2;" width="500">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: Verdana, sans-serif; color: #A0A0A2; text-align: left; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;">
                                                                                    Mensaje escrito
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="color: #f18f4e;" width="500">
                                                                    <table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-family: sans-serif, Arial; color: #74737B; text-align: left; padding-left: 15px; padding-right: 15px; padding-bottom: 35px; font-size: 16px; line-height: 24px;">
                                                                                    [your-message]
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td bgcolor="#F6F6F6" style="padding: 15px;">
                                                                    <table cellpadding="0" cellspacing="0" width="100%">
                                                                        <tr>
                                                                            <td>
                                                                                <a href="https://ricardfs.es" target="_blank" style="display: inline-block;" rel="noopener noreferrer"><img src="https://ricardfs.es/wp-content/themes/ricardfses/images/logo5.png" alt="" width="206" height="121" /></a>
                                                                            </td>
                                                                            <td style="text-align: right;">
                                                                                <div style="margin-bottom: 5px;">
                                                                                    <a href="mailto:soy@ricardfs.es" style="color: #ababab; font-family: Courier, Courier New, monospace, Arial; font-size: 16px; display: inline-block; text-decoration: none;">soy@ricardfs.es</a>
                                                                                </div>
                                                                                <div>
                                                                                    <a href="tel:664842849" style="color: #ababab; font-family: Courier, Courier New, monospace, Arial; font-size: 16px; display: inline-block; text-decoration: none;">664 84 28 49</a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 10px;">
                <div style="width: 100%; max-width: 620px; margin: 0 auto;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="">
                        <tr>
                            <td style="font-family: Courier, Courier New, monospace, Arial; font-weight: normal; font-size: 14px; line-height: 24px; color: #444444; text-align: left; padding-bottom: 30px; padding-top: 15px; padding-left: 15px; padding-right: 15px;">
                                Copyright &copy; 2020 <a href="https://ricardfs.es" target="_blank" style="text-decoration: none; font-weight: bold; color: #444444" rel="noopener noreferrer">Ricard FS</a>
                            </td>
                            <td style="font-family: Courier, Courier New, monospace, Arial; font-weight: normal; font-size: 14px; line-height: 24px; color: #444444; text-align: right; padding-bottom: 30px; padding-top: 15px; padding-left: 15px; padding-right: 15px;">
                                Creado por Ricard FS
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Como podemos ver es casi igual a la anterior, en este caso hemos cambiado los textos superiores para que el usuario sepa que es una respuesta automática y hemos añadido más código al final del todo.

En este nuevo código añadimos de nuevo el logo a la izquierda, pero esta vez enlazando a nuestra pagina web, a la derecha ponemos nuestro correo electrónico y nuestro número de teléfono por si el usuario quiere contactar con nosotros directamente y por último añadimos el Copyright y un texto sobre el creador del email, de manera que el correo que llega al usuario que ha rellenado el formulario quedará como en la siguiente imagen.

Y eso es todo, ya tenemos creada una plantilla de email en HTML para el Plugin Contact Form 7 completamente personaliza, vosotros podéis cambiar los colores, los textos, añadir campos, veréis como os resulta muy sencillo hacerlo.

Para cualquier duda no dudéis en utilizar el formulario de contacto que tenemos enlazado en el menú de esta web, también podéis dejar un comentario que será respondido en la mayor brevedad posible o poneros en contacto conmigo a través de Twitter en la cuenta @ricardfs.

1 agosto, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: