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

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

こんにちは、mickです。

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

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

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

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

⇒ e-words「CAPTCHA – reCAPTCHA」

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

reCAPTCHA v2もある(ボタンをクリックするアレ)

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

reCAPTCHA のサンプル
reCAPTCHA のサンプル

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

⇒ Google reCAPTCHA

Contact Form 7で reCAPTCHA v3 を使う

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

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

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

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

  1. GoogleでreCAPTCHA v3を使うキーを発行する
  2. 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サイトを登録する

reCAPCHA v3 の利用登録をする
reCAPCHA v3 の利用登録をする
reCAPCHA v3 の利用登録をする(続き)
reCAPCHA v3 の利用登録をする(続き)

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のインテグレーション

インテグレーションからreCAPTCHAを設定する
インテグレーションからreCAPTCHAを設定する

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

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

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

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

Contact Form 7 に reCAPTCHA v3 の設定ができた
Contact Form 7 に reCAPTCHA v3 の設定ができた

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

reCAPTCHAのバッジが邪魔なとき(CSSで隠す)

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

reCAPTCHA を設定したあとにでてくるバッジ
reCAPTCHA を設定したあとにでてくるバッジ

これは、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のバッジを表示するか上の文言を記載するか選ぶことができるというわけです。

まとめ。

Contact Form 7 のスパム対策にGoogleのreCAPTCHA v3を設定する方法を紹介しました。

プログラミングの知識もいらないし、利用するユーザーにも負担をかけないreCAPTCHA v3。
スパム対策にオススメです。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/02/09