javascript - example - Cómo ocultar la insignia reCAPTCHA invisible de Google
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.
Establezca el atributo de
data-badge
en
inline
<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". FAQ
He probado todos los enfoques y:
display: none
DESACTIVA la comprobación de spam
visibility: hidden
y
opacity: 0
NO deshabilite la comprobación de spam.
Código a usar:
.grecaptcha-badge {
visibility: hidden;
}
Cuando oculta el icono de la insignia, Google desea que haga FAQ 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>
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>
.
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 contraer 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.
Por supuesto que puedes hacerlo usando CSS.
Pero de acuerdo con los Términos de servicio de reCAPTCHA (que debe haber acordado), debe informar a los visitantes sobre la implementación de reCAPTCHA en su sitio:
Y de los Términos de servicio de Google
Estos términos no le otorgan el derecho de usar la marca o los logotipos utilizados en nuestros Servicios. No elimine, oculte ni altere los avisos legales que se muestran en nuestros Servicios o junto con ellos.
ACTUALIZACIÓN DIC 2018 (gracias @Sol)
Google ahora permite ocultar la insignia, de las FAQ :
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:
Si está utilizando la actualización del Formulario de contacto 7 y la última versión (versión 5.1.x), necesitará instalar, 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 archivo
functions.php
de su tema (usando File Manager o FTP Client).
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)
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>
esto no deshabilita la comprobación de spam
div.g-recaptcha > div.grecaptcha-badge {
width:0 !important;
}
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.
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(); ?>>