Come nascondere il badge reCAPTCHA di Google Invisible


157

Quando si implementa il nuovo reCATPTCHA di Google Invisible, per impostazione predefinita si ottiene un po 'di badge "protetto da reCAPTCHA" nella parte inferiore destra dello schermo che viene visualizzato quando ci si passa sopra.

inserisci qui la descrizione dell'immagine

Vorrei nascondere questo.

Risposte:


217

Google ora consente di nascondere il badge, dalle FAQ :

Vorrei nascondere il badge reCAPTCHA v3. Cosa è permesso?

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.

Per esempio:

inserisci qui la descrizione dell'immagine

Quindi puoi semplicemente nasconderlo usando il seguente CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

inserisci qui la descrizione dell'immagineNon utilizzare display: none;come sembra disabilitare il controllo dello spam (grazie a @Zade)


24
Non presumo di dirti cosa fare;) Sto solo avvisando gli altri utenti che potrebbe essere illegale rimuoverlo.
Yann39,

16
questo è assolutamente inaccettabile, perché in piccoli schermi come i cellulari questo badge copre un'area significativa della pagina web.
Don Dilanga,

12
Accettalo o scegli un servizio diverso. Google ha tutto il diritto di richiederti di mostrare il marchio per il loro servizio gratuito . Puoi persino riposizionare il badge in modo che sia in linea con il modulo developers.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka il

1
Bene, io uso solo questo captcha v3 nella mia pagina del modulo contatti. Quindi questa è l'unica pagina che voglio mostrare questo badge. Non si applica altrove sul mio sito. Possibile?
Andrew Truckle,

4
@ Yann39 - aggiorna la tua risposta. Va bene nasconderlo e ad esempio aggiungerlo solo alla pagina dei contatti: developers.google.com/recaptcha/docs/faq
Sol

172

Ho testato tutti gli approcci e:

ATTENZIONE: display: none DISABILITA il controllo spam!

visibility: hidden e opacity: 0 NON disabilitare il controllo dello spam.

Codice da usare:

.grecaptcha-badge { 
    visibility: hidden;
}

Quando nascondi l'icona del badge, Google desidera che tu faccia riferimento al proprio servizio sul modulo aggiungendo questo:

<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>

Risultato di esempio


6
Questa risposta deve essere più in alto! Contiene tutte le informazioni necessarie per la soluzione in modo sintetico.
Björn Larsson,

3
Esattamente quello che stavo cercando e questo funziona alla grande. Anche per chiunque cerchi la prova che è consentito, controlla questa pagina (se non l'hai già vista in tutto questo thread SO) developers.google.com/recaptcha/docs/faq
Jake

Grazie per aver menzionato questo @Jake. Ho aggiunto questo alla mia risposta.
Helenesh,

Qualcuno ha trovato un modo documentato di nascondere il badge piuttosto che un hack CSS? Google offre un modo alternativo per mostrare il proprio marchio ma non riesco a trovare un metodo supportato per nascondere il loro badge.
Collin Price,

38

Impostare l' data-badgeattributo suinline

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

E aggiungi il seguente CSS

.grecaptcha-badge {
    display: none;
}

7
Stai attento; questo sembra disabilitare il controllo dello spam.
Zade,

3
Questo disabilita davvero il controllo dello spam? In tal caso, perché tutti i voti positivi?
Charlie Schliesser,

1
@Zade forse invece usa opacity: 0o visibility: hidden? hai anche un link a dove lo indica?
ctf0

4
Il contratto con l'utente afferma che è necessario informare gli utenti come sopra indicato da @ Yann39.
Mihail Minkov,

1
@Helenesh merita una risposta separata?
Anupam,

14

Google ora dice "Puoi nascondere il badge fintanto che includi il marchio reCAPTCHA in modo visibile nel flusso degli utenti". collegamento


2
Applicabile solo a v3! v2 richiede ancora di mostrare il badge. :(
ADTC il

13

Dal momento che nascondere il badge non è veramente legittimo come da TOU e le opzioni di posizionamento esistenti stavano rompendo la mia UI e / o UX, ho trovato la seguente personalizzazione che imita il posizionamento fisso, ma è invece reso in linea:

Captcha "invisibile" pieghevole

Devi solo applicare alcuni CSS sul contenitore dei badge:

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

Penso che sia per quanto possibile spingerlo legalmente.


1
Bello. L'ho spinto ulteriormente (senza nasconderlo completamente) usando transform: scale(0.6)eopacity: 0.6
squarecandy

Riesci ad avere il banner blu aperto a destra rispetto a sinistra? Adattare anche la combinazione di colori di esso?
Vaishal Patel,

@VaishalPatel in teoria, sì, ma ci sono due contro: in primo luogo, manomettere il design del badge nativo è scoraggiato da Google e, in secondo luogo, più ipotesi sul design esistente fai nelle tue modifiche, più fragile diventa la tua soluzione - tieni a mente Google è libero di cambiare stili e layout dei badge ogni volta che ne hanno voglia.
Krukid,

1
@krukid Sono andato con il loro stile predefinito in linea.
Vaishal Patel,

9

Ho deciso di nascondere il badge su tutte le pagine tranne la mia pagina di contatto (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;
}

Non sono uno sviluppatore web, quindi per favore correggimi se c'è qualcosa di sbagliato.

EDIT: aggiornato per utilizzare la visibilità anziché la visualizzazione.


funzionerà ma l'id-pagina- è specifico per il tuo sito web, quindi chiunque lo usi dovrà regolare l'id per adattarlo alla pagina su cui desidera eseguire la visualizzazione. || Ho visto rapporti che dicono che facendo questo display: nessuno; disabiliterò anche il controllo, ma non ne sono sicuro al momento.
Michael Tunnell

! attento Questo disabilita il controllo dello spam. Controlla la mia risposta per ulteriori informazioni
Helenesh

Aggiornato in base ai commenti sopra di Michael & Helenesh
Leon,

4

Una leggera variante del post di Matthew Dowell che evita il breve lampo, ma viene visualizzato ogni volta che è visibile il modulo del modulo di contatto 7:

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

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

Ho quindi aggiunto quanto segue a header.php nel tema di mio figlio:

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

3

La mia soluzione è stata quella di nascondere il badge, quindi visualizzarlo quando l'utente si concentra su un input del modulo, aderendo quindi ai Termini e condizioni di Google.

Nota: il reCAPTCHA che stavo modificando era stato generato da un plugin di WordPress, quindi potrebbe essere necessario avvolgere il reCAPTCHA con un proprio <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' );
  });
});

Ovviamente puoi modificare il selettore jQuery in modo da scegliere come target moduli specifici, se necessario.


3

Per gli utenti del Contact Form 7 su Wordpress questo metodo funziona per me: nascondo Recaptcha v3 su tutte le pagine tranne quelle con Contact 7 Forms.

Ma questo metodo dovrebbe funzionare su qualsiasi sito in cui si sta utilizzando un selettore di classe univoco in grado di identificare tutte le pagine con elementi del modulo di input di testo.

Innanzitutto, ho aggiunto una regola di stile target nel CSS che può comprimere il riquadro:

CSS

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

Quindi ho aggiunto lo script JQuery nella mia intestazione per attivarlo dopo che la finestra si è caricata in modo che il selettore di classe 'grecaptcha-badge' sia disponibile per JQuery e possa aggiungere la classe 'hide' per applicare lo stile CSS disponibile.

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

La mia tessera continuerà a lampeggiare su ogni pagina per mezzo secondo, ma è la soluzione alternativa migliore che ho trovato finora che spero sia conforme. Suggerimenti di miglioramento apprezzati.


2

questo non disabilita il controllo dello spam

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

2

Se stai utilizzando l'aggiornamento del Modulo di contatto 7 e l'ultima versione (versione 5.1.x), dovrai installare, configurare Google reCAPTCHA v3 per poterlo utilizzare.

per impostazione predefinita, il logo di Google reCAPTCHA viene visualizzato su ogni pagina in basso a destra dello schermo. Questo secondo la nostra valutazione sta creando una brutta esperienza per gli utenti. E il tuo sito web, il blog rallenterà un po '(riflette per PageSpeed ​​Score), dal tuo sito web dovrai caricare 1 libreria JavaScript aggiuntiva da Google per visualizzare questo badge.

Puoi nascondere Google reCAPTCHA v3 da CF7 (mostralo solo quando necessario) seguendo questi passaggi:

Innanzitutto, apri il functions.phpfile del tuo tema (utilizzando File Manager o Client FTP). Questo file si trova in: /wp-content/themes/your-theme/e aggiungi il seguente frammento (stiamo usando questo codice per rimuovere la casella reCAPTCHA su ogni pagina):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Successivamente, aggiungerai questo frammento nella pagina in cui desideri che visualizzi Google reCAPTCHA (pagina dei contatti, accesso, pagina di registrazione ...):

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

Fare riferimento al blog OIW - Come rimuovere il logo reCAPTCHA di Google dal modulo di contatto 7 in WordPress (Nascondi il badge reCAPTCHA)


2

Sì, puoi farlo . puoi usare css o javascript per nascondere il badge reCaptcha v3.

  1. Il modo CSS usa display: noneo visibility: hiddenper nascondere il batch reCaptcha. È facile e veloce
.grecaptcha-badge {
    display:none !important;
}
  1. Il modo Javascript
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Nascondere il badge è valido, secondo la politica di google e hai risposto qui in FAQ . Si consiglia di mostrare l'informativa sulla privacy e le condizioni d'uso di Google come mostrato di seguito.

politica di google e condizioni d'uso


1
'not querySelect' ma 'querySelector'.
Keisuke Nagakawa

1
@ 永川 圭介 grazie per essere tornato in errore di battitura.
Kiran Maniya

1

Ho visto il prossimo commento a riguardo

È anche utile posizionare il badge in linea se si desidera applicare il proprio CSS ad esso. Ma ricorda che hai accettato di mostrare i Termini e condizioni di Google quando ti sei registrato per una chiave API - quindi non nasconderlo, per favore. E mentre è possibile far scomparire completamente il badge con CSS, non lo consigliamo.


0

Nota: se si sceglie di nascondere il badge, utilizzare
.grecaptcha-badge { visibility: hidden; }

È consentito nascondere il badge finché si include il marchio reCAPTCHA in modo visibile nel flusso utente. Si prega di includere il seguente testo:

Questo sito è protetto da reCAPTCHA e Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

maggiori dettagli qui reCaptacha


-1

Modulo di contatto Recaptcha 7 e soluzione Recaptcha v3.

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

Più di una pagina del modulo di contatto?

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

Puoi aggiungere più "not" se hai più pagine del modulo di contatto.

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

Assicurati che la sezione del tuo corpo sia così:

<body>

Modificalo in modo che appaia così:

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

Per favore, le altre risposte, nessuna mostra disabilita il controllo dello spam.
Helenesh

@Helenesh che cos'è il controllo dello spam e come è correlato all'aggiunta di uno stile CSS?
Berkant Ipek,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.