En su ultima actualización Contact Form 7 ha abandonado el uso de Google reCAPTCHA v2 para incorporar la nueva versión reCAPTCHA v3, pero parece que está generando errores en muchos formularios. Yo mismo, en esta web me he visto afectado por este problema. Por lo que si este es tu caso, ¡relájate!, ya que aquí tienes la solución a este incómodo problema.
📧 Contact Form 7 y Google reCAPTCHA
Contact Form 7
Si queremos incorporar un formulario de contacto a nuestro sitio web WordPress, tenemos muchas opciones. Al realizar una búsqueda en Google encontraremos una infinidad de artículos que hablan de este tema. Si bien es cierto que hay plugins muy populares ya sean opciones de pago como Gravity Forms, o gratuitas como Ninja Forms, hay un nombre que siempre se repite y que destaca sobre la mayoría. Éste es Contact Form 7 de Takayuki Miyoshi.
A simple vista CF7 puede parecer demasiado simple. O incluso al contrario, si eres un usuario novel en WordPress o con un perfil poco técnico puede parecerte complejo el hecho de trabajar con shortcodes. Eso aumenta si lo comparas con su competencia, que suele tener editores muy vistosos mediante JavaScript. ¡Pero nada más lejos de la realidad! Al menos desde mi punto de vista, los shortcodes de Contact Form 7 convierten a éste plugin en el plugin de formularios más productivo para WordPress.
Además de esto, Contact Form 7 cuenta con un amplio ecosistema de add-ons para extender sus funcionalidades. Son muchos los desarrolladores que han decidido crear otros plugins que complementan a éste plugin. Gracias a ello CF7 no solo cubre todas las necesidades básicas para crear formularios, sino que además, lo puedes extender añadiendo nuevas funcionalidades para crear así formularios mucho más complejos.
Pero incluso Contact Form 7 por si solo es un plugin de formularios potente. Una de sus mejores características es que incluye de serie la integración con Google reCAPTCHA, el sistema de captcha de Google.
Google reCAPTCHA
Los captchas son la forma que tienen los formularios de comprobar, mediante una pregunta-respuesta, que quien esta rellenando el formulario es un humano y no una máquina. Son una medida de seguridad indispensable si tienes formularios en tu sitio web. Ya que el captcha te protegerá a ti y a tu bandeja de correo electrónico del maldito spam.
Desde que Google compró a la empresa reCaptcha allá en el año 2009, no ha dejado de mejorar el que sin duda se ha convertido en la medida de seguridad para formularios más conocida de todo Internet. Al principio éste era como cualquier otra prueba de autenticación para formularios, una palabra distorsionada y un campo de texto para que el usuario la completará.
Luego apareció el Google reCAPTCHA v2, los usuarios ya no teníamos que rellenar ese (molesto) texto. Todo se simplifico a un solo clic al lado de la afirmación “No soy un robot”. Pero Google no se detuvo allí y lanzó Google reCAPTCHA v3, ¡por fin el captcha ya ni sale en pantalla! Mediante un complejo algoritmo Google analiza el comportamiento del usuario para saber si es un humano, y solo en el caso que dude de ello el captcha será visible.
⚠️ El problema con Contact Form 7 y el nuevo Google reCAPTCHA v3
Con la versión 5.1, Contact Form 7 por fin ha actualizado la integración de Google reCAPTCHA a la nueva versión v3, lo que para muchos ha sido una alegría. Además la transición es muy sencilla. Al instalar la nueva versión del plugin, éste solicita actualizar las claves de la API de nuestro reCAPTCHA, ya que las versiones v2 y v3 no usan las mismas. Una tarea simple y que se hace en pocos minutos.
Cuando vi la novedad, me dispuse ha actualizar rápidamente el plugin para gozar de este captcha invisible. Porque no vamos a engañarnos, aunque el reCAPTCHA v2 es de lejos el captcha más estético que había hasta ahora, ¿que mejor que tener un captcha invisible?
Actualicé el plugin en esta misma web, luego las claves y finalmente teste los 2 formularios de contacto. Vi que todo funcionaba sin problema, además ahora el diseño se había vuelto más agradable al no tener ya el captcha visible, ¡no podía estar más contento!
Un par de días después me contacto una posible clienta explicándome que había intentado solicitar una Auditoría WordPress Gratuita mediante el formulario de solicitud usando para ello su teléfono móvil. Pero que no podía, ya que al pulsar en el botón de envío, el formulario le devolvía un mensaje de error… ¡Mierda! No había testado los formularios en el móvil y CF7 no estaba enviando los mensajes.
Después de esta situación incomoda, hice las pruebas pertinentes desde distintos dispositivos y me di cuenta que en realidad no solo fallaba desde el dispositivo móvil. ¡En los equipos de sobremesa también daba error! Pero lo más curioso de todo es que el error no siempre sucedía en dispositivos de sobremesa. Además este ya no sucedía si volvía a pulsar el botón de envío del formulario. Como mínimo tenía una cosa clara. CF7 ha dejado de funcionar después de integración con el nuevo captcha.
Google reCAPTCHA necesita para funcionar correctamente JavaScript, Lo que me hizo preguntarme si ese código se cargaba correctamente. ¿Podría ser que mi apreciado WP Rocket estuviera interfiriendo en la carga de dicho código JavaScript? Así que me dispuse a hacer algunas pruebas más pero no, parecía ser que el problema no estaba allí, como siempre WP Rocket estaba haciendo bien su trabajo.
✅ La solución al error con Contact Form 7 y Google reCAPTCHA v3
Al no encontrar solución, me dispuse a visitar el repositorio de plugins de WordPress. En un principio con la idea de dirigirme a la página de soporte de CF7, pero al estar en el buscador del repositorio se me ocurrió no hacer la búsqueda «Contact Form 7«, sino que busqué «Contact Form 7 recaptcha«. Y cual fue mi sorpresa, el segundo resultado de la búsqueda era un plugin de reciente creación: Contact Form 7 – reCaptcha v2 de IQComputing.
El nombre no podía ser más descriptivo, y por si había duda alguna la descripción la disiparía. Con este plugin instalado al mismo tiempo que tenemos instalado Contact Form 7, los formularios de CF7 continuarán usando Google reCAPTCHA v2. Así que sin dudarlo lo probé, y efectivamente el plugin no decepciona y cumple lo que promete. Ahora continuo teniendo la versión anterior del captcha de Google, y lo mejor de todo es que con esto los formularios ya no tienen errores. ¡Perfecto!
Además de esto, si aun no has actualizado a la nueva versión de CF7 pero has sabido que existía este problema, Contact Form 7 – reCaptcha v2 incluye una funcionalidad adicional. Si instalas este complemento antes de actualizar Contact Form 7 de v5.0.5 a v5.1.1, se transferirán automáticamente las claves de API anteriores, con lo que no tendrás que volver a introducir de nuevo las claves de la v2 del captcha. Una vez tengas instalado este plugin solo tendrás que ir a su pestaña de configuración para indicar al sitio web que use reCaptcha v2.
😉 Conclusión: Contact Form 7 – reCaptcha v2 es la mejor solución TEMPORAL
Gracias a Contact Form 7 – reCaptcha v2, podremos mantener la versión antigua del captcha de Google. Aunque evidentemente esta no es una solución definitiva, nos permitirá que nuestros formularios continúen funcionales al 100% hasta que Takayuki Miyoshi, creador de CF7, solucione este pequeño pero fatal error en su plugin.
Como había comentado en el punto 1 de este artículo. Una de las mejores cosas que tiene CF7 es que tiene a tantos usuarios enamorados de él que son muchos los programadores que se animan a programar plugins para extender sus funcionalidades. Y en este caso le tenemos que dar las gracias a IQComputing.
¡Atención! Este artículo se escribió para solucionar un problema muy concreto que surgió en un momento concreto. Por el que las soluciones que se plantean podrían no funcionar ahora.