En la seva darrera actualització Contact Form 7 ha abandonat l’ús de Google reCAPTCHA v2 per incorporar la nova versió reCAPTCHA v3, però sembla que està generant errors en molts formularis. Jo mateix, en aquesta web m’he vist afectat per aquest problema. Pel que si aquest és el teu cas, relaxa’t!, ja que aquí tens la solució a aquest incòmode problema.
📧 Contact Form 7 i Google reCAPTCHA
Contact Form 7
Si volem incorporar un formulari de contacte al nostre lloc web WordPress, tenim moltes opcions. En realitzar una recerca a Google trobarem una infinitat d’articles que parlen d’aquest tema. Si bé és cert que hi ha connectors molt populars ja siguin opcions de pagament com Gravity Forms, o gratuïtes com Ninja Forms, hi ha un nom que sempre es repeteix i que destaca sobre la majoria. Aquest és Contact Form 7 de Takayuki Miyoshi.
A simple vista CF7 pot semblar massa simple. O fins i tot al contrari, si ets un usuari novell en WordPress o amb un perfil poc tècnic pot semblar complex el fet de treballar amb shortcodes. Això augmenta si ho compares amb la seva competència, que sol tenir editors molt vistosos mitjançant JavaScript. Però res més lluny de la realitat! Almenys des del meu punt de vista, els shortcodes de Contact Form 7 converteixen a aquest connector en el connector de formularis més productiu per a WordPress.
A més d’això, Contact Form 7 compta amb un ampli ecosistema d’add-ons per estendre les seves funcionalitats. Són molts els desenvolupadors que han decidit crear altres connectors que complementen a aquest connector. Gràcies a això CF7 no només cobreix totes les necessitats bàsiques per a crear formularis, sinó que a més, el pots estendre afegint noves funcionalitats per a crear així formularis molt més complexos.
Però fins i tot Contact Form 7 per si només és un plugin de formularis potent. Una de les seves millors característiques és que inclou de sèrie la integració amb Google reCAPTCHA, el sistema de captcha de Google.
Google reCAPTCHA
Els captchas són la forma que tenen els formularis de comprovar, mitjançant una pregunta-resposta, que qui aquesta omplint el formulari és un humà i no una màquina. Són una mesura de seguretat indispensable si tens formularis en el teu lloc web. Ja que el captcha et protegirà a tu i a la teva safata de correu electrònic del maleït spam.
Des que Google va comprar a l’empresa reCaptcha allà l’any 2009, no ha deixat de millorar el que sens dubte s’ha convertit en la mesura de seguretat per a formularis més coneguda de tot Internet. Al principi aquest era com qualsevol altra prova d’autenticació per formularis, una paraula distorsionada i un camp de text perquè l’usuari la completarà.
Després va aparèixer el Google reCAPTCHA v2, els usuaris ja no havíem d’omplir aquest (molest) text. Tot és simplifica a un sol clic al costat de l’afirmació “No sóc un robot”. Però Google no es va aturar allà i va llançar Google reCAPTCHA v3, per fi el captcha ja ni surt a la pantalla! Mitjançant un complex algoritme Google analitza el comportament de l’usuari per saber si és un humà, i només en el cas que dubti d’això el captcha serà visible.
⚠️ El problema amb Contact Form 7 i el nou Google reCAPTCHA v3
Amb la versió 5.1, Contact Form 7 per fi ha actualitzat la integració de Google reCAPTCHA a la nova versió v3, el que per a molts ha estat una alegria. A més la transició és molt senzilla. Al instal·lar la nova versió del plugin, aquest sol·licita actualitzar les claus de l’API del nostre reCAPTCHA, ja que les versions v2 i v3 no fan servir les mateixes. Una tasca simple i que es fa en pocs minuts.
Quan vaig veure la novetat, em vaig disposar ha actualitzar ràpidament el connector per gaudir d’aquest captcha invisible. Perquè no ens hem d’enganyar, tot i que el reCAPTCHA v2 és de lluny el captcha més estètic que hi havia fins ara, què millor que tenir un captcha invisible?
Vaig actualitzar el plugin en aquesta mateixa web, després les claus i finalment vaig testar els 2 formularis de contacte. Vaig veure que tot funcionava sense problema, a més ara el disseny s’havia tornat més agradable al no tenir ja el captcha visible, no podia estar més content!
Un parell de dies després em va contactar una possible clienta explicant-me que havia intentat sol·licitar una Auditoria WordPress Gratuïta mitjançant el formulari de sol·licitud fent servir per a això el seu telèfon mòbil. Però que no podia, ja que en prémer el botó d’enviament, el formulari li tornava un missatge d’error… Merda! No hi havia testat els formularis al mòbil i CF7 no estava enviant els missatges.
Després d’aquesta situació incomoda, vaig fer les proves pertinents des de diferents dispositius i em vaig adonar que en realitat no només fallava des del dispositiu mòbil. En els equips de sobretaula també donava error! Però el més curiós de tot és que l’error no sempre succeïa en dispositius de sobretaula. A més aquest ja no succeïa si tornava a prémer el botó d’enviament del formulari. Com a mínim tenia una cosa clara. CF7 ha deixat de funcionar després de l’integració amb el nou captcha.
Google reCAPTCHA necessita per funcionar JavaScript. El que em va fer preguntar-me si aquest codi es carregava correctament. Podria ser que el meu apreciat WP Rocket estigués interferint en la càrrega d’aquest codi JavaScript? Així que em vaig disposar a fer algunes proves més però no, semblava que el problema no hi era allà, com sempre WP Rocket estava fent bé la seva feina.
✅ La solució a l’error amb Contact Form 7 i Google reCAPTCHA v3
Com que no vaig trobar la solució, em vaig disposar a visitar el repositori de plugins de WordPress. Al principi amb la idea de dirigir-me a la pàgina de suport de CF7, però en trobar-me en el cercador del repositori se’m va acudir no fer la cerca “Contact Form 7“, sinó que vaig buscar “Contact Form 7 recaptcha“. I quina va ser la meva sorpresa, el segon resultat de la recerca era un connector de recent creació: Contact Form 7 – reCaptcha v2 de IQComputing.
El nom no podia ser més descriptiu, i per si hi havia cap dubte, la descripció la dissiparia. Amb aquest plugin instal·lat al mateix temps que tenim instal·lat Contact Form 7, els formularis de CF7 continuaran fent servir Google reCAPTCHA v2. Així que sense dubtar-ho ho vaig provar, i efectivament el connector no decep i compleix el que promet. Ara continu tenint la versió anterior del captcha de Google, i el millor de tot és que amb això els formularis ja no tenen errors. Perfecte!
A més d’això, si encara no has actualitzat a la nova versió de CF7 però has sabut que existia aquest problema, Contact Form 7 – reCaptcha v2 inclou una funcionalitat addicional. Si instal·les aquest complement abans d’actualitzar Contact Form 7 de v5.0.5 a v5.1.1, es transferiran automàticament les claus d’API anteriors, de manera que no hauràs de tornar a introduir de nou les claus de la v2 del captcha. Un cop tinguis instal·lat aquest plugin només hauràs d’anar a la seva pestanya de configuració per indicar al lloc web que utilitzi reCaptcha v2.
😉 Conclusió: Contact Form 7 – reCaptcha v2 és la millor solució TEMPORAL
Gràcies a Contact Form 7 – reCaptcha v2, podrem mantenir la versió antiga del captcha de Google. Encara que evidentment aquesta no és una solució definitiva, ens permetrà que els nostres formularis continuïn funcionals al 100% fins que Takayuki Miyoshi, creador d’CF7, solucioni aquest petit però fatal error en el seu connector.
Com havia comentat en el punt 1 d’aquest article. Una de les millors coses que té CF7 és que té a tants usuaris enamorats d’ell que són molts els programadors que s’animen a programar plugins per estendre les seves funcionalitats. I en aquest cas li hem de donar les gràcies a IQComputing.
Atenció! Aquest article es va escriure per a solucionar un problema molt concret que va sorgir en un moment concret. Pel que les solucions que es plantegen poden no funcionar ara.