Google Invisible ReCAPTCHAバッジを非表示にする方法

新しいGoogle Invisible reCATPTCHAを実装すると、デフォルトでは、画面の右下に小さな "protected by reCAPTCHA"バッジが表示され、ロールオーバーするとポップアップ表示されます。

これを非表示にしたいのですが。

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.

例えば：

したがって、次のCSSを使用して非表示にすることができます。

.grecaptcha-badge { 
    visibility: hidden;
}

display: none;スパムチェックを無効にしているように見えるので使用しないでください（@Zadeに感謝）

私はすべてのアプローチをテストしました：

警告： display: noneスパムチェックを無効にします！

visibility: hiddenopacity: 0スパムチェックを無効にしないでください。

使用するコード：

.grecaptcha-badge { 
    visibility: hidden;
}

バッジアイコンを非表示にすると、次のように追加して、フォーム上のサービスを参照するよう求められます。

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

私はWeb開発者ではないので、何か問題があれば修正してください。

編集：表示の代わりに可視性を使用するように更新されました。

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のT＆Cに準拠しています。

注：私が調整していた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セレクターを変更して特定のフォームをターゲットにすることができます。

WordpressのContact Form 7のユーザーの場合、この方法は私にとって有効です。Contact7 Formsを使用するページを除くすべてのページでv3 Recaptchaを非表示にします。

ただし、このメソッドは、テキスト入力フォーム要素を持つすべてのページを識別できる一意のクラスセレクターを使用しているサイトで機能します。

最初に、タイルを折りたたむことができるターゲットスタイルルールをCSSに追加しました。

CSS

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

次に、ウィンドウのロード後にトリガーするJQueryスクリプトをヘッダーに追加して、「grecaptcha-badge」クラスセレクターをJQueryで使用できるようにし、「hide」クラスを追加して、使用可能なCSSスタイルを適用できるようにします。

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

私のタイルはすべてのページで0.5秒間点滅し続けますが、これは私がこれまでに見つけた最善の回避策であり、準拠することを望んでいます。改善のための提案は高く評価されています。

これはスパムチェックを無効にしません

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

Contact Form 7のアップデートと最新バージョン（バージョン5.1.x）を使用している場合は、使用するGoogle reCAPTCHA v3をインストールしてセットアップする必要があります。

デフォルトでは、画面右下のすべてのページにGoogle reCAPTCHAロゴが表示されます。これは、私たちの評価によると、ユーザーに悪い体験をもたらしています。そして、あなたのウェブサイト、ブログは少し遅くなります（PageSpeedスコアで反映）。あなたのウェブサイトはこのバッジを表示するためにGoogleから追加の1 JavaScriptライブラリをロードする必要があるためです。

次の手順に従って、Google reCAPTCHA v3をCF7から非表示にできます（必要な場合にのみ表示）。

まず、functions.phpテーマのファイルを開きます（ファイルマネージャまたはFTPクライアントを使用）。このファイルは次の場所にあります。/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ブログを参照-WordPressのContact Form 7からGoogle reCAPTCHAロゴを削除する方法（reCAPTCHAバッジを非表示）

はい、できます。cssまたはjavascriptを使用して、reCaptcha v3バッジを非表示にすることができます。

1. CSSウェイは、reCaptchaバッチを使用display: noneまたはvisibility: hidden非表示にします。それは簡単で迅速です。

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

2. JavaScriptの方法

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

バッジを非表示にすることは、Googleのポリシーに従って有効であり、ここでよくある質問に回答しています。以下に示すように、プライバシーポリシーとGoogleの利用規約を表示することをお勧めします。

これについての次のコメントを見ました

独自のCSSをバッジに適用する場合は、バッジをインラインで配置することも役立ちます。ただし、APIキーの登録時にGoogleの利用規約を表示することに同意したことを忘れないでください。非表示にしないでください。また、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(); ?>>