Cách ẩn huy hiệu reCAPTCHA vô hình của Google

Khi triển khai reCATPTCHA mới vô hình của Google, theo mặc định, bạn nhận được một huy hiệu "được bảo vệ bởi reCAPTCHA" ở dưới cùng bên phải của màn hình bật ra khi bạn cuộn qua nó.

Tôi muốn che giấu điều này.

Google hiện cho phép ẩn Huy hiệu, khỏi Câu hỏi thường gặp :

Tôi muốn ẩn huy hiệu reCAPTCHA v3. Những gì được phép?

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.

Ví dụ:

Vì vậy, bạn có thể chỉ cần ẩn nó bằng CSS sau:

.grecaptcha-badge { 
    visibility: hidden;
}

Không sử dụng display: none;vì nó xuất hiện để vô hiệu hóa kiểm tra thư rác (cảm ơn @Zade)

Tôi đã thử nghiệm tất cả các phương pháp và:

CẢNH BÁO: display: none GIẢI QUYẾT việc kiểm tra thư rác!

visibility: hiddenvà opacity: 0KHÔNG vô hiệu hóa việc kiểm tra thư rác.

Mã sử ​​dụng:

.grecaptcha-badge { 
    visibility: hidden;
}

Khi bạn ẩn biểu tượng huy hiệu, Google muốn bạn tham chiếu dịch vụ của họ trên biểu mẫu của bạn bằng cách thêm vào đây:

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

Đặt data-badgethuộc tính thànhinline

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

Và thêm CSS sau

.grecaptcha-badge {
    display: none;
}

Google hiện cho biết "Bạn được phép ẩn huy hiệu miễn là bạn bao gồm nhãn hiệu reCAPTCHA rõ ràng trong luồng người dùng." Liên kết

Vì việc ẩn huy hiệu không thực sự hợp pháp theo Điều khoản Sử dụng và các tùy chọn vị trí hiện tại đã phá vỡ UI và / hoặc UX của tôi, tôi đã đưa ra các tùy chỉnh sau đây bắt chước định vị cố định, nhưng thay vào đó được hiển thị nội tuyến:

Bạn chỉ cần áp dụng một số CSS trên thùng chứa huy hiệu của bạn:

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

Tôi nghĩ rằng đó là xa như bạn có thể đẩy nó một cách hợp pháp.

Tôi quyết định ẩn huy hiệu trên tất cả các trang trừ trang liên hệ của tôi (sử dụng 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;
}

Tôi không phải là nhà phát triển web, vì vậy hãy sửa cho tôi nếu có gì sai.

EDIT: Cập nhật để sử dụng khả năng hiển thị thay vì hiển thị.

Một biến thể nhỏ của bài đăng của Matthew Dowell tránh đèn flash ngắn, nhưng hiển thị bất cứ khi nào có thể nhìn thấy biểu mẫu liên hệ 7:

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

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

Sau đó tôi đã thêm phần sau vào tiêu đề.php trong chủ đề con của mình:

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

Giải pháp của tôi là ẩn huy hiệu, sau đó hiển thị nó khi người dùng tập trung vào đầu vào biểu mẫu - do đó vẫn tuân thủ T & C của Google.

Lưu ý: ReCAPTCHA tôi đã điều chỉnh đã được tạo bởi một plugin WordPress, do đó bạn có thể cần phải tự bọc lại 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' );
  });
});

Rõ ràng bạn có thể thay đổi bộ chọn jQuery để nhắm mục tiêu các biểu mẫu cụ thể nếu cần thiết.

Đối với người dùng của Mẫu liên hệ 7 trên Wordpress, phương pháp này phù hợp với tôi: Tôi ẩn Recaptcha v3 trên tất cả các trang trừ những trang có Biểu mẫu liên hệ 7.

Nhưng phương pháp này sẽ hoạt động trên bất kỳ trang web nào bạn đang sử dụng bộ chọn lớp duy nhất có thể xác định tất cả các trang có thành phần biểu mẫu nhập văn bản.

Đầu tiên, tôi đã thêm một quy tắc kiểu đích trong CSS có thể thu gọn ô xếp:

CSS

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

Sau đó, tôi đã thêm tập lệnh JQuery trong tiêu đề của mình để kích hoạt sau khi cửa sổ tải để bộ chọn lớp 'grecaptcha-Badge' có sẵn cho JQuery và có thể thêm lớp 'ẩn' để áp dụng kiểu CSS có sẵn.

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

Gạch của tôi vẫn sẽ nhấp nháy trên mỗi trang trong nửa giây, nhưng đó là cách giải quyết tốt nhất mà tôi đã tìm thấy cho đến nay mà tôi hy vọng sẽ tuân thủ. Đề xuất cải tiến đánh giá cao.

điều này không vô hiệu hóa việc kiểm tra thư rác

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

Nếu bạn đang sử dụng bản cập nhật Mẫu liên hệ 7 và phiên bản mới nhất (phiên bản 5.1.x), bạn sẽ cần cài đặt, thiết lập Google reCAPTCHA v3 để sử dụng.

theo mặc định, bạn nhận được biểu tượng Google reCAPTCHA được hiển thị trên mỗi trang ở dưới cùng bên phải của màn hình. Điều này là theo đánh giá của chúng tôi đang tạo ra một trải nghiệm xấu cho người dùng. Và trang web, blog của bạn sẽ chậm lại một chút (phản ánh bởi PageSpeed ​​Score), bởi trang web của bạn sẽ phải tải thêm 1 thư viện JavaScript từ Google để hiển thị huy hiệu này.

Bạn có thể ẩn Google reCAPTCHA v3 khỏi CF7 (chỉ hiển thị khi cần thiết) bằng cách thực hiện theo các bước sau:

Đầu tiên, bạn mở functions.phptệp chủ đề của mình (sử dụng Trình quản lý tệp hoặc Máy khách FTP). Tệp này được định vị trong: /wp-content/themes/your-theme/và thêm đoạn mã sau (chúng tôi đang sử dụng mã này để xóa hộp reCAPTCHA trên mỗi trang):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Tiếp theo, bạn sẽ thêm đoạn mã này vào trang bạn muốn nó hiển thị Google reCAPTCHA (trang liên hệ, đăng nhập, trang đăng ký Thẻ):

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

Tham khảo trên Blog OIW - Cách xóa Logo Google reCAPTCHA khỏi Biểu mẫu liên hệ 7 trong WordPress (Ẩn huy hiệu reCAPTCHA)

Vâng, bạn có thể làm điều đó . bạn có thể sử dụng css hoặc javascript để ẩn huy hiệu reCaptcha v3.

1. Cách CSS sử dụng display: nonehoặc visibility: hiddenđể ẩn lô reCaptcha. Thật dễ dàng và nhanh chóng.

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

2. Cách Javascript

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

Ẩn huy hiệu là hợp lệ, theo chính sách của google và được trả lời trong faq tại đây . Bạn nên hiển thị chính sách bảo mật và điều khoản sử dụng từ google như dưới đây.

Tôi thấy bình luận tiếp theo về điều này

Cũng rất hữu ích khi đặt huy hiệu nội tuyến nếu bạn muốn áp dụng CSS của riêng mình cho nó. Nhưng hãy nhớ rằng bạn đã đồng ý hiển thị Điều khoản và điều kiện của Google khi bạn đăng ký khóa API - vì vậy đừng ẩn nó, làm ơn. Và mặc dù có thể làm cho huy hiệu biến mất hoàn toàn bằng CSS, chúng tôi không khuyến nghị sử dụng nó.

Lưu ý: nếu bạn chọn ẩn huy hiệu, vui lòng sử dụng
.grecaptcha-badge { visibility: hidden; }

Bạn được phép ẩn huy hiệu miễn là bạn bao gồm nhãn hiệu reCAPTCHA rõ ràng trong luồng người dùng. Vui lòng bao gồm các văn bản sau:

Trang web này được bảo vệ bởi reCAPTCHA và Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

biết thêm chi tiết tại đây reCaptacha

Recaptcha liên hệ mẫu 7 và giải pháp Recaptcha v3.

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

Nhiều hơn một mẫu liên hệ?

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

Bạn có thể thêm nhiều thông báo khác nếu bạn có nhiều trang biểu mẫu liên hệ hơn.

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

Hãy chắc chắn rằng phần cơ thể của bạn sẽ thích điều này:

<body>

Thay đổi nó để nó trông như thế này:

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