Cara menyembunyikan lencana Google Invisible reCAPTCHA

Saat menerapkan Google Invisible reCATPTCHA yang baru, secara default Anda mendapat sedikit lencana "protected by reCAPTCHA" di kanan bawah layar yang muncul saat Anda menggulirkannya.

Saya ingin menyembunyikan ini.

Google sekarang memungkinkan untuk menyembunyikan Badge, dari FAQ :

Saya ingin menyembunyikan lencana reCAPTCHA v3. Apa yang diizinkan?

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.

Sebagai contoh:

Jadi Anda bisa menyembunyikannya menggunakan CSS berikut:

.grecaptcha-badge { 
    visibility: hidden;
}

Jangan gunakan display: none;karena tampaknya menonaktifkan pemeriksaan spam (terima kasih @ Zade)

Saya telah menguji semua pendekatan dan:

PERINGATAN: display: none MUNGKINKAN memeriksa spam!

visibility: hidden dan opacity: 0 JANGAN menonaktifkan pemeriksaan spam.

Kode untuk digunakan:

.grecaptcha-badge { 
    visibility: hidden;
}

Saat Anda menyembunyikan ikon lencana, Google ingin Anda merujuk layanan mereka pada formulir Anda dengan menambahkan ini:

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

Setel data-badgeatribut keinline

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

Dan tambahkan CSS berikut

.grecaptcha-badge {
    display: none;
}

Google sekarang mengatakan, "Anda diizinkan menyembunyikan lencana selama Anda memasukkan branding reCAPTCHA secara jelas dalam aliran pengguna." Tautan

Karena menyembunyikan lencana tidak benar-benar sesuai dengan TOU, dan opsi penempatan yang ada melanggar UI dan / atau UX saya, saya telah membuat penyesuaian berikut yang meniru penentuan posisi tetap, tetapi sebaliknya diberikan inline:

Anda hanya perlu menerapkan beberapa CSS pada wadah lencana Anda:

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

Saya pikir itu sejauh yang Anda bisa mendorongnya secara legal.

Saya memutuskan untuk menyembunyikan lencana di semua halaman kecuali halaman kontak saya (menggunakan 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;
}

Saya bukan pengembang web, jadi perbaiki saya jika ada sesuatu yang salah.

EDIT: Diperbarui untuk menggunakan visibilitas alih-alih tampilan.

Varian sedikit posting Matthew Dowell yang menghindari flash pendek, tetapi ditampilkan setiap kali formulir kontak 7 terlihat:

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

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

Saya kemudian menambahkan yang berikut ke header.php di tema anak saya:

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

Solusi saya adalah menyembunyikan lencana, lalu menampilkannya ketika pengguna berfokus pada input formulir - dengan demikian masih mematuhi T&C Google.

Catatan: reCAPTCHA yang saya tweak telah dihasilkan oleh plugin WordPress, jadi Anda mungkin perlu membungkus reCAPTCHA dengan <div class="inv-recaptcha-holder"> ... </div>Anda sendiri.

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

Jelas Anda dapat mengubah pemilih jQuery untuk menargetkan formulir tertentu jika perlu.

Untuk pengguna Formulir Kontak 7 di Wordpress metode ini berfungsi untuk saya: Saya menyembunyikan v3 Recaptcha di semua halaman kecuali yang dengan Formulir Kontak 7.

Tetapi metode ini harus bekerja di situs mana pun di mana Anda menggunakan pemilih kelas unik yang dapat mengidentifikasi semua halaman dengan elemen formulir input teks.

Pertama, saya menambahkan aturan gaya target di CSS yang dapat menutup ubin:

CSS

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

Kemudian saya menambahkan skrip JQuery di header saya untuk memicu setelah jendela dimuat sehingga pemilih kelas 'grecaptcha-badge' tersedia untuk JQuery, dan dapat menambahkan kelas 'sembunyikan' untuk menerapkan gaya CSS yang tersedia.

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

Ubin saya masih akan berkedip pada setiap halaman selama setengah detik, tapi ini solusi terbaik yang saya temukan sejauh ini yang saya harap akan sesuai. Saran untuk peningkatan dihargai.

ini tidak menonaktifkan pemeriksaan spam

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

Jika Anda menggunakan pembaruan Formulir Kontak 7 dan versi terbaru (versi 5.1.x), Anda harus menginstal, mengatur Google reCAPTCHA v3 untuk digunakan.

secara default Anda mendapatkan logo Google reCAPTCHA ditampilkan pada setiap halaman di kanan bawah layar. Ini menurut penilaian kami adalah menciptakan pengalaman buruk bagi pengguna. Dan situs web Anda, blog akan sedikit melambat (tercermin dengan PageSpeed ​​Score), oleh situs web Anda harus memuat 1 perpustakaan JavaScript tambahan dari Google untuk menampilkan lencana ini.

Anda dapat menyembunyikan Google reCAPTCHA v3 dari CF7 (hanya perlihatkan jika perlu) dengan mengikuti langkah-langkah ini:

Pertama, Anda membuka functions.phpfile tema Anda (menggunakan File Manager atau FTP Client). File ini berada di: /wp-content/themes/your-theme/dan menambahkan cuplikan berikut (kami menggunakan kode ini untuk menghapus kotak reCAPTCHA di setiap halaman):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Selanjutnya, Anda akan menambahkan potongan ini di halaman yang Anda inginkan untuk menampilkan Google reCAPTCHA (halaman kontak, login, halaman register ...):

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

Lihat di Blog OIW - Cara Menghapus Logo Google reCAPTCHA dari Formulir Kontak 7 di WordPress (Sembunyikan lencana reCAPTCHA)

Ya, Anda bisa melakukannya . Anda dapat menggunakan css atau javascript untuk menyembunyikan lencana reCaptcha v3.

1. Cara CSS menggunakan display: noneatau visibility: hiddenuntuk menyembunyikan kumpulan reCaptcha. Mudah dan cepat.

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

2. Cara Javascript

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

Menyembunyikan lencana valid, sesuai dengan kebijakan google dan dijawab dalam faq di sini . Disarankan untuk menunjukkan kebijakan privasi dan ketentuan penggunaan dari google seperti yang ditunjukkan di bawah ini.

Saya melihat komentar selanjutnya tentang ini

Ini juga membantu untuk menempatkan badge inline jika Anda ingin menerapkan CSS Anda sendiri padanya. Tetapi ingatlah bahwa Anda setuju untuk menunjukkan Persyaratan dan ketentuan Google ketika Anda mendaftar untuk kunci API - jadi jangan menyembunyikannya. Dan meskipun dimungkinkan untuk membuat lencana menghilang sepenuhnya dengan CSS, kami tidak akan merekomendasikannya.

Catatan: jika Anda memilih untuk menyembunyikan lencana, silakan gunakan
.grecaptcha-badge { visibility: hidden; }

Anda diizinkan menyembunyikan lencana selama Anda menyertakan branding reCAPTCHA secara kasat mata dalam alur pengguna. Harap sertakan teks berikut:

Situs ini dilindungi oleh reCAPTCHA dan Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

lebih detail di sini reCaptacha

Formulir kontak Recaptcha 7 dan solusi Recaptcha v3.

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

Lebih dari Satu Halaman Formulir Kontak?

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

Anda dapat menambahkan lebih banyak "not" jika Anda memiliki lebih banyak halaman formulir kontak.

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

Pastikan bagian tubuh Anda akan menyukai ini:

<body>

Ubah sehingga terlihat seperti ini:

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