Jak ukryć plakietkę Google Invisible reCAPTCHA

Podczas wdrażania nowego Google Invisible reCATPTCHA, domyślnie otrzymujesz małą plakietkę „chronione przez reCAPTCHA” w prawym dolnym rogu ekranu, która wyskakuje po najechaniu na nią.

Chciałbym to ukryć.

Google pozwala teraz ukryć plakietkę z FAQ :

Chciałbym ukryć plakietkę reCAPTCHA v3. Co jest dozwolone?

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.

Na przykład:

Możesz więc po prostu ukryć to za pomocą następującego kodu CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

Nie używaj, display: none;jak się wydaje, aby wyłączyć sprawdzanie spamu (dzięki @Zade)

Przetestowałem wszystkie podejścia i:

OSTRZEŻENIE: display: none WYŁĄCZA sprawdzanie spamu!

visibility: hiddeni opacity: 0NIE wyłączaj sprawdzania spamu.

Kod do użycia:

.grecaptcha-badge { 
    visibility: hidden;
}

Podczas ukrywania ikony badge, Google chce Ci odwołać swoje usługi na formularzu, dodając w ten sposób:

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

Ustaw data-badgeatrybut nainline

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

I dodaj następujący CSS

.grecaptcha-badge {
    display: none;
}

Google mówi teraz: „Możesz ukryć plakietkę, o ile w przepływie użytkowników uwzględnisz markę reCAPTCHA w widoczny sposób”. Połączyć

Ponieważ ukrywanie plakietki nie jest tak naprawdę uzasadnione zgodnie z warunkami korzystania z usługi, a istniejące opcje umieszczania łamały mój interfejs użytkownika i / lub UX, wymyśliłem następujące dostosowanie, które naśladuje ustalone położenie, ale zamiast tego jest renderowane w tekście:

Wystarczy, że zastosujesz CSS do kontenera odznaki:

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

Myślę, że to tak daleko, jak możesz to legalnie popchnąć.

Zdecydowałem się ukryć odznakę na wszystkich stronach z wyjątkiem mojej strony kontaktowej (używając 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;
}

Nie jestem programistą stron internetowych, więc proszę, popraw mnie, jeśli coś jest nie tak.

EDYCJA: Zaktualizowano, aby używać widoczności zamiast wyświetlania.

Niewielki wariant postu Matthew Dowella, który unika krótkiego błysku, ale wyświetla się, gdy widoczny jest formularz kontaktowy 7:

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

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

Następnie dodałem do pliku header.php w moim motywie potomnym:

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

Moim rozwiązaniem było ukrycie plakietki, a następnie wyświetlenie jej, gdy użytkownik koncentruje się na danych wejściowych formularza - w ten sposób nadal przestrzegając warunków Google.

Uwaga: reCAPTCHA, który modyfikowałem, zostało wygenerowane przez wtyczkę WordPress, więc może być konieczne owinięcie reCAPTCHA <div class="inv-recaptcha-holder"> ... </div>własnym.

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

Oczywiście w razie potrzeby można zmienić selektor jQuery na określone formularze.

Dla użytkowników Contact Form 7 na Wordpress ta metoda działa dla mnie: ukrywam wersję v3 Recaptcha na wszystkich stronach z wyjątkiem tych z Contact 7 Forms.

Ale ta metoda powinna działać w każdej witrynie, w której używasz unikalnego selektora klasy, który może identyfikować wszystkie strony z elementami formularza wprowadzania tekstu.

Najpierw dodałem docelową regułę stylu w CSS, która może zwinąć kafelek:

CSS

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

Następnie dodałem skrypt JQuery w moim nagłówku, aby uruchamiał się po załadowaniu okna, więc selektor klasy „grecaptcha-badge” jest dostępny dla JQuery i mogę dodać klasę „hide”, aby zastosować dostępny styl CSS.

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

Mój kafelek nadal będzie migał na każdej stronie przez pół sekundy, ale jest to najlepsze obejście, jakie znalazłem do tej pory, i mam nadzieję, że będzie zgodne. Mile widziane sugestie dotyczące ulepszeń.

nie wyłącza to sprawdzania spamu

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

Jeśli korzystasz z aktualizacji Formularza kontaktowego 7 i najnowszej wersji (wersja 5.1.x), musisz zainstalować, skonfigurować Google reCAPTCHA v3 do użycia.

Domyślnie logo Google reCAPTCHA jest wyświetlane na każdej stronie w prawym dolnym rogu ekranu. Według naszej oceny powoduje to złe wrażenia dla użytkowników. Twoja witryna, blog, nieco spowolni (odzwierciedla to wynik PageSpeed), a Twoja witryna będzie musiała załadować dodatkową 1 bibliotekę JavaScript z Google, aby wyświetlić tę plakietkę.

Możesz ukryć Google reCAPTCHA v3 przed CF7 (pokazać je tylko wtedy, gdy jest to konieczne), wykonując następujące kroki:

Najpierw otwórz functions.phpplik swojego motywu (za pomocą Menedżera plików lub klienta FTP). Ten plik znajduje się w: /wp-content/themes/your-theme/i dodaj następujący fragment (używamy tego kodu do usuwania pola reCAPTCHA na każdej stronie):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Następnie dodasz ten fragment kodu na stronie, na której ma wyświetlać Google reCAPTCHA (strona kontaktowa, login, strona rejestracji…):

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

Zapoznaj się z blogiem OIW - Jak usunąć logo Google reCAPTCHA z formularza kontaktowego 7 w WordPress (Ukryj znaczek reCAPTCHA)

Tak, możesz to zrobić . możesz użyć css lub javascript, aby ukryć znaczek reCaptcha v3.

1. Sposób CSS - użyj display: nonelub visibility: hiddendo ukrycia partii reCaptcha. To łatwe i szybkie.

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

2. Sposób Javascript

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

Ukrycie plakietki jest ważne, zgodnie z polityką Google, a odpowiedź znajduje się w FAQ tutaj . Zaleca się wyświetlenie polityki prywatności i warunków korzystania z Google, jak pokazano poniżej.

Widziałem następny komentarz na ten temat

Warto również umieścić odznakę w tekście, jeśli chcesz zastosować do niej własny arkusz CSS. Pamiętaj jednak, że zgodziłeś się pokazać Warunki korzystania z usługi Google podczas rejestracji klucza API - więc nie ukrywaj tego, proszę. I chociaż możliwe jest całkowite zniknięcie plakietki za pomocą CSS, nie zalecamy tego.

Uwaga: jeśli zdecydujesz się ukryć odznakę, użyj
.grecaptcha-badge { visibility: hidden; }

Możesz ukryć odznakę, o ile w przepływie użytkowników uwzględnisz branding reCAPTCHA w widoczny sposób. Prosimy o dołączenie następującego tekstu:

Ta strona jest chroniona przez reCAPTCHA i Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

więcej szczegółów tutaj reCaptacha

Formularz kontaktowy Recaptcha 7 i rozwiązanie Recaptcha v3.

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

Więcej niż jedna strona formularza kontaktowego?

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

Możesz dodać więcej „nie”, jeśli masz więcej stron formularza kontaktowego.

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

Upewnij się, że twoja sekcja ciała będzie się podobać:

<body>

Zmień to tak, aby wyglądało tak:

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