Activar Google Recaptcha v3 en Contact Form 7

Evitar el spam es una de las medidas más importantes a implementar en nuestros formularios de contacto. Contact Form 7 es un plugin de WordPress para crear estos formularios(ya te hablé antes de él y otras dos alternativas) y hoy te contaré como puedes activar Google Recaptcha v3 en él.

Particularidades de Google Recaptcha v3

Antes de hacer la implementación de Google Recaptcha v3 en Contact Form 7 es importante que conozcas algunos detalles sobre esta versión de Recaptcha, en relación con sus antecesores. Cuando te enfrentas a un formulario de cualquier tipo en una web, acostumbramos a ver justo antes del envío, una casilla de «No soy un Robot» que nos ayuda a evitar el envío de spam.

no soy un robot captcha v2

En la nueva versión de Google Recaptcha esto cambia totalmente, en ella ya no se requerirá de acción alguna de parte del usuario para pasar la validación, sino que al activar este servicio de Google, se instalará un monitoreo continuo sobre cualquier acción sospechosa detectada.

Al final de los pasos que voy a compartir contigo, si todo está correctamente configurado, verás en la esquina inferior derecha de tu página el icono de Google Recaptcha.

recaptcha google v3

Registrando nuestra web para Google Recaptcha v3

Muy bien, a lo que hemos venido. El primer paso para configurar Google Recaptcha en Contact Form 7 es registrarnos en el Sitio Oficial tal como te explico a continuación.

  1. Asignar un nombre de etiqueta: esto se usará para identificar esta configuración de Recaptcha, en caso de que tengas más asignadas en tu cuenta de Google(Gmail)
  2. Tipo de recaptcha: Deberías usar la versión 3, que es la que se utiliza actualmente(2020) en Contact Form 7
  3. Dominios: Indica a que dominios(ej: carlosastudillo.com) quieres asociar el captcha.
  4. Establece propietario: Correo o correos que estarán asociados a este captcha.
  5. Aceptar términos y condiciones, para luego presionar el botón «Enviar».

Si seguiste los pasos correctamente., al final deberías tener algo como esto:

registrar captcha v3

Integrando Contact Form 7 con Google Recaptcha v3

Una vez hayamos enviado el formulario de registro, seremos dirigidos a una página donde tendremos disponibles nuestra clave de sitio web y clave secreta. Estos datos nos permitirán configurar Google Recaptcha v3 en Contact Form 7.

clave secreta recaptcha

Ahora, sin cerrar esta ventana deberás ir a tu plugin contact form 7 y elegir la opción «Integración»

integracion contact form 7

Luego necesitas hacer clic en «Configurar la integración» en la sección de reCaptcha.

recaptcha contact form 7

Y finalmente pegar las claves en las casillas correspondientes, para luego guardar los cambios. Con eso ya estará integrado captcha y deberías ver el icono en la parte inferior derecha de tu página web.

pegar claves recaptcha contact form 7

Bonus: Problema de envío luego de activar Google Recaptcha v3 en Contact Form 7

Como dato adicional, quería compartir contigo mi experiencia tratando de integrar Contacto Form 7 con Google recaptcha v3 en la web de un cliente.

Después de seguir todos los pasos, aun no lograba que se activara captcha y para colmo de los males, el formulario de contacto empezó a fallar y ya no se podían enviar los mensajes, recibiendo el error «No se ha podido enviar el mensaje. Por favor inténtelo más tarde».

Empecé a revisar el asunto y me di cuenta de que era un problema bastante común. En mi caso se debía a que el Child Theme que había generado carecía de ciertos scripts. Al activar el Theme padre, pude ver que funcionaba todo bien, así que miré ahí el código fuente y traspasé los script de recaptcha a mi Child Theme con lo que el problema quedó resuelto.

Si tienes más dudas sobre esto, recuerda que tengo un curso básico de páginas web con wordpress y además puedes contratar una sesión de consultoría para aprender más sobre estos y otros temas y no olvides lo que siempre digo, todos podemos hacerlo, «Dios nos hace con sueños y las herramientas para alcanzarlos»

¡Nos leemos!