web-dev-qa-db-ja.com

Googleの見えないreCAPTCHAバッジを隠す方法

新しいGoogle Invisible reCATPTCHAを実装すると、デフォルトでは、ロールオーバーしたときに飛び出す画面の右下に「protected by reCAPTCHA」バッジが表示されます。

enter image description here

これを隠したいのですが。

javascriptrecaptcha
94
James Law

data-badge属性をinlineに設定します

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

そして以下のCSSを追加

.grecaptcha-badge {
    display: none;
}
36
James Law

もちろんあなたはCSSを使ってそれをすることができます。

しかし、reCAPTCHA利用規約（あなたが同意したにちがいない）によれば、あなたはあなたのサイトでのreCAPTCHAの実装について訪問者に知らせなければなりません：

enter image description here

そして からGoogleの利用規約

これらの条項は、当社のサービスで使用されているブランドまたはロゴを使用する権利をお客様に付与するものではありません。本サービスに表示されている、または本サービスと共に表示される法的通知を削除、隠し、または変更しないでください。

UPDATE DEC 2018 （ありがとう@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.

例えば：

enter image description here

128
Yann39

私はすべてのアプローチを試してみました。

display: noneはスパムチェックを無効にします。

visibility: hiddenとopacity: 0はスパムチェックを無効にしません。

使用するコード

.grecaptcha-badge { 
    visibility: hidden;
}

バッジアイコンを非表示にすると、Googleはフォームに reference /のサービスを追加して、これらのサービスにアクセスしてもらいたいです。

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

Example result

83
Helenesh

バッジを隠すのはTOUのように実際には合法ではなく、既存の配置オプションは私のUIやUXを壊していたので、固定配置を模した次のカスタマイズを思いついたが、代わりにインラインでレンダリングされる。

Collapsible "invisible" captcha

バッジコンテナに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;
}

合法的にプッシュできるかぎり、それは可能だと思います。

11
krukid

Googleは、「reCAPTCHAブランドを視覚的にユーザーフローに含める限り、バッジを非表示にすることは許可されています」と述べています。 リンク

10
codesmith

私は自分の連絡先ページを除くすべてのページでバッジを隠すことにしました（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開発者ではないので、何か問題がある場合は修正してください。

編集：表示ではなく表示を使用するように更新しました。

8
Leon

私の解決策は、バッジを非表示にして、ユーザーがフォーム入力に焦点を合わせたときに表示することでした。そのため、依然としてGoogleのT&Cに準拠しています。

注： 私が調整していたreCAPTCHAはWordPressプラグインによって生成されていたので、自分で<div class="inv-recaptcha-holder"> ... </div>でreCAPTCHAをラップする必要があるかもしれません。

_ 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セレクターを特定のフォームをターゲットにするように変更することができます。

3
Andy P

WordpressでContact Form 7を使用しているユーザーにとっては、この方法はうまくいきます。Contact 7 Formsのページを除いて、すべてのページでv3要約を非表示にします。

しかし、この方法はあなたがテキスト入力フォーム要素ですべてのページを識別することができるユニークなクラスセレクタを使用しているどんなサイトでもうまくいくはずです。

まず、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秒ごとにすべてのページで点滅しますが、それが私がこれまで順守してくれることを願っているのを見つけた最もよい回避策です。改善のための提案は大歓迎です。

2
Matthew Dowell

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

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

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

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

次の手順で、Google reCAPTCHA v3をCF 7から隠すことができます（必要な場合にのみ表示します）。

まず、テーマの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バッジを隠す）

2
OIW

Matthew Dowellの投稿のちょっとしたバリエーションで、短いフラッシュは避けますが、contact form 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>
1
Nigel Dyer

次のコメントを見ました

独自のCSSを適用したい場合は、バッジをインラインに配置することも役立ちます。ただし、APIキーを登録したときにGoogleの利用規約を表示することに同意したことを忘れないでください。非表示にしないでください。 CSSでバッジを完全に消すことは可能ですが、お勧めできません。

1
Eugen Konkov

コードを理解していない人のために...

このためのプラグインがあります：

https://wordpress.org/plugins/hide-google-captcha-badge

それはうまくいきます、私はスパムを得ません、そして私は電子メールを得ます。

0
Amouratoglou

Recaptcha contact form 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(); ?>>
0
Bijaya Kumar Oli