Contact Form 7 es el plugin WordPress más utilizado para crear formularios de contacto para páginas web y blogs. Este plugin te va a permitir hacer cualquier formulario con la cantidad y tipo de campos que necesites.

También te puede servir:
Cómo hacer un formulario de contacto con Divi
Cómo hacer un formulario de contacto con Jetpack

¿Qué puede hacer Contact Form 7?

Este plugin para WordPress no solo es útil para crear un simple formulario de consultas sino que se puede utilizar para recoger todo tipo de información, sea de clientes o de personas interesadas en tus servicios. Con Contact Form 7 podrás:

• Recibir consultas de potenciales clientes.
• Gestionar las comunicaciones entre clientes y los distintos integrantes de tu equipo.
• Recibir solicitudes de presupuesto bien detallados.
• Recibir pedidos o encargos.
• Hacer una encuesta.
• Recibir archivos.

Por este motivo consideré necesario crear un tutorial bien completo sobre Contact Form 7, ya que si nos ponemos a revisar todas sus opciones y posibilidades puede resultar algo engorroso entenderlo al principio. Pero no podemos dejarlo de lado por ese motivo.

¿Qué es un formulario de contacto?

Seguro que más de una vez, navegando por la página de contacto de algún sitio web, encontraste un formulario que, al rellenarlo, te permite enviar una consulta o determinada información al administrador de la página.

Un buen ejemplo de ésto es el que tenemos en la sección de contacto de Aventura Digital.

Eso es lo que llamamos un formulario de contacto y funciona de la siguiente manera:

1. La persona interesada completa el formulario con los datos requeridos, generalmente su Nombre y Dirección de Email, y con la consulta que desea realizar. Luego hace clic en el botón de Enviar.
2. Esos datos se envían por email al administrador de la página, quien lo recibe como si fuera un correo electrónico más, directamente en su bandeja de entrada.
3. El administrador luego responde la consulta por email y la persona interesada recibe la respuesta en su buzón de correo. A partir de ahí la conversación continúa por email como cualquier otra.

Como ves, es igual que enviar un email de la forma tradicional, pero iniciando la conversación desde el sitio web.

¿Por qué utilizar un formulario?

Quizás te preguntes por qué deberías utilizar un formulario de contacto en lugar de publicar directamente en tu dirección de correo electrónico para que te envíen un email de la forma tradicional.

Utilizar un formulario de contacto tiene algunas ventajas con respecto a la otra forma:

• En primer lugar proteges tu dirección de email de ser capturada por spammers, programas automáticos que recorren internet recolectando toda dirección de email que encuentran para luego enviarles spam.
• Para el visitante es más práctico porque él ya está en tu página y así no lo obligas a entrar en su cuenta de email, copiar y pegar tu dirección.
• Cuanto más fácil sea, más probable que lo hagan. Si quieres que te escriban pon las cosas fáciles. Las personas están en tu página, si los obligas a que vayan a su email para escribirte muchos simplemente no lo harán.
• Las personas al escribir tu dirección podrían equivocarse, tú nunca recibirías el mensaje y ellos quizás piensen que no les importas.
• Controlas qué información quieres recibir de las personas evitando así que te lleguen consultas con información faltante que no podrás responder.
• Mejoras la experiencia del usuario y logras que permanezca más tiempo en tu página ya que, luego de enviar la consulta, continuará navegando ahí.

Estos son los motivos principales por los que deberías utilizar un formulario de contacto, seguro que hay más, por eso vamos a ver paso a paso cómo hacer el tuyo con el plugin de WordPress Contact Form 7.

Video Tutorial de Contact Form 7

Para aprovechar al máximo este video tutorial de Contact Form 7 recuerda ponerlo en pantalla completa y seleccionar la mayor resolución (720 HD).

¿Cómo comenzar con Contact Form 7?

Antes que nada aclaro que cuando hablamos de plugins para WordPress nos referimos siempre a que tengas tu página o blog en WordPress en tu propio hosting (no WordPress.com). Ya que en ésta última plataforma no es posible instalar plugins.

Si actualmente tu página está allí y te gustaría evolucionar puedes hacerlo siguiendo los pasos de la guía completa para migrar de WordPress.com a WordPress.

Luego de instalar y activar el plugin vas a ver una nueva opción en el menú de WordPress, el botón Contacto. Desde allí se accede al área de creación y configuración de formularios de Contact Form 7 que tendrá el siguiente aspecto.

Este plugin te permite crear todos los formularios que quieras, aunque generalmente te bastará con uno solo. Por eso, lo primero que vas a ver es la lista de formularios con un formulario predeterminado listo para usar (1).

Activando un formulario en menos de 2 minutos

Como te decía más arriba, Contact Form 7 te hace las cosas bien fáciles y te trae un formulario predeterminado (1) listo para usar que, en la mayoría de los casos es más que suficiente. Sobre todo si no quieres complicaciones o no tienes tiempo.

Lo que debes hacer para poner a funcionar el formulario predeterminado es copiar el código (2) y pegarlo en la página que corresponda, en la posición donde quieras que se muestre el formulario.

Listo. Si guardas la página y vas a la vista publicada o a la vista previa verás el formulario de contacto listo para recibir consultas. Las mismas te llegarán a tu buzón de correo como si fueran un email más.

Me refiero a la dirección que hayas ingresado en los Ajustes Generales de WordPress previo a la instalación del plugin.

Personalizando tu formulario de contacto

Ahora, si quisieras mejorar un poco el formulario, personalizando los textos de cada campo o incluso quitando alguno o añadiendo campos nuevos debes hacer clic en Editar, justo debajo del nombre del formulario.

De esta forma accedes a la configuración del formulario de contacto desde donde podrás hacer todos los cambios que quieras.

Esta área contiene cuatro pestañas, cada una con una función diferente. Vamos a ver para qué sirve cada una.

Formulario

Desde la pestaña Formulario de Contact Form 7 podrás personalizar totalmente el formulario de contacto.

Lo que ves es el código HTML del formulario. En realidad es una mezcla de HTML y las etiquetas que utiliza el plugin para identificar los campos del formulario.

Esto podrá parecerte muy complicado si nunca viste nada de código pero no te preocupes, es más difícil explicarlo que hacerlo, te recomiendo ver el video.

Fíjate que cada campo del formulario de contacto se corresponde con un elemento del código que está encerrado entre etiquetas <p> y </p>. O sea que en este caso estamos frente a un formulario con 6 elementos: Nombre, Email, Teléfono, Asunto, Consulta y el botón Enviar.

Si miramos en detalle veremos que cada elemento del formulario está compuesto de la siguiente manera:

<p>Tu nombre (requerido)<br />
[text* your-name]</p>

• <p> – Etiqueta de apertura, es conveniente dejarla así.
• Tu nombre (requerido) – Texto para mostrar al usuario, puedes poner lo que quieras aquí.
• <br /> – Etiqueta de salto de línea, para que el campo a completar aparezca debajo del texto anterior.
  
• [text* your-name] – Código del campo, es donde el usuario ingresa la información. Más detalles a continuación.
• </p> – Etiqueta de cierre, es conveniente dejarla así.

A su vez el código de cada campo se compone de la siguiente manera:

[text* your-name]

• [ – Apertura.
  
• text – Indica el tipo de campo. Te dejo más abajo la lista completa.
• * – Es opcional e indica si el campo es obligatorio.
• your-name – Es la etiqueta del campo y sirve para recoger el valor ingresado. Puedes poner lo que quieras pero no deben repetirse.
• ] – Cierre.
  

Ahora vuelve a mirar la imagen anterior y pon atención a cómo están escritos los distintos campos de este formulario.

1. Considera que algunos son obligatorios (tienen asterisco) y otros no.
2. Nota que en las etiquetas your-name, your-email, your-subject, etc., puedes poner lo que quieras pero nunca se repiten.
3. Observa que el código del botón de Enviar es diferente a los demás campos.

Tipos de campo disponibles en Contact Form 7

Los tipos de campo más comunes de Contact Form 7 son los siguientes:

• text. Texto de una sola línea para ingresar por ejemplo: nombre, asunto, dirección, etc.
• email. Valida que el valor ingresado tenga formato de email.
• textarea. Texto de varias líneas para ingresar la consulta o mensaje.
• submit. Botón para enviar la consulta.

Otros tipos de campo también disponibles pero menos utilizados son:

• url. Valida que el valor ingresado tenga formato de url.
• tel. Valida que el valor ingresado tenga formato de teléfono. No lo recomiendo. Para teléfonos mejor utilizar text ya que la forma de escribirlo es diferente en cada país.
• number. Valida que el valor ingresado sea un número.
• date. Para ingresar fechas.
• select. Para seleccionar opciones en un menú desplegable.
• checkbox. Casillas para seleccionar opciones.
• radio. Botones para seleccionar opciones.
• acceptance. Casilla para aceptar las condiciones de uso del formulario.
• quiz. Para hacerle una pregunta al usuario y validar la respuesta.
• file. Para adjuntar archivos.

Como se ve reflejado en este listado las posibilidades son casi ilimitadas, pudiendo crear desde un simple formulario de consultas hasta una encuesta de lo más completa.

Si te marea un poco toda esta cuestión del código te vuelvo a recomendar que mires el video. Está explicado de una forma más práctica y lo vas a ver más claro.

Generador de etiquetas

El Generador de etiquetas de formulario que se encuentra en la parte superior de la pestaña Formulario ofrece una forma algo más visual de crear nuevos campos para el formulario.

Haciendo clic en el tipo de campo que quieres crear te abre una ventana con las opciones a definir y te permite copiar y pegar el código ya generado. Te evita escribir código manualmente.

Sin embargo no te exime de conocer todo lo que fuimos viendo sobre el código del formulario, porque si quieres modificar o borrar un campo ya creado el generador de etiquetas no te servirá. Es solo para crear campos nuevos.

Correo electrónico

En la pestaña Correo electrónico se encuentran las opciones para personalizar el email que recibirás tú cuando alguien te envíe una consulta desde el formulario.

Es como armar una plantilla de email poniendo en cada lugar la información del formulario que quieres recibir.

Igual que en la pestaña anterior, Contact Form 7 ya trae el email configurado de manera predeterminada por lo que podrías no hacer nada. Excepto que hayas agregado nuevos campos al formulario, entonces sí debes pasar por aquí obligatoriamente.

O quizás solo quieras acomodar los datos de una forma que te resulte mejor.

En la parte superior de la pestaña Correo electrónico tenemos las etiquetas disponibles para utilizar en esta configuración. Se trata de todas las etiquetas que hayas utilizado en la pestaña Formulario. Estas etiquetas recogen los datos ingresados por las personas en cada campo del formulario para luego ser insertados en el email que tú recibirás.

Analicemos cada uno de los datos a ingresar en esta pestaña:

• Para – Es la dirección de email donde recibirás la consulta enviada. De forma predeterminada aparece la que indicaste en los Ajustes Generales de WordPress pero puedes cambiarla desde aquí.
• De – El remitente, o sea el nombre de la persona que te envía la consulta. Nota que utilizamos la etiqueta [your-name] que es la que correspondía al campo Tu nombre en la pestaña Formulario. Vuelve arriba para verlo.
  Luego se pone entre signos < > una dirección ficticia que tenga el mismo dominio de tu página. Por ejemplo: [email protected].
• Asunto – En el asunto del email que vas a recibir ponemos la etiqueta que corresponde al campo Asunto del formulario. En este caso [your-subject].
• Cabeceras adicionales – Vamos a añadir a nuestro email la cabecera adicional Reply-To seguida de la etiqueta del campo Tu Email, [your-email] en este caso.
  De esta forma, cuando hagas clic en responder, tu programa de correo sabrá que tiene que responder a esa dirección y no a la dirección ficticia que pusimos en De.
• Cuerpo del mensaje – En el cuerpo del email puedes poner el resto de las etiquetas del formulario en la disposición que más te guste. Puedes alternar etiquetas con textos tuyos para que te resulte más fácil de leer cuando lo recibas.
• Archivos Adjuntos – En el cuadro Archivos adjuntos debes poner la etiqueta del campo tipo file, si lo tuvieras. De esta forma los archivos cargados por el usuario te llegarán como adjuntos del email.
  Si en cambio, pones esta etiqueta en el Cuerpo del mensaje te mostrará solo el nombre de los archivos pero no los adjuntará.

Respuesta automática

Si debajo de Archivos adjuntos activas la opción Usar correo electrónico (2) podrás configurar, de la misma manera que antes, un email automático para enviarle a la persona que generó la consulta.

Nota que ahora en Para ponemos la etiqueta que corresponde a Tu Email en el formulario, en este ejemplo [your-email]. Ver arriba.

Y en De irá tu propio nombre con una dirección ficticia que tenga el mismo dominio de tu página. No pongas aquí tu dirección real porque la estarías exponiendo a cualquier spammer que envíe el formulario con datos aleatorios.

En Asunto y Cuerpo del mensaje puedes poner lo que quieras y en Cabeceras adicionales no tiene sentido poner nada.

Mensajes

En la pestaña Mensajes podemos personalizar los mensajes y alertas que WordPress le mostrará al usuario ante determinadas situaciones.

Este plugin dispone de una lista muy amplia de posibles situaciones que ya traen un mensaje predeterminado. Puedes dejarlo así o cambiarlos a tu gusto.

Contact Form 7 incluye mensajes y alertas para las siguientes situaciones:

• El mensaje se ha enviado con éxito.
• El mensaje no se ha podido enviar.
• Ocurrió un error de validación.
• El envío se consideró spam.
• Debe aceptar todos los términos.
• Debe completar todos los campos.
• Hay un campo cuyo contenido es más largo que la longitud máxima permitida.
• Hay un campo cuyo contenido es más corto que la longitud mínima permitida.
• La fecha es anterior al límite permitido.
• La fecha es posterior al límite permitido.
• La carga del archivo ha fallado por alguna razón.
• El archivo subido no tiene un formato permitido.
• El archivo subido es demasiado grande.
• La carga del archivo ha fallado por error de PHP.
• El formato de número que introdujo el usuario es incorrecto.
• El número es menor que el límite permitido.
• El número es mayor que el límite permitido.
• El usuario introdujo una respuesta incorrecta.
• La dirección que introdujo el usuario es incorrecta.
• La URL que introdujo el usuario es incorrecta.
• El número de teléfono que introdujo el usuario no es válido.

Ajustes adicionales

La pestaña Ajustes adicionales de Contact Form 7 permite ingresar código personalizado para añadirle funcionalidades a tu formulario. Necesitarás saber algo de programación para ésto.

Antes de terminar con este tutorial de Contact Form 7 quiero que veamos una posibilidad poco conocida que ofrece este plugin para WordPress y que puede ser útil en ciertos casos.

Formulario con múltiples destinatarios

Supongamos que trabajas con empleados, socios o colaboradores y que cada uno tiene a su cargo una tarea o función determinada. Podrías querer que las consultas sobre temas afines a cada sector sean dirigidas a la persona que corresponde, en lugar de pasar todo por ti o por una secretaria.

Pero por otro lado no vas a tener en tu página un formulario distinto para cada una de estas áreas, las personas podrían confundirse y terminar abandonando.

Por suerte Contact Form 7 permite crear un campo para que el usuario pueda seleccionar a qué persona dirigir la consulta.

Para aprovecharlo debes agregar un campo de tipo select configurado según el siguiente ejemplo:

<label>A quién dirige este mensaje<br />
[select your-recipient «Secretaría | [email protected]»
«Ventas | [email protected]»
 «Area técnica | [email protected]»] </label>

En este ejemplo la etiqueta your-recipient es la que pondríamos en el Para de la pestaña Correo electrónico.

Luego, entre comillas, debes poner cada nombre y dirección separados por una barra vertical. El nombre es lo que verán las personas en un menú desplegable de tu formulario. El resultado será el siguiente.

Una vez más tus direcciones de email queda ocultas y protegidas a la vez que las personas pueden seleccionar al destinatario adecuado de una forma cómoda y clara.

Formulario con campos condicionales

En ocasiones necesitamos incorporar a un formulario campos que se activen según se seleccione determinada opción en otro campo. El caso más común es el de mostrar un selector de provincias según el país que haya marcado el usuario en otro selector.

Esto es lo que se llama campos condicionales. Si yo elijo en un selector el país Argentina luego aparece un segundo selector con las provincias de este país, pero si en cambio elijo España debe mostrarme las provincias correspondientes a ese otro país.

Para lograr ésto con Contact Form 7 debemos añadir una extensión que es el plugin Contact Form 7 Conditional Fields. Este complemento añade una pestaña al editor de formularios llamada Conditional fields en la cual podemos configurar las reglas según la que se mostrarán los campos condicionales.

También añade un botón a la pestaña Formulario llamado Conditional fields group que te permite etiquetar los elementos condicionales del formulario y así utilizar estas etiquetas en la creación de reglas.

Selector de País: Cómo se puede ver en el ejemplo tenemos en primer lugar el selector de país, que es un selector normal de Contact Form 7.

Selector condicional 1: En segundo lugar está encerrado entre las etiquetas [group ProvinciasAR] y [/group] otro selector que contiene las provincias de Argentina.

Selector condicional 2: En tercer lugar, también encerrado entre las etiquetas [group ProvinciasES] y [/group] tenemos otro selector que contiene las provincias de España.

Y así deberías crear un selector de provincias para cada uno de los países que tengas en el selector de país.

Luego en la pestaña Conditional fields configuramos las reglas para que se muestre el selector de ProvinciasAR cuando alguien elija Argentina en el campo País y lo mismo con ProvinciasES cuando se elija España.

Haciendo ésto obtenemos el resultado mostrado en las imágenes de selectores de país y provincia más arriba pero no es lo único, también podríamos añadir un tercer nivel de selectores para elegir una ciudad según la provincia y seleccionada en el segundo selector.

Estas reglas condicionales se pueden combinar cómo se te ocurra.

Formulario de suscripción con Contact Form 7

Si utilizas MailChimp para gestionar una newsletter o determinados envíos a tu lista de contactos te va a resultar muy útil esta extensión de Contact Form 7.

Se trata de un plugin que se llama Contact Form 7 MailChimp Extension y lo que hace es añadir automáticamente las direcciones de email y demás datos de quienes envían tu formulario a una lista en tu cuenta de MailChimp. Ésto convierte literalmente tu formulario de Contact Form 7 en un formulario de suscripción.

Esta extensión añade una nueva pestaña al editor de formularios en la que debes ingresar la API Key de tu cuenta de MailChimp, el ID de la lista a dónde quieres añadir a los contactos e indicar los campos de tu formulario correspondientes al email y al nombre.

También te permite habilitar o no el optin doble y puedes almacenar otros campos de tu formulario si tienes creados los campos correspondientes en tu lista de MailChimp.

Es importante que, según las leyes de protección de datos personales de tu país, adviertas a las personas que van a ser añadidas a una lista y que van a recibir periódicamente correos tuyos si fuera el caso.

Formulario para usuarios registrados

Quizás tengas que hacer un formulario para usuarios que están registrados en tu WordPress. En este caso no tiene sentido obligarlos a escribir su nombre y dirección de email puesto que ya los tienes almacenados en el sistema.

Para estos casos Contact Form 7 cuenta con una serie de opciones que te permiten traer automáticamente al formulario los datos de usuarios registrados.

Tu nombre
[text* your-name default:user_display_name]

Tu email
[email* your-email default:user_email]

Tu mensaje
[textarea* your-message]

[submit “Send Message”]

En el ejemplo anterior añadimos unas opciones a los campos your-name y your-email del formulario. Lo que hacen es obtener respectivamente el nombre y el email del usuario registrado y auto-completan los campos del formulario con esos datos.

Esta es la lista completa de opciones disponibles:

default:user_login -> Usuario de acceso.
default:user_email -> Email del usuario.
default:user_url -> Url del sitio web del usuario.
default:user_first_name -> Nombre del usuario.
default:user_last_name ->  Apellido del usuario.
default:user_nickname -> Alias del usuario.
default:user_display_name -> Nombre a mostrar del usuario.

Campos de solo lectura

En los casos en que levantes datos del usuario desde la base de datos de WordPress puede ser que no quieras que el usuario cambie esos datos antes de enviar el formulario.

Si éste fuera el caso Contact Form 7 nos permite añadir el atributo «readonly» a un determinado campo para convertirlo en solo lectura.

Simplemente tenemos que añadir el atributo dentro del shorcode del campo de esta forma:

[text your-name default:user_display_name readonly]

El resultado será que el usuario podrá ver el campo con el dato precargado pero no podrá modificarlo.

Bandeja de mensajes entrantes en WordPress

Contact Form 7 tiene, en apariencia, un gran defecto y es que no almacena en WordPress los mensajes recibidos por tu formulario de contacto.

Los mensajes recolectados por dicho formulario se envían directamente a tu email. Pero qué pasa si alguno cayera en spam y no te enterases, o si falla el servidor de correo y ni siquiera se envía, o si simplemente no es entregado a tu bandeja de entrada por tu gestor de correo debido a sus propios filtros.

Gmail por ejemplo está muy severo últimamente con su política anti-spam y no se limita a poner los mensajes así considerados en spam, muchas veces ni siquiera los entrega si los considera spam del peor. Y como no podemos controlar las palabras que utilizarán las personas para escribirnos, ni la cantidad, ni cómo redactan el asunto, o si escriben todo en mayúsculas, etc., es bastante probable que algunos de esos emails no lleguen nunca a su destino.

Bandeja de recibidos

Una forma de garantizarnos no perder ningún mensaje es almacenándolos dentro del propio WordPress, como en una bandeja de entrada. Y ésto es posible en Contact Form 7 gracias Flamingo, un complemento que se instala como un plugin más y, con solo activarlo, nos crea una bandeja de Mensajes recibidos con todas las consultas recolectadas por nuestros formularios. No es necesario configurar nada.

Libreta de direcciones

Además de los mensajes recibidos Flamingo crea también una Libreta de direcciones, no solo con los contactos que nos enviaron mensaje desde el formulario de contacto sino que agrupa también a los que dejaron algún comentario en el blog. Lo que nos permite tener un seguimiento de la persona que nos está contactando.

Consulta la IP de quién te escribe

Otra cosa muy útil que aporta Flamingo es que almacena la IP de la persona que envía el formulario, lo cual te permite saber (con una herramienta online como Utrace) de qué país o ciudad te está escribiendo.

Ésto para mí es muy importante ya que, en el caso de tener que pasar un presupuesto, puedo saber si enviarlo en dólares, euros o pesos, u ofrecer formas de pago particulares según de dónde sea esta persona.

Y si sabes que quién escribe es de tu propio país puedes usar expresiones locales que no te convendría utilizar con alguien que no está familiarizado con ellas. O incluso ofrecerle una llamada telefónica para tener más chances de ganar el trabajo.

Combatiendo el spam con reCaptcha

Es probable que, en algún momento, comiences a recibir publicidad a través de tu formulario. En el 100% de los casos se tratará de programas automáticos (robots), que navegan internet buscando formularios de contacto para enviarles cierta publicidad.

Para evitar este tipo de ataque que puede llegar a resultarte muy molesto, según la cantidad de mensajes spam que recibas, se inventaron hace mucho tiempo ya, los llamados captcha (sistemas encargados de distinguir a un humano de un robot).

Un captcha es habitualmente ese texto en formato de imagen y medio camuflado, que muchas veces te habrán pedido copiar para validar que eres una persona y no un robot.

Sí, ese maldito texto que muchas veces no se visualiza correctamente y que con frecuencia confundimos un 1 con una l o un 8 con una g cursiva, y que tenemos que volver a ingresarlo una y otra vez.

Esto es así porque algo que los robots no pueden hacer, y sí las personas, es leer el texto camuflado en una imagen.

Pero no te preocupes. No es esa solución tan molesta la que vas a utilizar en tu web, sino otra mucho mejor.

ReCaptcha es un reciente invento de Google que se basa en otra de las cosas que los robots no pueden hacer y sí las personas: darle clic a la página.

ReCaptcha nos permite validar que somos humanos con un solo clic.

Para utilizar reCaptcha debes activarlo accediendo con tu cuenta de Google aquí: https://www.google.com/recaptcha.

Puedes ver cómo activarlo e integrarlo en tu formulario de contacto en el siguiente video:

En la página de reCaptcha debes ir al botón que dice Get reCAPTCHA, casi siempre en la parte superior.

Luego te mostrará un formulario donde completarás con un nombre para identificar el reCaptcha que vas a crear (1) y el dominio (2). Y haces clic en Register (3) para registrar el nuevo sitio.

Una vez hecho ésto Google te muestra otra página con cierta información sobre cómo integrar el reCaptcha recién creado a tu sitio web. En este caso lo único que vamos a necesitar son la Site key y la Secret key.

Sin cerrar esa página abrimos, en pestaña aparte, el escritorio de tu WordPress y vamos a la opción Contacto -> Integración.

Le das clic a Configurar claves para poder integrar tu reCaptcha recién creado en Contact Form 7.

Y en la siguiente pantalla copias y pegas las dos claves que vimos antes (Site key y Secret key), en el mismo orden y guardas los cambios.

Ahora solo te queda agregar a tu formulario el campo reCaptcha. Esto lo haces, como ya vimos, desde la pestaña Formulario.

Generalmente se coloca justo antes del botón Enviar como puedes ver en la siguiente imagen.

Y así es como lo verás en tu formulario publicado.

Si la persona no hace clic en el cuadro de reCaptcha para validar que no es un robot el formulario no se envía.

Si, luego de añadir el módulo reCaptcha a tu formulario, tuvieras problemas de visualización, por ejemplo que el reCaptcha se superponga con el botón de Enviar, o que salga cortado, puedes añadir a tu formulario el siguiente código antes y después del reCaptcha:

<div style=»clear: both;»>&nbsp;</div>

Ahora sí tienes un formulario de contacto muy práctico y libre de spam.

Redirigir a otra página luego del envío

Algo que en ocasiones necesitamos es redirigir al usuario a una nueva página luego de enviar el formulario. Podría ser para medir el evento mediante un código de seguimiento, para ofrecerle alguna oferta o mandarlo a leer determinado artículo.

Vamos a ver dos formas de hacerlo, primero con un código y segundo con un plugin.

Redirigir Contact Form 7 con un código

Hacer ésto no es tan sencillo porque implica añadir un fragmento de código a tu plantilla, pero tampoco es muy complicado, solo tienes que añadir el siguiente código al archivo footer.php de tu plantilla, reemplazando la url ejemplo.com por tu propia url de destino:

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    location = ‘http://ejemplo.com/’;
}, false );
</script>

Para eso vamos a Apariencia -> Editor. Una vez dentro buscamos a la derecha el archivo que dice Pie de página del tema (footer.php) y agregamos el código justo antes de la etiqueta </body>. Eso es todo.

El único problema que tiene ésto es que, cuando actualices la plantilla, el cambio se va a perder y vas a tener que insertar el código de nuevo. Para evitarte esa molestia te conviene crear un tema hijo y efectuar este cambio sobre el mismo.

Redirigir Contact Form 7 con un plugin

Una forma mucho más sencilla de redirigir a otra página luego del envío del formulario es utilizar el plugin Contact Form 7 Redirection.

Este plugin es una extensión que añade una nueva pestaña al editor de cada formulario llamada Redirect Settings, desde la cuál nos permite elegir de una lista (1) a qué página queremos redirigir al usuario, luego de un envío exitoso.

Y no solo a una página de tu WordPress, también permite redirigir a una URL externa (2). En este caso no te olvides de marcar la casilla Use external URL.

Entre sus pocas opciones se encuentra además la posibilidad de enviar los campos del formulario como parámetros de la url y abrir la página de destino en una nueva pestaña.

También dispone de una caja para insertar tu propio script para que se ejecute luego de un envío exitoso del formulario.

Otra ventaja de usar este método, respecto de insertar un código, es que podemos configurar una redirección diferente para cada formulario que tengamos.

Otras extensiones muy útiles para Contact Form 7

DataPicker es una extensión que te permite añadir un campo de fecha para que los usuarios puedan seleccionarla de manera visual.

Multi-Step Forms. Si lo que necesitas es un largo cuestionario nada mejor que dividirlo en pasos con varios formularios. Este plugin te permite transformar tu formulario en «multistep».

Paypal Extension es un plugin que te permite crear un formulario para efectuar un pedido vía PayPal con Contact Form 7.

Customizer te permite personalizar visualmente tu formulario sin saber de CSS, algo que le falta a Contact Form 7.

WooCommerce Orders. Si tienes una tienda online con esta extensión puedes añadir un campo que le permite a tu cliente elegir el pedido sobre el cual está haciendo la consulta.

Signature Addon. Y éste es el más loco de todos. Con este complemento los usuario pueden firmar físicamente el formulario (si tienen un dispositivo para eso). Es raro que lo necesites pero Contact Form 7 da para todo, ¿no te parece?

Hasta aquí llegamos con este tutorial de Contact Form 7, el mejor plugin de formularios para WordPress que existe. Ahora solo te queda personalizar un formulario y probarlo haciéndote un envío.

Lógicamente que hay muchos otros plugins para crear formularios de contacto en WordPress, y sin duda que los hay más fáciles también. No se cuál será el mejor, de hecho eso es algo muy subjetivo, pero Contact Form 7 es el más utilizado hasta ahora y no por nada.