Cómo ocultar la insignia reCAPTCHA invisible de Google

157

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.

ingrese la descripción de la imagen aquí

Me gustaría esconder esto.

James Law
fuente

Respuestas:

217

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:

ingrese la descripción de la imagen aquí

Entonces, simplemente puede ocultarlo usando el siguiente CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

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

Yann39
fuente
24
No presumiría decirte qué hacer;) Solo estoy advirtiendo a otros usuarios que puede ser ilegal eliminarlo.
Yann39
16
Esto es completamente inaceptable, porque en pantallas pequeñas como móviles, esta insignia cubre un área importante de la página web.
Don Dilanga el
12
Acéptelo o elija un servicio diferente. Google tiene todo el derecho de exigirle que muestre la marca de su servicio gratuito . Incluso puede reposicionar la insignia para que esté en línea con el formulario developers.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka
1
Bueno, solo uso este captcha v3 en mi página de formulario de contactos. Así que esta es la única página que quiero que muestre esta insignia. No se aplica en ningún otro lugar de mi sitio. ¿Posible?
Andrew Truckle
44
@ Yann39: actualice su respuesta. Está bien ocultarlo y, por ejemplo, agregarlo solo a la página de contacto: developers.google.com/recaptcha/docs/faq
Sol
172

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>

Resultado de ejemplo

Helenesh
fuente
66
¡Esta respuesta necesita estar más arriba! Contiene toda la información necesaria para la solución de manera sucinta.
Björn Larsson
3
Exactamente lo que estaba buscando y esto funciona muy bien. También para cualquiera que busque pruebas de que está permitido, consulte esta página (si aún no la ha visto en este hilo SO) developers.google.com/recaptcha/docs/faq
Jake
Gracias por mencionar esto @Jake. He agregado esto a mi respuesta.
Helenesh
¿Alguien ha encontrado una forma documentada de ocultar la insignia en lugar de un truco css? Google ofrece una forma alternativa de mostrar su marca, pero no puedo encontrar un método compatible para ocultar su insignia.
Collin Price
38

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;
}
James Law
fuente
77
Ten cuidado; Esto parece deshabilitar la comprobación de spam.
Zade
3
¿Esto realmente deshabilita la comprobación de spam? Si es así, ¿por qué todos los votos positivos?
Charlie Schliesser
1
¿@Zade quizás use opacity: 0o visibility: hidden? ¿también tienes un enlace a dónde se registra eso?
ctf0
44
El acuerdo de usuario dice que debe informar a los usuarios como @ Yann39 dice anteriormente.
Mihail Minkov
1
@Helenesh vale la pena una respuesta por separado?
Anupam
14

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

codemith
fuente
2
¡Solo aplicable a v3! v2 todavía requiere mostrar la insignia. :(
ADTC
13

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:

Captcha "invisible" plegable

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.

krukid
fuente
1
Agradable. Lo empujé aún más (sin ocultarlo por completo) usando transform: scale(0.6)yopacity: 0.6
squarecandy
¿Eres capaz de tener el banner azul abierto a la derecha que a la izquierda? También adaptar el esquema de color de la misma?
Vaishal Patel
@VaishalPatel en teoría, sí, pero hay dos desventajas: en primer lugar, Google desaconseja manipular el diseño de la insignia nativa y, en segundo lugar, cuanto más suposiciones sobre el diseño existente haga en sus cambios, más frágil será su solución: tenga en cuenta Google es libre de cambiar los estilos y el diseño de la insignia siempre que lo desee.
krukid el
1
@krukid Fui con su estilo predeterminado en línea.
Vaishal Patel
9

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.

León
fuente
esto funcionará, pero el id de página # es específico de su sitio web, por lo que cualquiera que lo use deberá ajustar el id para que se ajuste a la página en la que desea realizar la visualización. || He visto informes que dicen que haciendo esta visualización: ninguno; también deshabilitará la comprobación, pero no estoy seguro de eso en este momento.
Michael Tunnell
¡Cuidado! Esto deshabilita la comprobación de spam. Compruebe mi respuesta para obtener más información
Helenesh 01 de
Actualizado en base a los comentarios anteriores de Michael y Helenesh
Leon
4

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>
Nigel Dyer
fuente
3

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.

Andy P
fuente
3

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.

Matthew Dowell
fuente
2

esto no deshabilita la comprobación de spam

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

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)

OIW
fuente
2

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;
}
  1. 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.

política de google y términos de uso

Kiran Maniya
fuente
1
'no querySelect' sino 'querySelector'.
Keisuke Nagakawa
1
@ 永川 圭介 gracias por volver al error tipográfico.
Kiran Maniya
1

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.

Eugen Konkov
fuente
0

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

Mohsin Saeed
fuente
-1

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(); ?>>
Bijaya Kumar Oli
fuente
Por favor, las otras respuestas, mostrar ninguno deshabilita la comprobación de spam.
Helenesh
@Helenesh, ¿qué es la verificación de spam y cómo se relaciona con la adición de un estilo CSS?
Berkant Ipek