Categor铆as
馃攲 Plugins

Solucionar el error de Contact Form 7 con reCAPTCHA v3

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.

Contact Form 7

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 鈥淣o 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.

Google reCAPTCHA v2

鈿狅笍聽El problema con Contact Form 7 y el nuevo聽Google reCAPTCHA v3

Con la reciente 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!

Invisible

Un par de d铆as despu茅s me contacto una posible clienta explic谩ndome que hab铆a intentado solicitar una Consultoria 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.

鉁吢燣a 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.

ReCaptcha v2 for Contact Form 7

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 podan no funcionar ahora.

馃挰