Ocultar el icono de reCAPTCHA v3 en páginas donde no hay formularios
En este artículo te explicamos cómo ocultar la banda o distintivo de Google reCAPTCHA v3 en aquellas páginas o secciones de tu sitio web —ya sea WordPress o desarrollado a medida— que no contienen formularios.
Sabemos lo importante que es proteger los formularios para evitar mensajes de SPAM no deseados. Por eso, muchos optáis por usar reCAPTCHA v3 de Google, ya que es una solución gratuita, de calidad y fácil de integrar. De hecho, numerosos plugins de formularios para WordPress ya lo incluyen por defecto. Es el caso, por ejemplo, de Contact Form 7 a partir de la versión 5.1.x, que reemplazó el antiguo reCAPTCHA v2 (el conocido recuadro de «No soy un robot» que solo aparecía en el formulario) por la versión v3, más discreta y automática.
El inconveniente de reCAPTCHA v3 —conocido como la versión «invisible»— es que, aunque no muestra un cuadro dentro del formulario como lo hacía la versión anterior, sí añade una banda o distintivo en la esquina inferior derecha de la página. Esto resulta confuso para muchos usuarios, especialmente cuando dicha marca aparece en páginas sin formularios. Por un lado, rompe con la estética del diseño, y por otro, puede interferir con elementos importantes que suelen colocarse en esa zona, como el botón para volver arriba, el acceso al chat, el ícono de WhatsApp, entre otros.
En este artículo te mostramos dos métodos para ocultar ese distintivo de reCAPTCHA, ya sea en secciones específicas de tu sitio o en todas aquellas que no tengan un formulario de contacto.
Primera solución: Ocultar la banda de reCAPTCHA mediante CSS
Es necesario añadir un poco de CSS personalizado para ocultar la banda de reCAPTCHA. En la mayoría de los casos, tu plantilla de WordPress incluirá una opción para insertar este tipo de estilos. Si no es así, puedes hacerlo fácilmente desde el panel de WordPress, accediendo a:
Apariencia > Personalizar > CSS adicional.
Con el siguiente código, la insignia de reCAPTCHA se ocultará en todas las páginas del sitio:
.grecaptcha-badge {
visibility: hidden;
}
Si deseas que la insignia de reCAPTCHA siga siendo visible únicamente en las páginas que contienen un formulario de contacto, necesitarás identificar el ID de esas páginas.
En WordPress, puedes encontrar el ID de una página accediendo a su edición desde el panel de administración. Una vez dentro, fíjate en la barra de direcciones del navegador: verás un parámetro similar a post=123, donde 123 es el ID de la página.
Una vez que hayas identificado el ID de la página, solo tienes que añadir este código junto al que ya habías insertado anteriormente. Por ejemplo, si el ID de tu página es 63059, el CSS quedaría así:
.page-id-3411 .grecaptcha-badge {
visibility: visible !important;
}
Por supuesto, es posible aplicar la regla CSS a varias páginas a la vez, indicando todos sus IDs. Por ejemplo, en el siguiente caso, incluimos las páginas con los IDs 63059 y 1000:
.page-id-3411 .grecaptcha-badge, .page-id-1000 .grecaptcha-badge {
visibility: visible !important;
}
Segunda solución: Modificar functions.php con código PHP personalizado
Este método es un poco más avanzado que el anterior, pero ofrece una gran ventaja: mejora el rendimiento y la velocidad de carga de tu sitio, ya que solo carga las librerías de Contact Form 7 y el script de Google reCAPTCHA en las páginas donde realmente se van a utilizar.
Para implementarlo, debes añadir el siguiente código en el archivo functions.php de tu plantilla. Lo más recomendable es hacerlo en el functions.php de un child theme (plantilla hija), para evitar perder los cambios cuando actualices el tema principal.
/*Desactivamos Contact Form 7 y Recaptcha en todas las páginas menos en las que se utiliza.*/
function desactiva_cf7_recaptcha() {
//ponemos la variable hayformulario a false.
$hayformulario = false;
// En este ejemplo la página con formulario de contacto tiene ID=3411, pero debes cambiar ese ID por el de tu página de contacto.
if( is_page('3411')) {
$hayformulario = true;
}
//por tanto si hayformulario es false (no hay formulario en esa página), elimina el script cargado previamente de contact form 7 y de google recaptcha
if( !$hayformulario ) {
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script('google-recaptcha');
}
}
add_action( 'wp_enqueue_scripts', 'desactiva_cf7_recaptcha');
Si solo queremos desactivar reCAPTCHA en las páginas que no tengan formularios de contacto, pero mantenerlo activo en las entradas del blog —por ejemplo, porque estas incluyen el formulario de comentarios—, entonces debemos añadir una condición adicional que asegure que la desactivación solo se aplique en páginas y no en los posts.
/*Desactivamos Contact Form 7 y Recaptcha en todas las páginas menos en las que se utiliza.*/
function desactiva_cf7_recaptcha() {
/*Aplicamos sólo la desactivación en páginas y no en entradas del blog*/
if ( get_post_type( get_the_ID() ) == 'page' ) {
//ponemos la variable hayformulario a false.
$hayformulario = false;
// En este ejemplo la página con formulario de contacto tiene ID=3411, pero debes cambiar ese ID por el de tu página de contacto.
if( is_page('3411')) {
$hayformulario = true;
}
//por tanto si hayformulario es false (no hay formulario en esa página), elimina el script cargado previamente de contact form 7 y de google recaptcha
if( !$hayformulario ) {
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script('google-recaptcha');
}
}
}
add_action( 'wp_enqueue_scripts', 'desactiva_cf7_recaptcha');
¿Está permitido por Google ocultar la insignia de reCAPTCHA v3?
La respuesta es sí, pero siempre que la marca reCAPTCHA se muestre de forma visible para los usuarios. En su página de preguntas frecuentes, Google indica que si decides ocultar la banda, debes incluir este texto en el formulario.
Por lo tanto, podrías ocultar la insignia en todas las páginas (incluso en aquellas que contienen formularios), siempre y cuando ese texto esté presente de forma discreta pero visible para los usuarios.
Este sitio está protegido por reCAPTCHA y Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.