Contact Form 7 のスパム対策はGoogleのreCAPTCHA v3で簡単

こんにちは、mickです。

ブログにお問い合わせフォームを付けるとスパムが心配になりますよね。
WordPressのお問い合わせフォームにプラグインContact Form 7を使っていたら、スパム対策は簡単です。

Googleのスパム対策機能である reCAPTCHA v3 を使えるから

人間が操作しているか知る reCAPTCHA v3
まとめ。

人間が操作しているか知る reCAPTCHA v3

reCAPTCHA v3は、Webページを閲覧するユーザーの行動から、操作しているのがロボットなのか人間なのかを判断する仕組みです。

⇒ e-words「CAPTCHA – reCAPTCHA」

スパム対策をしているWebサイトには、さりげなくこのreCAPTCHA v3が使われている可能性があります。
それでも利用する側のユーザーは、何もしなくていいので普段Webサイトを利用していたら気づかないです。

reCAPTCHA v2もある（ボタンをクリックするアレ）

v3というくらいなので当然v2もあります。
みなさんがWebサイトをみているとき、ボタンをくりっくしたり、画像を選ばされたりした経験がある方もいるはず。

v3では、この面倒な操作が不要なのでv3を使うことがWebサイトの運営者に好まれています。
余計な操作をユーザーに与えてしまうと、Webサイトから離れてしまう可能性があるからですね。

⇒ Google reCAPTCHA

Contact Form 7で reCAPTCHA v3 を使う

Contact Form 7

お問い合わせフォームプラグイン。シンプル、でも柔軟。

WordPressでお問い合わせフォームを簡単に作れるようになるプラグインのContact Form 7。

これには標準でreCAPTCHA v3を設定できるようになっているのでオススメです。

次の2ステップで済みます。

GoogleでreCAPTCHA v3を使うキーを発行する
Contact Form 7にキーを設定する

ここからは、記事作成時の最新版である以下の環境をもとに、Contact Form 7 にreCAPTCHA v3を使ってスパム対策をしていきます。

環境：
Contact Form 7 バージョン5.3.2

Googleのサービス My reCAPTCHA にいく

reCAPTCHA v3 は、Googleのサービス。
利用にはGoogleのアカウントが必要です。
なのでまずは、My reCAPTCHAに行きます。

reCAPTCHAに新しいWebサイトを登録する

reCAPTCHAに、使いたいWebサイトを登録します。
以下のような設定をしたと、「SUBMIT」ボタンをクリック。

① Label：Webサイトの名前やドメイン（one euroかoneuro.netなど）
② reCAPTCHA type：reCAPTCHA v3
③ Domains：Webサイトのドメイン（例えば、oneuro.net）
④ Accept the reCAPTCHA Terms of Service：チェックを入れる
⑤ Send alerts to owners：チェック入れる（デフォルト）

サイトキーとシークレットキーをコピー

Contact Form 7 で使うので、サイトキーとシークレットキーをコピーします。

Contact Form 7のインテグレーション

Contact Form 7 のインテグレーションからreCAPTCHA v3を選びます。

サイトキーとシークレットキーを貼り付ける

先ほどコピーしたサイトキーとシークレットキーを貼り付けます。
「変更を保存」しておしまい。

これだけ。
あとはContact Form 7とreCAPTCHA v3が自動的にスパム対策をしてくれます。
簡単。

reCAPTCHAのバッジが邪魔なとき（CSSで隠す）

reCAPTCHAをWebサイトに設置すると、画像のようなバッジが付くようになります。

これは、CSSをちょっと触るだけで隠すことができます。

隠す（visibility:hidden;）だけです。
消して（~~display:none;~~）はダメです（エラーが起きる）。

.grecaptcha-badge{
	visibility: hidden;
}

または次を追加（WordPressならstyle.cssなど）すればOK。

.grecaptcha-badge{
	opacity:0;
}

⇒ ここのWebサイトも参考になります（英語）。

reCAPTCHAのバッジを消すと利用規約違反にならないの？

2021/02/28追記

reCAPTCHAのバッジを消しただけだと、reCAPTCHAの利用規約に触れてしまいます。
その代わり、次の文言をreCAPTCHAを使っているお問い合わせフォームの下などにいれておけばOKです。

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.

⇒ 参考URL「Frequently Asked Questions」

つまり、私たちはreCAPTCHAのバッジを表示するか、上の文言を記載するか、選ぶことができるというわけです。