Error Google Recaptcha V3 En Contact form 74 min de lectura

Seguramente ya estés hasta las narices del plugin Contact Form 7, a.k.a. CF7, pero… llevas tanto con él que te da pena ponerte a descubrir otros más currados como WP Forms o Ninja Forms (de pago).

recaptcha v3 contact form 7

¿Por qué seguir usando CF7?

Definitivamente, es un plugin poco intuitivo para los usuarios no desarrolladores o técnicos, aunque la documentación y la experiencia que hay en Google ayuda mucho a hacer cualquier cosa con él de forma gratuita.

Además, al funcionar a base de HTML es bastante ligero y su código está bien depurado, probado por miles de usuarios y es bastante seguro, gracias a su creador Takayuki Miyoshi.

Sin embargo, se ha convertido en un «coladero» de spam en los últimos años, permitiendo que entre a nuestras bandejas de entrada y base de datos de leads bastantes registros de spam.

Conoce el foro de soporte del Plugin Contact Form 7

¿Por qué integrar el Recaptcha v3 en nuestro plugin de formulario?

Recaptcha v3 es sin duda, un filtro necesario para evitar spam en nuestro correo electrónico mediante formularios de CF7.

La ventaja de Recaptcha v3 es que en la mayoría de los casos resulta invisible para el usuario, y a menos que detecte nada «sospechoso», no deberá hacer nada adicional, ni introducir código, ni buscar los semáforos en un conjunto de fotos, ni siquiera marcar una casilla para confirmar que es humano.

Contact Form 7 no funciona, ¿Qué hago?

Si crees que el error está siendo causado por la integración del filtro anti spam Recaptcha v2 o v3 que nos ofrece gratuitamente Google, puedes probar la siguiente solución:

Una vez tenemos las claves, tendremos que utilizar el siguiente código para cargar la funcionalidad en la cabecera página donde tengamos nuestro formulario, sustituyendo CLAVE_SITIO_WEB por la que nos haya dado Google.

Código entre las etiquetas <head></head> de la página del formulario:

<script> grecaptcha.ready(function() { grecaptcha.execute('CLAVE_SITIO_WEB', {action: 'formulario'}) .then(function(token) { var recaptchaResponse = document.getElementById('recaptchaResponse'); recaptchaResponse.value = token; });});</script>

El error de CF7 al integrar Recaptcha v3

Como sabes, cuando instalas CF7 sólo tienes que ir a la opción en el backend de Contacto > Integración para añadir las claves de la Admin Console de Google Recaptcha.

Las claves que te da Google las obtienes de la siguiente dirección https://www.google.com/recaptcha/intro/index.html

Cómo ocultar el icono de recaptcha v3 en toda la web

Yo lo he eliminado utilizando el siguiente código en Apariencia > Editor de temas modificando la entrada al archivo style.css de mi TEMA HIJO activo (no vayas a actualizar la plantilla y luego te vuelvas loco porque te han desaparecido los cambios que hiciste.)

/* Removes the recaptcha badge */  .grecaptcha-badge {  visibility: hidden;  opacity: 0;  transition: linear opacity 1s;  }  .grecaptcha-badge.showgr {  visibility: visible;  opacity: 1;  transition: linear opacity 1s;  } 

Por otro lado, puedes utilizar este otro que nos chiva el gran @fernandot de AyudaWP.

 /* Ocultar icono de reCaptcha v3 */
.grecaptcha-badge{
 visibility: collapse !important;  
} 

Antes de terminar, comentarte que Google nos «pide» que añadamos el siguiente código HTML junto con nuestro formulario si decidimos ocultarle al usuario que estamos haciendo uso de SU filtro.

<small>Este sitio está protegido por reCAPTCHA y se aplican la  <a href="https://policies.google.com/privacy">política de privacidad</a> y <a href="https://policies.google.com/terms">términos del servicio</a> de Google. </small> 

De esta manera, ya tenemos activo nuestro filtro anti spam y podemos respirar tranquilos con nuestra bandeja de entrada de leads / comentarios limpios de mensajitos en inglés o escritos por spammers.


Deja un comentario

  Acepto la política de privacidad

Do NOT follow this link or you will be banned from the site!
Contacto