En este artículo os indicamos como ocultar la banda o distintivo de Google Recaptcha V3 de las páginas  o secciones que no tengan formularios de vuestro WordPress o de vuestra web a medida.

Todos sabemos lo importante que es poner un CAPTCHA en los formularios para evitar recibir molestos mensajes de SPAM a través del mismo. Muchos de vosotros utilizaréis el CAPTCHA V3 de Google porque es de calidad, gratis y fácil de implementar en vuestra web. De hecho hay muchos plugins para formularios de WordPress, que es captcha que traen integrado por defecto. Por ejemplo, es el caso del Contact Form 7 a partir de la versión 5.1.x o ya que antes utilizaba el captcha V2 (que era una casilla de «No soy un robot» que sólo aparecía en el formulario de contacto).

El problema de la v3 del Recaptcha, versión que llaman «invisible» es que no te aparece ningún captcha en el formulario, pero, en su lugar, aparece una banda o placa en la esquina inferior derecha. Muchos de los usuarios encuentra ilógico que aparezca en las páginas en las que no hay ningún formulario primero, porque daña un poco el diseño y segundo porque puede estorbar: es frecuente que en esa esquina incluyamos otros elementos como el botón de subir al principio de página, el botón de chat, el botón de whatsapp…

Os vamos a explicar 2 métodos para quitar el distintivo del Recaptcha en las secciones que vosotros deseéis o en todas menos en las que se incluya un formulario de contacto.

MÉTODO 1: OCULTAR INSIGNIA RECAPTCHA CON CSS

Deberemos incluir CSS adicional para ocultar la banda de Recaptcha. Generalmente, vuestra plantilla incluirá un apartado para meter ese CSS personalizado. Si no es así, todo WordPress permite incluirlo en Apariencia > Personalizar > CSS adicional.

Con este código ocultaremos la banda en todas las páginas:

.grecaptcha-badge { 
    visibility: hidden;
}

Si queremos dejarla visible en las páginas que tengan algún formulario de contacto, tendremos que buscar el id de esas páginas. En WordPress, para saber cuál es el ID de vuestra página, acceded desde el panel de administración a la edición de la misma y podréis ver el ID en la barra de direcciones

Una vez que sepamos el ID, añadiremos el siguiente código al código que ya habíamos incluido (suponiendo que nuestro ID sea el 3411):

.page-id-3411 .grecaptcha-badge {
    visibility: visible !important;
}

Obviamente, se pueden incluir en la regla CSS varias páginas, indicando sus IDs. Por ejemplo, en el siguiente ejemplo, incluímos las páginas con IDs 3411 y 1000:

.page-id-3411 .grecaptcha-badge, .page-id-1000 .grecaptcha-badge {
    visibility: visible !important;
}

¡Importante! Muchos de vosotros podéis haber tenido la tentación de ocultar el icono de Recaptcha con «display: none». Parece ser, que esto puede interferir con la funcionalidad y no evitar el spam, así que es mejor que lo hagáis con «visibility: hidden».

MÉTODO 2: AÑADIENDO CÓDIGO PHP AL ARCHIVO FUNCTIONS.PHP

Este método es algo más complejo que el método anterior, pero tiene una gran ventaja: ayuda a mejorar el rendimiento y la velocidad de carga de nuestra web ya que sólo carga las librerías del Contact Form 7 y el script de Google Recaptcha en las páginas en las que se vaya a utilizar. Hay que incluir el siguiente código en el archivo functions.php de la plantilla. Lo ideal sería tener una child theme (pantilla hija) e incluir el códgio en el functions.php de la plantilla hija.

/*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 sólo quisiésemos desactivarlo en las páginas que no tengan formulario de contacto y no en los posts del blog porque, por ejemplo, tienen un formulario de envío de comentarios, tendríamos que añadir una condición más que dijese que sólo se aplique en páginas.

/*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');

¿Permite Google ocultar la insignia de reCAPTCHA v3?

¿Está permitido según las condiciones que aceptas para utilizar el servicio?

La respuesta es sí, siempre y cuando incluyas la marca RECAPTCHA de forma visible para los usuarios. En su página de preguntas frecuentes, te pide que si ocultas la banda, incluyas este texto en el formulario:

Por tanto, podrías hasta ocultarla de todas las páginas (incluidas las que tienen formularios) siempre y cuando incluyeses ese texto de forma discreta, pero visible.

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.