Cómo ocultar la insignia reCAPTCHA invisible de Google

Al implementar el nuevo Google Invisible reCATPTCHA, de forma predeterminada, obtienes una pequeña insignia "protegida por reCAPTCHA" en la parte inferior derecha de la pantalla que aparece cuando la pasas.

Me gustaría esconder esto.

Google ahora permite ocultar la insignia, de las preguntas frecuentes :

Me gustaría ocultar la insignia reCAPTCHA v3. ¿Qué está permitido?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Por ejemplo:

Entonces, simplemente puede ocultarlo usando el siguiente CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

No lo use display: none;como parece deshabilitar la comprobación de spam (gracias @Zade)

He probado todos los enfoques y:

ADVERTENCIA: display: none DESACTIVA la comprobación de spam

visibility: hiddeny opacity: 0NO desactive la comprobación de spam.

Código a usar:

.grecaptcha-badge { 
    visibility: hidden;
}

Cuando oculta el icono de la insignia, Google quiere que haga referencia a su servicio en su formulario agregando esto:

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

Establezca el data-badgeatributo eninline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

Y agregue el siguiente CSS

.grecaptcha-badge {
    display: none;
}

Google ahora dice "Se le permite ocultar la insignia siempre que incluya la marca reCAPTCHA visiblemente en el flujo de usuarios". Enlace

Dado que ocultar la insignia no es realmente legítimo según las TOU, y las opciones de ubicación existentes estaban rompiendo mi UI y / o UX, se me ocurrió la siguiente personalización que imita el posicionamiento fijo, pero en cambio se muestra en línea:

Solo necesita aplicar un poco de CSS en su contenedor de credenciales:

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

Creo que eso es todo lo que puedes impulsar legalmente.

Decidí ocultar la insignia en todas las páginas excepto en mi página de contacto (usando Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

No soy un desarrollador web, así que corrígeme si hay algo mal.

EDITAR: actualizado para usar la visibilidad en lugar de la pantalla.

Una ligera variante de la publicación de Matthew Dowell que evita el destello corto, pero se muestra cada vez que se ve el formulario de contacto 7:

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

Luego agregué lo siguiente al header.php en mi tema hijo:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

Mi solución fue ocultar la insignia y luego mostrarla cuando el usuario se enfoca en una entrada de formulario, por lo tanto, sigue adherido a los términos y condiciones de Google.

Nota: El reCAPTCHA que estaba ajustando había sido generado por un complemento de WordPress, por lo que es posible que necesite envolver el reCAPTCHA con un <div class="inv-recaptcha-holder"> ... </div>usuario.

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Obviamente, puede cambiar el selector jQuery para orientar formularios específicos si es necesario.

Para los usuarios de Contact Form 7 en Wordpress, este método funciona para mí: oculto el v3 Recaptcha en todas las páginas, excepto en aquellas con Contact 7 Forms.

Pero este método debería funcionar en cualquier sitio donde esté utilizando un selector de clase único que puede identificar todas las páginas con elementos de formulario de entrada de texto.

Primero, agregué una regla de estilo de destino en CSS que puede colapsar el mosaico:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Luego agregué el script JQuery en mi encabezado para disparar después de que se carga la ventana para que el selector de clase 'grecaptcha-badge' esté disponible para JQuery, y pueda agregar la clase 'hide' para aplicar el estilo CSS disponible.

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

Mi mosaico seguirá parpadeando en cada página durante medio segundo, pero es la mejor solución que he encontrado hasta ahora y espero que cumpla. Sugerencias de mejora apreciadas.

esto no deshabilita la comprobación de spam

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}

Si está utilizando la actualización del Formulario de contacto 7 y la última versión (versión 5.1.x), deberá instalar y configurar Google reCAPTCHA v3 para usar.

de forma predeterminada, aparece el logotipo de Google reCAPTCHA en cada página en la parte inferior derecha de la pantalla. Según nuestra evaluación, esto está creando una mala experiencia para los usuarios. Y su sitio web, el blog se ralentizará un poco (refleje por PageSpeed ​​Score), por su sitio web tendrá que cargar 1 biblioteca JavaScript adicional de Google para mostrar esta insignia.

Puede ocultar Google reCAPTCHA v3 de CF7 (solo mostrarlo cuando sea necesario) siguiendo estos pasos:

Primero, abre el functions.phparchivo de su tema (usando el Administrador de archivos o el Cliente FTP). Este archivo se encuentra en: /wp-content/themes/your-theme/y agrega el siguiente fragmento (estamos usando este código para eliminar el cuadro reCAPTCHA en cada página):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

A continuación, agregará este fragmento en la página que desea que muestre Google reCAPTCHA (página de contacto, inicio de sesión, página de registro ...):

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

Consulte el blog de OIW: Cómo quitar el logotipo de Google reCAPTCHA del formulario de contacto 7 en WordPress (Ocultar insignia de reCAPTCHA)

Si puedes hacerlo . puede usar css o javascript para ocultar la insignia reCaptcha v3.

1. La forma CSS utiliza display: noneo visibility: hiddenpara ocultar el lote reCaptcha. Es facil y rapido.

.grecaptcha-badge {
    display:none !important;
}

2. La forma Javascript

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Ocultar la insignia es válido, de acuerdo con la política de Google y respondido en preguntas frecuentes aquí . Se recomienda mostrar la política de privacidad y los términos de uso de Google como se muestra a continuación.

Vi el siguiente comentario sobre esto

También es útil colocar la insignia en línea si desea aplicarle su propio CSS. Pero recuerde que acordó mostrar los Términos y condiciones de Google cuando se registró para una clave API, así que no lo oculte, por favor. Y aunque es posible hacer que la insignia desaparezca por completo con CSS, no la recomendaríamos.

Nota: si elige ocultar la insignia, utilice
.grecaptcha-badge { visibility: hidden; }

Puede ocultar la insignia siempre que incluya la marca reCAPTCHA visiblemente en el flujo de usuarios. Por favor incluya el siguiente texto:

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.

más detalles aquí reCaptacha

Formulario de contacto Recaptcha 7 y solución Recaptcha v3.

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

¿Más de una página de formulario de contacto?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

Puede agregar más "nots" si tiene más páginas de formulario de contacto.

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

Asegúrate de que a tu sección del cuerpo le guste esto:

<body>

Cámbielo para que se vea así:

 <body <?php body_class(); ?>>