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
- Registrando nuestra web para Google Recaptcha v3
- Integrando Contact Form 7 con Google Recaptcha v3
- Bonus: Problema de envío luego de activar Google Recaptcha v3 en Contact Form 7
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.
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.
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.
- 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)
- Tipo de recaptcha: Deberías usar la versión 3, que es la que se utiliza actualmente(2020) en Contact Form 7
- Dominios: Indica a que dominios(ej: carlosastudillo.com) quieres asociar el captcha.
- Establece propietario: Correo o correos que estarán asociados a este captcha.
- 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:
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.
Ahora, sin cerrar esta ventana deberás ir a tu plugin contact form 7 y elegir la opción «Integración»
Luego necesitas hacer clic en «Configurar la integración» en la sección de reCaptcha.
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.
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!