Cara menyembunyikan lencana Google Invisible reCAPTCHA

157

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.

masukkan deskripsi gambar di sini

Saya ingin menyembunyikan ini.

James Law
sumber

Jawaban:

217

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:

masukkan deskripsi gambar di sini

Jadi Anda bisa menyembunyikannya menggunakan CSS berikut:

.grecaptcha-badge { 
    visibility: hidden;
}

masukkan deskripsi gambar di siniJangan gunakan display: none;karena tampaknya menonaktifkan pemeriksaan spam (terima kasih @ Zade)

Yann39
sumber
24
Saya tidak ingin memberi tahu Anda apa yang harus dilakukan;) Saya hanya memperingatkan pengguna lain bahwa menghapusnya mungkin ilegal.
Yann39
16
ini sama sekali tidak dapat diterima, karena pada layar kecil seperti ponsel, lencana ini mencakup area halaman web yang signifikan.
Don Dilanga
12
Terima, atau pilih layanan yang berbeda. Google memiliki hak untuk meminta Anda menunjukkan pencitraan merek untuk layanan gratis mereka . Anda bahkan dapat memposisikan ulang badge agar sejajar dengan form developers.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka
1
Yah, saya hanya menggunakan captcha v3 ini di halaman formulir kontak saya. Jadi ini adalah satu-satunya halaman yang saya ingin lencana ini ditampilkan. Itu tidak berlaku di tempat lain di situs saya. Bisa jadi?
Andrew Truckle
4
@ Yann39 - harap perbarui jawaban Anda. Tidak masalah menyembunyikannya dan menambahkannya ke halaman kontak saja: developers.google.com/recaptcha/docs/faq
Sol
172

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>

Contoh hasil

Helenesh
sumber
6
Jawaban ini harus lebih tinggi! Ini berisi semua informasi yang diperlukan untuk solusi secara ringkas.
Björn Larsson
3
Persis apa yang saya cari dan ini bekerja dengan baik. Juga bagi siapa pun yang mencari bukti bahwa itu diperbolehkan, silakan periksa halaman ini (jika Anda belum melihatnya di utas SO ini) developers.google.com/recaptcha/docs/faq
Jake
Terima kasih telah menyebutkan @Jake ini. Saya telah menambahkan ini ke jawaban saya.
Helenesh
Adakah yang menemukan cara yang terdokumentasi untuk menyembunyikan lencana daripada hack css? Google menawarkan cara alternatif untuk menunjukkan branding mereka, tetapi saya tidak dapat menemukan metode yang didukung untuk menyembunyikan lencana mereka.
Harga Collin
38

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;
}
James Law
sumber
7
Hati-hati; ini tampaknya menonaktifkan pemeriksaan spam.
Zade
3
Apakah ini benar-benar menonaktifkan pemeriksaan spam? Jika demikian, mengapa semua upvotes?
Charlie Schliesser
1
@ Zade mungkin malah menggunakan opacity: 0atau visibility: hidden? Anda juga punya tautan ke tempat statistik itu?
ctf0
4
Perjanjian pengguna mengatakan bahwa Anda harus memberi tahu pengguna sebagaimana @ Yann39 katakan di atas.
Mihail Minkov
1
@Helenesh layak mendapat jawaban terpisah?
Anupam
14

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

pembuat kode
sumber
2
Hanya berlaku untuk v3! v2 masih membutuhkan menunjukkan lencana. :(
ADTC
13

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:

Captcha "tak terlihat" yang bisa dilipat

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.

Krukid
sumber
1
Bagus. Saya mendorongnya lebih jauh (tanpa benar-benar menyembunyikannya sepenuhnya) menggunakan transform: scale(0.6)danopacity: 0.6
squarecandy
Apakah Anda dapat membuat spanduk biru terbuka ke kanan daripada kiri? Juga menyesuaikan skema warna itu?
Vaishal Patel
@VaishalPatel dalam teori, ya, tetapi ada dua kontra: pertama, mengutak-atik desain lencana asli tidak disarankan oleh Google dan kedua, semakin banyak asumsi tentang desain yang Anda buat dalam perubahan Anda, semakin rapuh solusi Anda menjadi - ingat Google bebas mengubah gaya dan tata letak lencana kapan pun mereka mau.
krukid
1
@ Krukid saya pergi dengan inline gaya default mereka.
Vaishal Patel
9

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.

Leon
sumber
ini akan bekerja tetapi halaman-id-# adalah khusus untuk situs web Anda sehingga siapa pun yang menggunakan ini harus menyesuaikan id agar sesuai dengan halaman yang mereka inginkan untuk menampilkannya. || Saya telah melihat laporan yang mengatakan melakukan tampilan ini: tidak ada; akan juga menonaktifkan pemeriksaan tetapi saya tidak yakin tentang itu sekarang.
Michael Tunnell
Cermat! Ini menonaktifkan pemeriksaan spam. Periksa jawaban saya untuk info lebih lanjut
Helenesh
Diperbarui berdasarkan komentar di atas dari Michael & Helenesh
Leon
4

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>
Nigel Dyer
sumber
3

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.

Andy P
sumber
3

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.

Matthew Dowell
sumber
2

ini tidak menonaktifkan pemeriksaan spam

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

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)

OIW
sumber
2

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

kebijakan google dan ketentuan penggunaan

Kiran Maniya
sumber
1
'bukan querySelect' tetapi 'querySelector'.
Keisuke Nagakawa
1
@ 永川 圭介 terima kasih telah kembali ke salah ketik.
Kiran Maniya
1

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.

Eugen Konkov
sumber
0

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

Mohsin Saeed
sumber
-1

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(); ?>>
Bijaya Kumar Oli
sumber
Silakan jawaban yang lain, tidak ada tampilan yang menonaktifkan pemeriksaan spam.
Helenesh
@Helenesh apa itu pemeriksaan spam dan bagaimana hal itu terkait dengan menambahkan gaya CSS?
Berkant Ipek