วิธีซ่อนตรา reCAPTCHA ของ Google Invisible

เมื่อใช้งาน reCATPTCHA ที่มองไม่เห็นของ Google ใหม่โดยค่าเริ่มต้นคุณจะได้รับตรา "ป้องกันโดย reCAPTCHA" เล็กน้อยที่ด้านล่างขวาของหน้าจอที่ปรากฏขึ้นเมื่อคุณเลื่อนไป

ฉันต้องการซ่อนสิ่งนี้

Google อนุญาตให้ซ่อนตราจากคำถามที่พบบ่อย :

ฉันต้องการซ่อนป้าย reCAPTCHA v3 อนุญาตอะไรบ้าง

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.

ตัวอย่างเช่น:

ดังนั้นคุณสามารถซ่อนมันโดยใช้ CSS ต่อไปนี้:

.grecaptcha-badge { 
    visibility: hidden;
}

อย่าใช้display: none;ตามที่ปรากฏเพื่อปิดการตรวจสอบสแปม (ขอบคุณ @Zade)

ฉันได้ทดสอบวิธีการทั้งหมดและ:

คำเตือน: display: noneปิดการใช้งานการตรวจสอบสแปม!

visibility: hiddenและopacity: 0อย่าปิดการใช้งานการตรวจสอบสแปม

รหัสที่จะใช้:

.grecaptcha-badge { 
    visibility: hidden;
}

เมื่อคุณซ่อนไอคอนตราสัญลักษณ์ Google ต้องการให้คุณอ้างอิงบริการของพวกเขาในแบบฟอร์มของคุณโดยเพิ่มสิ่งนี้:

<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คุณสมบัติเป็นinline

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

และเพิ่ม CSS ต่อไปนี้

.grecaptcha-badge {
    display: none;
}

Google กล่าวว่า "คุณได้รับอนุญาตให้ซ่อนตราตราบใดที่คุณรวมตราสินค้า reCAPTCHA อย่างเห็นได้ชัดในกระแสผู้ใช้" ลิงค์

เนื่องจากการซ่อนตราสัญลักษณ์นั้นไม่ถูกต้องตาม TOU และตัวเลือกตำแหน่งที่มีอยู่นั้นกำลังทำลาย UI และ / หรือ UX ของฉันฉันจึงได้รับการปรับแต่งดังต่อไปนี้ซึ่งเลียนแบบการวางตำแหน่งคงที่ แต่แสดงแบบอินไลน์แทน:

คุณต้องใช้ CSS กับคอนเทนเนอร์ตราสัญลักษณ์ของคุณ:

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

ฉันคิดว่ามันเท่าที่คุณสามารถผลักดันมันได้อย่างถูกกฎหมาย

ฉันตัดสินใจซ่อนตราในทุกหน้ายกเว้นหน้าผู้ติดต่อของฉัน (ใช้ 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;
}

ฉันไม่ใช่นักพัฒนาเว็บดังนั้นโปรดแก้ไขให้ฉันถ้ามีสิ่งผิดปกติ

แก้ไข: อัปเดตเพื่อใช้การมองเห็นแทนการแสดงผล

ตัวแปรเล็กน้อยของโพสต์ของ Matthew Dowell ซึ่งหลีกเลี่ยงแฟลชสั้น ๆ แต่จะปรากฏเมื่อใดก็ตามที่แบบฟอร์มการติดต่อ 7 ปรากฏให้เห็น:

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

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

ฉันเพิ่มสิ่งต่อไปนี้ใน header.php ในธีมลูกของฉัน:

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

โซลูชันของฉันคือซ่อนตราจากนั้นแสดงเมื่อผู้ใช้มุ่งเน้นที่การป้อนฟอร์ม - ดังนั้นจึงยังคงปฏิบัติตามข้อกำหนดในการให้บริการของ Google

บันทึก: reCAPTCHA ที่ฉันปรับแต่งได้ถูกสร้างขึ้นโดยปลั๊กอิน WordPress ดังนั้นคุณอาจจำเป็นต้องล้อม reCAPTCHA ด้วย<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' );
  });
});

เห็นได้ชัดว่าคุณสามารถเปลี่ยนตัวเลือก jQuery เพื่อกำหนดเป้าหมายรูปแบบเฉพาะถ้าจำเป็น

สำหรับผู้ใช้แบบฟอร์มการติดต่อ 7 บน Wordpress วิธีนี้ใช้ได้กับฉัน: ฉันซ่อน v3 Recaptcha ในทุกหน้ายกเว้นผู้ที่มีแบบฟอร์มการติดต่อ 7

แต่วิธีนี้ควรทำงานกับไซต์ใด ๆ ที่คุณใช้ตัวเลือกคลาสที่ไม่ซ้ำกันซึ่งสามารถระบุหน้าทั้งหมดที่มีองค์ประกอบแบบฟอร์มป้อนข้อความ

ก่อนอื่นฉันเพิ่มกฎสไตล์เป้าหมายใน CSS ซึ่งสามารถยุบไทล์ได้:

CSS

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

จากนั้นฉันเพิ่มสคริปต์ JQuery ในส่วนหัวของฉันเพื่อทริกเกอร์หลังจากหน้าต่างโหลดดังนั้นตัวเลือกคลาส 'grecaptcha-badge' พร้อมใช้งานกับ JQuery และสามารถเพิ่มคลาส 'ซ่อน' เพื่อใช้สไตล์ CSS ที่มีอยู่

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

ไทล์ของฉันจะยังคงกระพริบทุกหน้าเป็นเวลาครึ่งวินาที แต่มันเป็นวิธีแก้ปัญหาที่ดีที่สุดที่ฉันพบมาจนฉันหวังว่าจะปฏิบัติตาม ข้อเสนอแนะสำหรับการปรับปรุงชื่นชม

นี่ไม่ได้ปิดการใช้งานการตรวจสอบสแปม

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

หากคุณกำลังใช้การอัปเดตฟอร์มติดต่อ 7 และเวอร์ชันล่าสุด (เวอร์ชัน 5.1.x) คุณจะต้องติดตั้งและตั้งค่า Google reCAPTCHA v3 ใหม่เพื่อใช้งาน

โดยค่าเริ่มต้นคุณจะได้รับโลโก้ Google reCAPTCHA บนทุกหน้าทางด้านล่างขวาของหน้าจอ นี่เป็นไปตามการประเมินของเราคือการสร้างประสบการณ์ที่ไม่ดีสำหรับผู้ใช้ และเว็บไซต์ของคุณบล็อกจะชะลอตัวลงเล็กน้อย (สะท้อนจากคะแนน PageSpeed) โดยเว็บไซต์ของคุณจะต้องโหลดไลบรารี JavaScript 1 ไลบรารีเพิ่มเติมจาก Google เพื่อแสดงตรานี้

คุณสามารถซ่อน Google reCAPTCHA v3 จาก CF7 (แสดงเฉพาะเมื่อจำเป็น) โดยทำตามขั้นตอนเหล่านี้:

ขั้นแรกให้คุณเปิดfunctions.phpไฟล์ของธีมของคุณ (โดยใช้ File Manager หรือ FTP Client) ไฟล์นี้อยู่ใน: /wp-content/themes/your-theme/และเพิ่มตัวอย่างต่อไปนี้ (เรากำลังใช้รหัสนี้เพื่อลบกล่อง reCAPTCHA ในทุกหน้า):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

จากนั้นคุณจะเพิ่มตัวอย่างนี้ในหน้าเว็บที่คุณต้องการให้แสดง Google reCAPTCHA (หน้าติดต่อ, เข้าสู่ระบบ, หน้าลงทะเบียน…):

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

อ้างอิงถึงบล็อก OIW - วิธีลบโลโก้ Google reCAPTCHA ออกจากแบบฟอร์มการติดต่อ 7 ใน WordPress (ซ่อนป้าย reCAPTCHA)

ใช่คุณสามารถทำมันได้ คุณสามารถใช้cssหรือjavascriptเพื่อซ่อนตรา reCaptcha v3

1. วิธี CSS ใช้display: noneหรือvisibility: hiddenซ่อนชุด reCaptcha ง่ายและรวดเร็ว

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

2. วิธี Javascript

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

การซ่อนป้ายที่ถูกต้องตามนโยบายของ Google และคำตอบในคำถามที่พบบ่อยที่นี่ ขอแนะนำให้แสดงนโยบายความเป็นส่วนตัวและข้อกำหนดการใช้งานจาก google ดังที่แสดงด้านล่าง

ฉันเห็นความคิดเห็นต่อไปเกี่ยวกับเรื่องนี้

นอกจากนี้ยังมีประโยชน์ในการวางป้ายอินไลน์หากคุณต้องการใช้ CSS ของคุณเอง แต่โปรดจำไว้ว่าคุณตกลงที่จะแสดงข้อตกลงและเงื่อนไขของ Google เมื่อคุณลงทะเบียนสำหรับรหัส API - ดังนั้นโปรดอย่าซ่อนไว้ และในขณะที่เป็นไปได้ที่จะทำให้ตราสัญลักษณ์หายไปอย่างสมบูรณ์ด้วย CSS เราไม่แนะนำ

หมายเหตุ: หากคุณเลือกที่จะซ่อนตราโปรดใช้
.grecaptcha-badge { visibility: hidden; }

คุณได้รับอนุญาตให้ซ่อนตราตราบใดที่คุณรวมการสร้างแบรนด์ reCAPTCHA อย่างเห็นได้ชัดในกระแสผู้ใช้ โปรดรวมข้อความต่อไปนี้:

ไซต์นี้ได้รับการคุ้มครองโดย reCAPTCHA และ Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

รายละเอียดเพิ่มเติมได้ที่นี่reCaptacha

Recaptcha แบบฟอร์มการติดต่อ 7 และโซลูชัน Recaptcha v3

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

มากกว่าหนึ่งหน้าฟอร์มการติดต่อ?

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

คุณสามารถเพิ่ม "nots" เพิ่มเติมหากคุณมีหน้าแบบฟอร์มการติดต่อเพิ่มเติม

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

ตรวจสอบให้แน่ใจว่าส่วนของร่างกายของคุณจะเป็นเช่นนี้:

<body>

เปลี่ยนเพื่อให้มีลักษณะดังนี้:

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