Contact Form 7 – Tutorial de configuración y uso

Contact Form 7 es uno de los plugins más conocidos de Wordpress. Su objetivo es la creación de formularios de una forma rápida y eficiente. Es gratuito y se actualiza continuamente.

Es tan popular que muchos desarrolladores de plantillas lo recomiendan. Incluso algunos, lo integran en su propio theme con una personalización específica acorde a la imagen y estilo de la plantilla.

Este plugin permite crear formularios de contacto muy avanzados pero no es tan potente como Gravity Forms, Formidable, etc, ni tampoco es su intención….

Es una solución gratuita, que facilita la posibilidad de que una web bajo Worpress, disponga de un método de comunicación a través de un formulario sencillo y eficiente.

Contact Form 7 no guarda los campos en la base de datos por lo que el sistema recoge los datos del usuario, los incluye en un mail, los envía y desaparecen sin más.

Si por casualidad el mensaje se pierde por el camino, bien por culpa del servidor o del servicio de email, la información sencillamente desaparece. Si quieres evitarlo y guardar los formularios en la base de datos puedes complementar Contact Form 7 con Flamingo.

Estilos en Contact Form 7

Unos de los puntos negativos que le achacan a Contact Form 7 es el aspecto y la personalización.

Si necesitas un diseño específico tienes que usar CSS o seguir las características de integración del theme que utilizas. Aun así es bastante sencillo personalizar un formulario con un poco de código.

Incluso hay plugins como por ejemplo CF7 Customizer, que te permite tunear los formularios sin necesidad de CSS.

¿Por casualidad trabajas con Avada? Entonces tienes amplia integración desde el panel control y al igual que Avada tienes otras muchas plantillas que también lo gestionan.

En este tutorial profundizaré en este plugin y te enseñaré a crear columnas y dar estilo. Los usuarios de Avada también tienen su apartadito para aprovechar las funcionalidades del theme.

Contact Form 7 - Tutorial completo. Aprende a usarlo y exprimirlo

Contents

Principales características Contact Form 7

Las más importantes que puedo señalar son las siguientes:

  • Formularios ilimitados
  • Traducido al español
  • Creación de diversos tipos de campos: Texto, email, url, télefono, numero, fecha, área de texto, menú desplegable, casillas de verificación, botones de selección, aceptación, pregunta, recaptcha, archivo y enviar.
  • Personalización de los campos
  • Configuración de correo electrónico que recibes
  • Configuración de correo para el usuario que envía el formulario
  • Es posible incluir envíos en copia o en copia oculta.
  • Configuración de los mensajes
  • Uso de códigos cortos para la implementación de los formularios en cualquier parte.
  • Permite enviar archivos a través del formulario
  • Acepta el uso de códigos cortos externos para la personalización del aspecto visual (hay que hacer un apañito primero)
  • Acepta el uso de clases CSS
  • Buena documentación (en inglés)
  • Es gratuito y se actualiza con mucha frecuencia
  • Se puede filtrar spam con Akismet

Familiarízate con el formulario de contacto

Voy a obviar la instalación del plugin, porque a estas alturas me imagino que sabes de sobra como se hace. Es de lo más sencillo…

En resumen: Plugins > añadir plugins > contact form 7 > instalar > activar > ¡listo!

Te aparecerá un nuevo item en el menú principal de Wordpress, generalmente debajo de «Comentarios» que se llamará Contacto.

Pantalla principal de Contact form 7

En la parte superior tienes una serie de enlaces que te ofrecen ayuda en linea desde la web de Contact Form 7. Está en inglés pero te resuelve prácticamente cualquier duda que tengas.

Si haces click encima del título accedes al formulario. El código corto sirve para insertar el formulario de contacto en cualquier parte de tu web.

Creación del formulario de contacto

El plugin ya incorpora un formulario básico predefinido y útil para cualquier web en el que se solicitan campos como Nombre, email, asunto, mensaje y el botón de enviar. La verdad es que estas son las necesidades del usuario medio. Un modo simple de mantener contacto desde la web.

Al acceder a la pantalla de creación de formularios nos encontramos con esto.

Pantalla formulario de Contact form 7

Como ves aparecen 4 pestañas que te permiten navegar a través de las opciones de configuración.

Actualmente estás en la pestaña «Formulario», que es donde lo creamos mediante los campos que solicitaremos a nuestros usuarios. Cambia a la pestaña «Correo electrónico» y  podrás configurar las opciones de envío.

Mensajes

La pestaña «Mensajes» personaliza los mensajes predefinidos y por último la pestaña de «ajustes adicionales» permite ajustes avanzados (para casos muy concretos).

En la parte superior aparece el nombre o título del formulario.

Debajo de las pestañas tienes los campos disponibles para incluir dentro del formulario.

En la caja de texto es incluyes los códigos de los campos con el html necesario para dar forma al formulario. A su vez puedes combinar con CSS si deseas darle tu propio estilo.

En la columna de la derecha puedes guardar e incluso duplicar el formulario completo. ¡No veas cuanto trabajo ahorra ese botoncito…! y también enlaces a información destacada (en inglés) si te surge cualquier duda.

Correo electrónico

Desde esta pestaña accedes a toda la configuración del correo electrónico que recibes y también (si lo activas) configuras la copia o acuse de recibo que recibe tu visitante.

Pantalla de configuración de correo electrónico de Contact form 7

¿Qué es cada campo?

El primer bloque es lo que llega al destinatario, osea, tú.

Para: Tu correo electrónico

De: El correo electrónico de tu web.

Antes se podría poner un nombre, pero ahora con las últimas actualizaciones lo da como error y sale un mensaje constantemente que dice que revises la configuración del plugin.

También puedes incluir la etiqueta [your-name] o en su caso la que hayas utilizado para el nombre del remitente del formulario. En teoría debería devolverte el nombre del usuario, aunque no siempre funciona porque depende la configuración que tengas con el correo.

Si no usas un correo smtp y los correos son procesados por el servidor te encontrarás con que el nombre del remitente es Wordpress, ya que es la función que tiene prevista para los correos electrónicos generados por el CMS (wordpress@tudominio.com)

Esto se puede cambiar añadiendo una función en el functions.php del theme en el que indicamos el nombre del remitente que queramos.

Copiar

Si utilizas una cuenta SMTP aparte de evitar muchos problemas de spam, saldrá el nombre que tienes asignado a esa cuenta de correo electrónico.

Asunto: Pues eso, el título de email

Cabeceras adicionales

Desde este apartado generas una copia del correo que irá a otro destinatario u otra cuenta de correo. Puedes ponerla en copia normal o en copia oculta. Por ejemplo:

Si queremos enviar una copia normal a otro correo añadimos: Cc: Email

Si queremos enviar una copia oculta a otro correo añadimos: Bcc: Email

Puedes crear tantas como quieras y debes poner una por cada linea.

Cuerpo del mensaje

Aquí es donde configuras el formato y aspecto del contenido que te llegará y para eso puedes usar texto y también html.

Si te fijas, en la parte superior de la pantalla, debajo de las pestañas, te aparece un aviso que te indica lo siguiente:

«En los siguientes campos puedes usar estas etiquetas de correo electrónico:
[your-name] – [your-email] – [your-subject] – [your-message]»

Bien, estos son los campos que has utilizado para recoger la información en el formulario de contacto y ahora puedes usarlos aquí para que el plugin te indique la info de cada campo.

Creo que se ve claramente en la imagen superior, como puedes configurarlo con el texto y los campos. Además puede servirte como ejemplo.

¿Que ocurre al marcar estas opciones?

Excluir las lineas con etiquetas de correo electrónico vacías en la salida

Los campos que hayan quedado vacíos en el formulario (por ejemplo, porque no son obligatorios) no se muestran.

Usar contenido de tipo HTML

Reconocerá el código HTML si lo has incluido en el cuerpo del mensaje. En este punto has de tener mucho cuidado. Utilizar html para enviar un mensaje es estupendo porque nos permite «decorar» a nuestro gusto todo y podemos darle ese toquee chic y diferente.

Pero se incrementan enormemente las posibilidades de que durante el proceso de envío, cualquiera de los servidores por los que pasará el correo lo tome como spam. Ten en cuenta que muchos sistemas de correo deshabilitan inicialmente el html por protección y por ejemplo, las imágenes no se ven si el receptor no hace click para autorizarlo. No sé hasta que punto vale la pena usar el html para una comunicación de este tipo, donde es esencial que los mensajes lleguen «sanos y salvos». Tu decides!!!

Archivos adjuntos

Debemos incluir la etiqueta del campo que utilizamos para subir el archivo.

El apartado de correo electrónico 2 es para generar un acuse de recibo.

Dicho de otra manera, nos permite enviar automáticamente un segundo email al remitente del formulario (o a donde queramos). Así el usuario confirma que hemos recibido el mensaje y le genera tranquilidad.

El funcionamiento es exactamente el mismo, pero en el contexto que antes explicaba. Solo hay un pequeño matiz en el campo «Para:». En este caso pondremos el campo [your-email] o el que corresponda con el email del remitente.

Para grabar los cambios utiliza el botón GUARDAR que aparece en la parte inferior.

Mensajes

Aquí aparecen los mensajes que el plugin genera con las diferentes acciones que realiza el formulario.

Por ejemplo, cuando el formulario se ha enviado con éxito o si no se ha podido enviar. Si hay un error de validación o debe aceptar los términos…..

Como puedes observar es un largo etc. Como mensajes estándar pueden valer, pero si quieres personalizarlos escribe en los campos tu propio mensaje y será sustituido por el que aparece por defecto.

Configuración de mensajes de acciones en Contact Form 7

Personaliza los formularios de contacto

Cuando te digo que Contact Form 7 es un plugin ideal para crear formularios simples, es una verdad a medias porque en realidad es mucho más potente de lo que parece.

El único problema es que tiene sus bondades un poco escondidas y no tiene una interfaz que te permita seleccionar un montón de cosas. ¡Digamos que toca hacerlo a mano!

A veces necesitamos establecer algunos parámetros que faciliten la entrada de datos o que aporten más seguridad o también facilidad para el usuario. Mira un ejemplo de lo que te comento revisando las posibilidades de Contact Form 7.

Añade diferentes campos y establece condicionantes

Por ejemplo, usa los siguientes campos:

Texto: Nombre. Apellidos.
Correo electrónico: Email.
Telefónico: Teléfono.
Numérico: Unidades.
Menú desplegable: Un menú con varias opciones.
Aceptación: Para que acepten las condiciones de uso y privacidad de la web con un enlace a los mismos y cumplir con la LOPD.
Archivo: Para que puedan enviar un archivo definido.
Envio: Para enviar el formulario.

Antes de nada, quiero explicarte la sintaxis del código corto típico

[text* nombre size:50 id:boton class:boton «Incluye tu nombre»]

Donde:

text: Nos indica el tipo de campo

*: Indica que es un campo obligatorio

size:50 class:boton…: Son opciones disponibles para el campo (tamaño, clases css…)

«Incluye tu nombre»: Indicamos un valor que se utilizará por defecto

Parámetros de los campos

Campo texto

Pantalla de configuración de campo texto en Contact Form 7
Si haces click sobre el campo texto saldrá una ventana como esta y en ella podrás rellenar los parámetros de configuración. Es válido para cualquier campo de texto. En este caso es igual para los campos Nombre y Apellidos.

Tipo de campo: Al marcarlo indicas que será obligatorio para el usuario. Si el campo no se rellena, el formulario no se envía.

Nombre: Contact Form 7 siempre utiliza un nombre con un número y en inglés. Si quieres simplificarlo puedes cambiarlo por un nombre que haga referencia al tipo de campo. Yo por ejemplo, he usado la etiqueta nombre.

Valor predeterminado: Si añades un valor implica que en el campo del formulario aparecerá ese valor por defecto si marcas la casilla inferior. En este caso, no tiene sentido, salvo si quieres hacer algún tipo de aclaración que sirva como ejemplo al usuario.

Akismet (Este campo requiere el nombre del autor): Colaborando con Akismet (si lo tienes instalado), al marcar la casilla aparece un parámetro de autor para validar el formulario. Así, lanza a Akismet los datos para que «decida» si es spam. Si no lo es, el formulario se envía y si lo es, se cancela.

Atributo de ID o CSS: Para establecer un estilo CSS al campo mediante un ID o una clase.

Campo Email

Pantalla de configuración de campo correo en Contact Form 7

El campo de correo electrónico es en realidad un campo de texto. Funciona exactamente igual, pero se convierte en un campo específico y obligatorio por defecto. Los demás parámetros ya están explicados en el apartado anterior.

Campo teléfono

Pantalla de configuración de campo telefono en Contact Form 7

También es un campo predefinido y mantiene los mismos atributos que los de texto. No insisto sobre ello.

Campo numérico

Pantalla de configuración de campo numerico en Contact Form 7

En tipo de campo aparecen 2 opciones: Selector de valor y selector deslizante.

Te permite elegir como será el formato del campo numérico. Lo típico para introducir un número o en formato deslizante entre un rango de números.

Rango establece un valor mínimo y otro máximo.  El usuario solo podrá moverse entre ese rango numérico.

Campo Menú desplegable

Pantalla de configuración de campo menú desplegable en Contact Form 7

Permite incorporar un desplegable y el usuario elige una o múltiples opciones. En opciones indica las disponibles (una por cada linea).

Si marcas el campo «Permitir selecciones múltiples«, el usuarios podrá marcar más de una. Si marcas el campo «Insertar un elemento en blanco como primera opción«, el desplegable aparecerá con la primera opción en blanco.

Campo aceptación

Pantalla de configuración de campo aceptación en Contact Form 7

Este campo establece una condición ineludible. Para poder enviar el formulario debe estar marcada. Te ayuda a cumplir con las normas de la LOPD.

Añade un texto con un enlace para que tu visitante tenga la oportunidad de leer la política de privacidad y condiciones de uso de tu web.

Permite dos opciones: Que la casilla aparezca marcada por defecto o bien que funciona a la inversa. Los demás campos ya están explicados.

Campo archivo

Pantalla de configuración de campo archivo en Contact Form 7

A través de este campo facilitas al usuario el envío de archivos. Puedes personalizarlo para establecer algunas condiciones.

Limite de tamaño: Establecemos un límite para el peso del archivo. El valor hay que ponerlo en bytes y tienes que hacer la conversión. Por ejemplo para un 1 archivo de un Megabyte, el valor en bytes sería 1048576.

Formatos de archivo aceptados: Estableces la extensión de los archivos que permitirás subir, por ejemplo, mp3, pdf, docx, etc.

Ten en cuenta que esta puede ser una vía estupenda para que algún «gracioso» (por no usar otra expresión), pueda enviarte un virus o tocarte las narices de alguna manera, o sea, es un agujero de seguridad estupendo. Úsalo con sentido y establece las limitaciones necesarias.

Campo enviar

Pantalla de configuración de campo enviar en Contact Form 7

Permites la acción del envío del formulario mediante un botón. Inserta en el campo etiqueta el texto que aparecerá en el botón.

Bien, pues vamos a ver el resultado de todo esto.

Construcción del formulario

Ejemplo de construcción de un formulario en Contact Form 7

¡Y este es el resultado!

Ejemplo de resultado de un formulario en Contact Form 7

Añadiendo parámetros de configuración a los formularios

Una vez que tenemos el formulario creado y vemos el resultado quizá te hagas la siguientes preguntas:

¿Puedo limitar de alguna manera los datos que el usuario va a incluir?

Si. Contact Form 7 ofrece opciones adicionales para que puedas poner limitaciones. Por ejemplo, cuantas letras puede tener un campo.

¿Los campos no son demasiado grandes?

Si. Puedes establecer el ancho del campo.

¿Podría ponerlos en columnas para que no se haga tan largo el formulario?

Si mediante CSS o con códigos cortos del propio theme.

Vamos paso a paso…

Parámetros válidos

Limitamos el ancho de los campos: size:50

Ponemos una longitud mínima de caracteres: minlength:5

Ponemos una longitud máxima de caracteres: maxlength:90

Ejemplo con el campo nombre: [text* size:50 nombre minlength:5 maxlength:50]

Estos parámetros son válidos para todos los campos.

Si utilizamos un campo de área de texto podremos también establecer las columnas (ancho) y filas (altura):

Se usa la siguiente sintaxis: 40×10 (Ancho y alto) – 40x (Solo ancho) – x10 (solo altura). Piensa que no estamos hablando de pixeles, sino de columnas y filas.

Ejemplos: [textarea areatexto 40×10 ] [textarea areatexto 40x ] [textarea areatexto x50 ]

Nota importante: En el caso de que tu theme ofrezca integración y estilos para Contact Form, tal vez no funcionen los campos size, columnas y altura, porque el theme asume el control mediante CSS personalizado para Contact Form 7.

Aplicando estos parámetros el resultado del formulario sería el siguiente:

Construcción del formulario

Ejemplo 2 de construcción de un formulario en Contact Form 7

¡Y este es el resultado!

Ejemplo 2 de resultado de un formulario en Contact Form 7
Como observarás a mi no me está respetando el parámetro size y me estira todo el campo hasta el final. Esto ocurre porque Avada está encargándose de las CSS y su estilo las estira.

Probablemente ocurra con otros muchos themes, pero si no es tu caso, deberías ver los campos mucho más cortos, con el tamaño lógico.

Lo que si funciona perfectamente es la longitud de caracteres que especifiqué y que no me permite escribir más allá de los indicados. Esta es u na práctica que te recomiendo encarecidamente, fundamentalmente por seguridad.

Aplicando estilo al formulario

La manera de aplicar estilo es mediante CSS. Si tu plantilla dispone de maquetador, podrás usar los códigos cortos para poder establecer columnas con los campos y si dispone de un apartado de CSS personalizado o desde el propio child podrá personalizar cualquier cosa.

Abordar todas las posibilidades sería interminable, por eso explicaré 2 de ellas, que pueden servirte a ti y casi a todos los usuarios..

Usuarios de Avada. Establece columnas con Fusion Builder

Con Shortcodes

Lo primero que has de hacer es añadir una función al archivo functions del theme. Así Contact Form 7 acepta y «entiende» los shortcodes de Avada.

Recuerda que si actualizas el theme, el código extra que insertes desaparecerá y tendrás que volver a incluirlo. Tal vez sea mejor implementarlo como plugin, pero para hacer tus pruebas irá perfectamente.

Copiar

En este caso utilizo Avada así que los shortcodes son los de Fusion Builder, pero es aplicable a cualquier theme que utilice códigos cortos. Por ejemplo, si utilizas Visual Composer, puedes usar los suyos.

Los shortcodes de Fusion Builder para las columnas tienen muchísimos parámetros. Tienes que usar los cortos de verdad…..o sea, los códigos cortos de los códigos cortos, jajajaja.

Me explico:

El código corto para una columna es el siguiente:

Copiar

Como ves es muy largo y sería incómodo. Debes utilizar este:

Copiar

Si quieres crear dos columnas es así:

Copiar

El formulario completo vendría a ser algo así:

Copiar

Y este sería el resultado

Ejemplo 3 de resultado de un formulario en Contact Form 7

En Avada con CSS

Si no quieres utilizar shortcodes puedes hacerlo mediante CSS y concretamente en Avada puedes aprovechar precisamente su integración para evitar tener que crear todo el CSS de cero, salvo que quieras algo muy especial.

Para establecer las columnas con las clases de Avada sería de esta manera:

Copiar

Y este sería el resultado…

Ejemplo 4 de resultado de un formulario en Contact Form 7

Recuerda que en Avada tienes un apartado en las opciones del tema > Extras > estilo de formularios, que te permite cambiar el aspecto de los campos en Contact Form 7, como por ejemplo la altura,  color de fondo del formulario, color del texto y color de los bordes.

Opciones de configuración en Avada para Contact Form 7

Crear las columnas con CSS en cualquier theme

Si no quieres usar códigos cortos y tu theme no tiene soporte de integración con Contact Form 7, puedes crear código HTML y CSS para crear las columnas. Sería algo así

En el formulario de Contact Form:

Copiar

Y en el Child Theme o en el apartado de CSS personalizado de tu theme incluimos lo siguiente:

Copiar

Aplicando colores u otros estilos en Contact Form 7

Al inicio del post te comenté que existe un plugin que te ayudará en esta tarea. Si no quieres instalarlo y prefieres hacerlo por tu cuenta, verás que es mucho más sencillo de lo que parece.

La forma más rápida y cómoda para evitar perder el código que vamos a escribir en caso de actualización es hacerlo en el child theme o en el apartado de CSS personalizado.

¿Cómo aplicar estilos y colores en Contact Form 7?

Supongamos que deseas poner un color de fondo marrón a todo el formulario. Los campos deben tener un fondo azul y el texto que se escribe en ellos es de color verde. Además le pondremos un borde grueso también de color verde. ¡Si ya se, que es hortera! pero es para que lo veas.

Aplicamos color de fondo a todo el formulario. El selector css para contact form 7 es wpcf7

Copiar

Ahora puedes añadir a cada campo un id o clase css para personalizarlo individual o colectivamente.

Por ejemplo, coge tres campos concretos que tengan ese estilo hortera y que destaquen.

Para ello crea un ID que se llame campo especial y lo aplicas. Por ejemplo, al campo nombre, correo electrónico y teléfono.

El código CSS sería este:

Copiar

Y en el formulario aparecería esto:

Copiar

Más posibilidades…

Otra posibilidad es que apliques estilos en función del tipo de campo. Por ejemplo, a los campos numéricos aplica un borde blanco grueso y el color de texto interior irá en blanco.

Si tienes varios campos de este tipo, les afectará todos. Para eso tenemos que utilizar una clase css y el selector será de la siguiente manera:

wpcf7 input [type=»number»]

Si quieres aplicarlo a un tipo de campo de texto usas «text» y así con todos los tipos.

Copiar

¡Y este sería el resultado de toda esta amalgama de estilos!

Aplicando colores y estilo en Contact Form 7

Más cosas interesantes en Contact Form 7

Como puedes ir observando Contact Form 7 es un formulario de contacto mucho más potente de lo que parece. Ahora te voy a dejar algunos tips que te ayudarán a sacarle un poco más de partido.

Guardar los formularios en la Base de datos

Utiliza Flamingo o bien Contact Form DB

Redirigir a los usuarios a una página después de enviar el formulario

Cuando se ejecuta el envío del formulario aparece un mensaje de agradecimiento y el usuario sigue donde está. Pero si quieres redirigirlo por algún motivo a otra página específica puedes hacerlo de la siguiente manera:

En la pestaña Ajustes adicionales debes añadir lo siguiente:

Copiar

Combina Contact Form 7 y Akismet

Añadir una capa extra de seguridad a tu formulario y luchar contra el spam es posible gracias a la posibilidad de combinar akismet y contact form 7.

¡Ten cuidado! porque si akismet se equivoca e interpreta que el formulario lo envía un spammer y no es así, perderás la información.

Para tratar de evitar esta situación en la medida de lo posible debes añadir a los campos Nombre, Email y Url los siguientes parámetros:

  • akismet:author: Para confirmar un nombre en tu formulario.
  • akismet:author_email: Para confirmar un email.
  • akismet:author_url: Para confirmar una URL

Quedaría algo así:

Copiar

Lo ideal es que utilices los tres campos, para ayudar a Akismet a validad los datos. Piensa que Akismet está concebido para validar comentarios, pero no formularios. Cuantos más datos le ofrezcas mejor podrá hacer su trabajo. Aun así no hay fiabilidad 100% de que no se equivoque. Haz pruebas para ver como funciona.

Seguimiento del envío de formularios con Google Analytics

Si utilizas Google Analytics para analizar tu tráfico web, tal vez quieras realizar un seguimiento de envíos de formularios de contacto.

Hazlo así:

Primero ten en cuenta que utilizas la última versión del código de analytics.

Necesitas crear un evento y notificarlo a Google cuando se envía el formulario. Puedes harerlo con la siguiente función en JavaScript

Copy to Clipboard

Lo incluyes en Ajustes Adicionales de este modo:

Copy

Asegúrate de que el código está en una sola linea.

Para ver que funcionan correctamente, puedes comprobarlo en Analytics: Comportamiento > Eventos > Vista general página

En teoría deberías recibir información pasadas 24/48 horas después del envío.

Cambiar la posición de la respuesta del formulario

Cuando se envía el formulario y no está redirigido, aparece un mensaje en la parte inferior indicando que se ha enviado con éxito, que ha fallado o lo que sea.

Si prefieres que este mensaje aparezca encima o en cualquier otra parte, es tan sencillo como agregar un código corto en la posición del formulario donde quieras que aparezca.

[response]

Copy to Clipboard
Your Name (required)[text* your-name]

Subject[text your-subject]

Your Message[textarea your-message] [submit «Send»]

Seleccionar un remitente desde el propio formulario

Esta opción es muy interesante si por ejemplo tienes varios correos o para una empresa con varios departamentos. La usamos si queremos que el propio usuario determine a quien va dirigido el correo.

Vamos a usar por ejemplo un menú desplegable.

Sería una cosa así:

Copy

Al crear este campo debes añadir un nombre de destinatario seguido de «|» y luego el correo. Así evitas que los bots o spammers puedan ver los correos.

Para completar el proceso recuerda que en la pestaña «Correo electrónico» debemos añadir este campo «Destinatario» en el apartado «Para».

Aplicar etiquetas para varios destinatarios en Contact Form 7

Etiquetas especiales para incluir en los emails

A veces es conveniente saber quien nos está enviando un formulario, sobre todo por motivos de seguridad.

Por ejemplo si se te cuela un robot que no para de enviarte formularios de spam y quieres bloquearlo, lo primero que necesitas es conocer su IP.

Contact Form 7 incluye una serie de metaetiquetas muy útiles para incluir en los correos electrónicos como cualquier otro tipo de campo.

Son las siguientes:

Copiar

Las buenas prácticas en el envío de correo electrónico con los formularios

El abuso y envío masivo y constante de emails que producen spam es tan grande que han tenido que tomar medidas en este sentido.

Eso genera nuevos retos y problemas, como por ejemplo la suplantación del correo, donde alguien puede enviar emails en tu nombre. La mayor parte de los robots e intentos de hackeo buscan precisamente esto. Total, que el mundo del email es muy complejo.

Todos los mensajes que se generan en una página web tienen todas las papeletas para ser considerados spam si no se siguen unas ciertas reglas. Y aun así no hay garantía 100% de que lleguen a los destinatarios. Si quieres evitar que esto te pase a ti presta mucha atención.

Utiliza una cuenta SMTP

La mejor opción es crear un correo específico para la web y que se envíen siempre a través de ahí. Yo siempre uso un plugin que redirecciona el correo a través de SMTP anulando el php mail. Hay muchos y todos funcionan bien. Particularmente uso Easy WP SMTP

Así a través de un email específico envío todos los correos que se generan desde la web tanto para mi como para mis usuarios. La verdad es que nunca he tenido problemas que yo recuerde.

Configurar SMTP para contact form 7 con Easy WP SMTP

Esta es la configuración y así logras que tu correo sea enviado por una cuenta de email verificado y real. Con este paso además no es necesario cambiar la función de Wordpress que envía el correo con la dirección wordpress@tudominio.com

Si usas php-mail

Si prefieres enviar los correos a través de tu servidor con php mail, entonces sigue estas recomendaciones.

No utilices una cuenta de correo con un dominio diferente al que estás utilizando en tu web. Es decir, si tienes un dominio que se llama pepeillo.com y envías los correos desde la web con una cuenta que se llama, por poner un ejemplo pepeillo@gmail.com (es decir, un dominio diferente) tienes muchas posibilidades de que los proveedores de correo electrónico lo consideren spam, precisamente porque eso es lo que hacen los spammers al utilizar correos que no tienen nada que ver con ellos.

Añade la función que expliqué en el tutorial para cambiar la cabecera y el email que envía el correo. Así no aparecerá wordpress@tudominio.com como remitente. Además del spam, es una cuestión de imagen.

Configura en tu servidor de correo la autentificación mediante SPF y si es posible DKIM. Esto lo soporta prácticamente la totalidad de los servidores de correo y se considera seguros.

Evita el HTML en el correo electrónico

Si no es necesario, evita el uso de HTML en el cuerpo de los correos que se envían.

No utilices los correos de los formularios para generar publicidad.

Procura que los mensajes de correo sean demasiado cortos. Esto puede confundir a los filtros y pueden considerarlo correo no deseado.

Cuidado con los campos vacíos del formulario. Si están vacíos procura que no aparezcan en el correo. Esto es configurable en Contact Form 7.

Espero que este tutorial te ayude a manejar y gestionar mejor este formulario de contacto. ¿A qué es más potente de lo que aparentemente parecía?

¿Cual es tu experiencia con Contact Form 7? ¿Nos la cuentas…? ¿Puedes añadir algo más que ayude a otros usuarios?

¡Nos vemos en la próxima!