Google Görünmez reCAPTCHA rozeti nasıl gizlenir

Yeni Google Invisible reCATPTCHA'yı uygularken, varsayılan olarak ekranın sağ alt köşesinde üzerine geldiğinizde açılan küçük bir "reCAPTCHA tarafından korunuyor" rozeti alırsınız.

Bunu saklamak istiyorum.

Google şimdi den, Rozet gizlemek için izin verir SSS :

ReCAPTCHA v3 rozetini gizlemek istiyorum. Neye izin verilir?

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.

Örneğin:

Böylece aşağıdaki CSS'yi kullanarak gizleyebilirsiniz:

.grecaptcha-badge { 
    visibility: hidden;
}

display: none;Spam kontrolünü devre dışı bırakmak için göründüğü gibi kullanmayın (teşekkürler @Zade)

Tüm yaklaşımları test ettim ve:

UYARI: display: none Spam kontrolünü devre dışı bırakır!

visibility: hiddenve opacity: 0spam denetimini devre dışı bırakmayın.

Kullanılacak kod:

.grecaptcha-badge { 
    visibility: hidden;
}

Rozet simgesini gizlediğinizde Google , şunu ekleyerek hizmetinize formunuzda referans vermenizi ister :

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

data-badgeÖzelliği şu değere ayarlayın:inline

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

Ve aşağıdaki CSS'yi ekleyin

.grecaptcha-badge {
    display: none;
}

Google artık "reCAPTCHA markasını kullanıcı akışına görünür bir şekilde dahil ettiğiniz sürece rozeti gizlemenize izin verildi" diyor. bağlantı

Rozetin gizlenmesi TOU'ya göre gerçekten yasal olmadığından ve mevcut yerleşim seçenekleri kullanıcı arayüzümü ve / veya UX'imi kırdığı için, sabit konumlandırmayı taklit eden ancak bunun yerine satır içinde oluşturulmuş aşağıdaki özelleştirmeyi buldum:

Rozet konteynerinize biraz CSS uygulamanız yeterlidir:

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

Bence bu yasal olarak zorlayabildiğiniz kadar.

Rozeti iletişim sayfam hariç tüm sayfalarda gizlemeye karar verdim (Wordpress kullanarak):

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

Ben bir web geliştiricisi değilim, bu yüzden yanlış bir şey varsa lütfen beni düzeltin.

EDIT: Görüntü yerine görünürlük kullanmak üzere güncellendi.

Matthew Dowell'in direğinin, kısa flaşı önleyen, ancak iletişim formu 7 formu görünür olduğunda görüntülenen hafif bir çeşidi:

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

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

Daha sonra alt temamdaki header.php dosyasına aşağıdakileri ekledim:

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

Benim çözümüm rozeti gizlemek, ardından kullanıcı bir form girişine odaklandığında görüntülemek ve böylece Google'ın Şartlar ve Koşullarına bağlı kalmaktı.

Not: Düzenlediğim reCAPTCHA, bir WordPress eklentisi tarafından oluşturulmuştu, bu nedenle reCAPTCHA'yı <div class="inv-recaptcha-holder"> ... </div>kendinizle sarmanız gerekebilir .

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

Açıkçası, jQuery seçicisini gerekirse belirli formları hedefleyecek şekilde değiştirebilirsiniz.

Wordpress'teki İletişim Formu 7 kullanıcıları için bu yöntem benim için çalışıyor: v3 Recaptcha'yı Contact 7 Forms dışındaki tüm sayfalarda gizliyorum.

Ancak bu yöntem, metin giriş form öğeleri içeren tüm sayfaları tanımlayabilen benzersiz bir sınıf seçici kullandığınız herhangi bir sitede çalışmalıdır.

İlk olarak, CSS'de döşemeyi daraltabilecek bir hedef stil kuralı ekledim:

CSS

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

Sonra pencere yüklendikten sonra tetiklemek için başlığımda JQuery komut dosyası ekledim, böylece 'grecaptcha-badge' sınıf seçici JQuery için kullanılabilir ve mevcut CSS stilini uygulamak için 'hide' sınıfını ekleyebilirsiniz.

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

Döşemem hala yarım saniye boyunca her sayfada yanıp sönecek, ancak şimdiye kadar bulduğum en iyi geçici çözüm, umarım uyacaktır. İyileştirme önerileri takdir edildi.

bu spam kontrolünü devre dışı bırakmaz

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

İletişim Formu 7 güncellemesini ve en son sürümünü (sürüm 5.1.x) kullanıyorsanız, Google reCAPTCHA v3'ü kullanmanız için yüklemeniz, kurmanız gerekir.

varsayılan olarak, ekranın sağ altındaki her sayfada Google reCAPTCHA logosunu görürsünüz. Bu değerlendirmemize göre kullanıcılar için kötü bir deneyim yaratıyor. Ve web siteniz, blog biraz yavaşlayacaktır (PageSpeed ​​Score ile yansıtın), web siteniz tarafından bu rozeti görüntülemek için Google'dan ek 1 JavaScript kitaplığı yüklemeniz gerekecektir.

Aşağıdaki adımları izleyerek Google reCAPTCHA v3'ü CF7'den gizleyebilirsiniz (yalnızca gerektiğinde gösterin):

İlk olarak, functions.phptemanızın dosyasını açarsınız (Dosya Yöneticisi veya FTP İstemcisi'ni kullanarak). Bu dosya bulun: /wp-content/themes/your-theme/ve aşağıdaki snippet'i ekleyin (her sayfada reCAPTCHA kutusunu kaldırmak için bu kodu kullanıyoruz):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Daha sonra, bu snippet'i Google reCAPTCHA'yı (iletişim sayfası, giriş, kayıt sayfası…) görüntülemesini istediğiniz sayfaya ekleyeceksiniz:

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

OIW Blog'a bakın - Google reCAPTCHA Logosunu WordPress'deki İletişim Formu 7'den Kaldırma (reCAPTCHA rozetini gizle)

Evet, yapabilirsin . reCaptcha v3 rozetini gizlemek için css veya javascript kullanabilirsiniz .

1. CSS Yolu , reCaptcha grubunu gizlemek için display: noneveya visibility: hiddentuşunu kullanır . Kolay ve hızlı.

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

2. Javascript Yolu

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

Rozeti gizlemek, Google politikasına göre geçerlidir ve burada SSS ile cevaplanmıştır . Google'ın gizlilik politikasını ve kullanım şartlarını aşağıda gösterildiği gibi göstermeniz önerilir.

Bunun hakkında bir sonraki yorum gördüm

Kendi CSS'nizi uygulamak istiyorsanız rozetin satır içine yerleştirilmesi de yararlıdır. Ancak, bir API anahtarına kaydolduğunuzda Google'ın Şartlar ve koşullarını göstermeyi kabul ettiğinizi unutmayın; bu yüzden lütfen gizlemeyin. Ve rozetin CSS ile tamamen ortadan kalkması mümkün olsa da, bunu önermiyoruz.

Not: rozeti gizlemeyi seçerseniz, lütfen
.grecaptcha-badge { visibility: hidden; }

ReCAPTCHA markasını kullanıcı akışına görünür bir şekilde dahil ettiğiniz sürece rozeti gizlemenize izin verilir. Lütfen aşağıdaki metni ekleyin:

Bu site reCAPTCHA ve Google tarafından korunmaktadır
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

burada daha fazla ayrıntı reCaptacha

Recaptcha iletişim formu 7 ve Recaptcha v3 çözümü.

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

Birden Fazla İletişim Formu Sayfası?

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

Daha fazla iletişim formu sayfanız varsa daha fazla "not" ekleyebilirsiniz.

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

Vücut bölümünüzün aşağıdaki gibi olacağından emin olun:

<body>

Aşağıdaki gibi görünecek şekilde değiştirin:

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