Google 보이지 않는 reCAPTCHA 배지를 숨기는 방법

Google 보이지 않는 reCAPTCHA 배지를 숨기는 방법

---

새로운 Google Invisible reCATPTCHA를 구현할 때 기본적으로 화면 오른쪽 하단에 롤오버시 튀어 나오는 "ReCAPTCHA로 보호됨"배지가 약간 있습니다.

이것을 숨기고 싶습니다.

---

물론 CSS를 사용하여 할 수 있습니다.

그러나 reCAPTCHA 서비스 약관 (동의해야 함)에 따라 사이트에서 reCAPTCHA 구현에 대해 방문자에게 알려야합니다.

그리고에서 Google 서비스 약관

본 약관은 귀하에게 당사 서비스에 사용 된 브랜드 또는 로고를 사용할 권리를 부여하지 않습니다. 서비스와 함께 또는 서비스와 함께 표시되는 법적 고지를 제거하거나 모호하게하거나 변경하지 마십시오.

2018 년 12 월 업데이트 (감사 @Sol)

Google은 이제 FAQ 에서 배지를 숨길 수 있습니다 .

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.

예를 들면 다음과 같습니다.

---

나는 모든 접근법을 테스트했고

경고 : 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;
}

---

배지를 숨기는 것은 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;
}

나는 그것이 당신이 합법적으로 그것을 추진할 수있는 한이라고 생각합니다.

---

Google now says "You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow." Link

---

I decided to hide the badge on all pages except my contact page (using 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;
}

I'm not a web developer so please correct me if there's something wrong.

EDIT: Updated to use visibility instead of display.

---

My solution was to hide the badge, then display it when the user focuses on a form input - thus still adhering to Google's T&Cs.

Note: The reCAPTCHA I was tweaking had been generated by a WordPress plugin, so you may need to wrap the reCAPTCHA with a <div class="inv-recaptcha-holder"> ... </div> yourself.

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

Obviously you can change the jQuery selector to target specific forms if necessary.

---

A slight variant of Matthew Dowell's post which avoids the short flash, but displays whenever the contact form 7 form is visible:

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

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

I then added the following to the header.php in my child theme:

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

---

this does not disable the spam checking

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

---

For users of Contact Form 7 on Wordpress this method is working for me: I hide the v3 Recaptcha on all pages except those with Contact 7 Forms.

But this method should work on any site where you are using a unique class selector which can identify all pages with text input form elements.

First, I added a target style rule in CSS which can collapse the tile:

CSS

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

Then I added JQuery script in my header to trigger after the window loads so the 'grecaptcha-badge' class selector is available to JQuery, and can add the 'hide' class to apply the available CSS style.

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

My tile still will flash on every page for a half a second, but it's the best workaround I've found so far that I hope will comply. Suggestions for improvement appreciated.

---

If you are using the Contact Form 7 update and the latest version (version 5.1.x), you will need to install, setup Google reCAPTCHA v3 to use.

by default you get Google reCAPTCHA logo displayed on every page on the bottom right of the screen. This is according to our assessment is creating a bad experience for users. And your website, blog will slow down a bit (reflect by PageSpeed Score), by your website will have to load additional 1 JavaScript library from Google to display this badge.

You can hide Google reCAPTCHA v3 from CF7 (only show it when necessary) by following these steps:

First, you open the functions.php file of your theme (using File Manager or FTP Client). This file is locate in: /wp-content/themes/your-theme/ and add the following snippet (we’re using this code to remove reCAPTCHA box on every page):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Next, you will add this snippet in the page you want it to display Google reCAPTCHA (contact page, login, register page …):

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

Refer on OIW Blog - How To Remove Google reCAPTCHA Logo from Contact Form 7 in WordPress (Hide reCAPTCHA badge)

---

I saw next comment about this

자체 CSS를 적용하려면 배지를 인라인으로 배치하는 것도 도움이됩니다. 그러나 API 키를 등록 할 때 Google 이용 약관을 표시하기로 동의 했으므로 숨기지 마십시오. CSS로 배지를 완전히 사라지게 할 수는 있지만 권장하지는 않습니다.

---

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

문의 양식 페이지가 더 있으면 더 많은 "노트"를 추가 할 수 있습니다.

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

본문 섹션이 다음과 같은지 확인하십시오.

<body>

다음과 같이 변경하십시오.

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

참고 URL : https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge