Come nascondere il badge reCAPTCHA di Google Invisible

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.

Vorrei nascondere questo.

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:

Quindi puoi semplicemente nasconderlo usando il seguente CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

Non utilizzare display: none;come sembra disabilitare il controllo dello spam (grazie a @Zade)

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>

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

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

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:

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.

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.

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>

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.

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.

questo non disabilita il controllo dello spam

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

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)

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

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

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.

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

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(); ?>>