Contact Form 7 に reCAPTCHA を導入するのは簡単だった

最近フォームから国内国外を問わず、機械的な宣伝メールが毎日たくさん届くようになったので、なんとかならないものかということで対策として reCAPTCHA が使えるのではないか？ということで導入してみることにしました。

WordPress の問い合わせフォームに Contact Form 7 を利用している場合なら reCAPTCHA を導入するのはとても簡単でした。

reCAPTCHA を導入する

Contact Form 7 の公式ブログに導入手順が記載されています。

reCAPTCHA (v3)

要約すると…
・reCAPTCHA ページへ行き、2つのキーを入手する
・Contact Form 7 の設定ページにそのキーを設定する

これだけで設定完了です。
ただし、reCAPTCHA を導入すると問い合わせフォーム以外を含めたすべてのページの右下にアイコンが表示されるようになります。

マウスカーソルを乗せるとこんな感じ。
プライバシーポリシーと利用規約へのリンクがが表示されるようになっています。

reCAPTCHA のアイコンを非表示にする

さすがに全ページは邪魔だなと思ったので非表示にできないか検索したところ、Google 公式で非表示にしても良いとのことのようです。

reCAPTCHA v3のバッジは消しても平気だった【Google公式】

Google 公式ヘルプは

Frequently Asked Questions  |  reCAPTCHA  |  Google Developers

つまるところ実行する内容は次の2点になります。

1．CSSに↓を追加

.grecaptcha-badge { visibility: hidden; }

2．Contact Form 7 の本文最後に↓を追加

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.

という感じでした！