reCAPTCHAのバッジを表示しない対応（Google公式で）

reCAPTCHAバッジは
CSSで消していい

Googleの公式サイトを見ると、バッジをCSSで消してもよいということになっています。
ただし、指定の文言を掲示する必要があります。

つまりは、指定文言を掲示すれば消していいのです。

バッジの消し方

やるべきことはたったの2つです。
先に、reCAPTCHAの設定は完了している前提です。

上記はコピペでOKです。

まずは、コピペの元ネタになるページ（0. 参照すべきページ）を表示しましょう！

以下がQ&Aページです。

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:
Q&A

ユーザーフロー中に、reCAPTCHAのブランドを見えるようにしてさえいれば、バッジを消してもいいですよ。みたいなことが書かれています。
そして、以下のテキストを使ってねと。それが次項です。

文章に指定リンクの混合です。
ポリシーなどの掲示も必要ということなのです。

単純なコピペです。

「ユーザーフローの中に」というポイントが分かりにくいわけですが、ちゃんと例が示されています。
「For example:」のようなイメージになるようにしましょう。
当サイトでは「コンタクトフォーム7」を使っていますので、テンプレート内に書き込みました。

ちなみに、ちょっとアレンジしています。
文字色を変えているのと、リンク先は別に開くようにしています。ポリシー確認のために離脱で帰って来られないのは辛いので。。

では、次にバッジを消します。
こちらも単純なコピペです。
CSSクラスで消すだけなので、追加CSSなり、テーマエディターなり、分かりやすいところにCSSを貼り付ければいいと思います。

元ソースは上記のページにて。

.grecaptcha-badge { visibility: hidden; }

クラス名でやってしまっていいんですね。
意外でした。

わざわざ2ステップ踏んでまで消したいのは、右下に「トップへ戻る」ボタンを表示しているからです。
テーマの力を借りているものの、Google様的には推奨コントロールのはずです。
どこに表示するかは別にしても、多くのサイトで採用されていると思うんです。

ボタンが被ってカッコ悪い！

ただそれだけです。
デザインの好みなんて、そんなものですよねっ！