WordPressのContact Form7にreCAPTCHAを設定しスパム対策をする

WordPress（ワードプレス）の問い合わせに「Contact Form 7」を利用していると、迷惑メールがたくさん来るという悩みが起こることがよくあります。今回はGoogleが無料で提供している「reCAPTCHA」を導入していく方法を紹介します。

reCAPTCHAは、Googleが提供するウェブサイトのセキュリティ技術の一種で、自動的に生成されたアカウントの作成やスパムメッセージの送信などの不正行為を防止するためのツールです。通常のCAPTCHAとは異なり、reCAPTCHAはAI技術を使用しています。

「reCAPTCHA(v2)」では「○○の写真を選択してください」のようなポップアップや「私はロボットではありません」のチェックをするポップアップが現れ、画像を正しく選択することで次のステップへ進むことが出来ました。

今回は、画像選択が無く、裏側でスパムかどうかを自動で判断して動く「reCAPTCHA(v3)」を設定していきます。

Contact Form 7（コンタクトフォームセブン）の設定は以下の記事にて取り上げています。

2023.02.22

WordPressで問合せフォームを作成する「Contact Form 7」

ホームページ、サイトを運営する際、問い合わせフォームを設置することは良くあります。 問い合わせフォームに使うプラグインは複数ありますが...

reCAPTCHA(v3)の登録をする

Google reCAPTCHのサイトへ行き、「V3 Admin Console」を選択します。

ラベル、reCAPTCHタイプ、ドメイン、Google Cloud Platformを設定し、「送信」を選択していきましょう。

※詳細は下記の表を参照してください。

設定完了がすぐに完了しないため、最初は図の様な表示が出ます。

この状態でも、サイトキー、シークレットキーは有効ですので、設定を進めることが出来ます。

reCAPTCHA側の設定が完了すると、図の様に「Enterpriseの設定が完了しました。」と出ます。

次のステップで、サイトキー、シークレットキーを使用しますので、画面はそのままで、次へ進んでいきましょう。

reCAPTCHAのサイトキー・シックレットキーを改めて確認する方法

万が一、先程の画面で「アナリティクスに移動」を選択してしまい、サイトキー・シークレットキーなどのコピーがもれてしまったり、同一ドメインの傘下のサイトへ設定をする場合は、以下の手順で確認することが可能です。

あらためてGoogle reCAPTCHのサイトへ行き、「V3 Admin Console」を選択します。

1度でも設定をしていると「v3 Admin Console」を選択するとダッシュボードへ行きますので、APIキーを使用したい「ラベル」を選択し、歯車の設定マークを選択します。

※今回は設定後すぐに「アナリティクスに移動」したことを想定しています。実際にサイトの設定をした後については、色々データが出てきていると思います。

「reCAPTCHAのキー」の項目を出すと、サイトキー・シックレットキーを確認することが出来ます。

Contact Form 7にreCAPTCHAをセットアップする

ワードプレスの管理画面から、「お問合せ＞インテグレーション」を選択し、下部の方にある「reCAPTCHA」を選択します。

サイトキー・シークレットキーを入力する部分がありますので、Google reCAPTCHAで設定されたサイトキー・シークレットキーを入力し、「変更を保存」します。

設定が無事完了すると「reCAPTCHA はこのサイト上で有効化されています。」となります。

※「インテグレーションをセットアップ」は、reCAPTCHAに使っているGoogleアカウントを変更しサイトキー・シークレットキーの情報を更新する場合に使用します。

まとめ

Contact Form 7 では、reCAPTCHAの設定が最初からできる様になっていて、追加でプラグインのインストールをする必要などはありません。迷惑メール自体の防御もありますが、スパムコメントの防御も行ってくれますので、設定をしておくことが推奨になります。

設定後全てのページに、reCAPTCHAのマークが右下に表示されます。

reCAPTCHAのマークが、上部へ戻るボタンや、他のコンテンツなどと重なってしまい、消したい・・・と思うことが有ると思います。

CSSで位置の調整することは問題ありませんが「display: none;」や「display: hidden;」で単純に消してしまうと、reCAPTCHAが作動しなくなることがありますので、マークを消したい場合はreCAPTCHAのルールに沿った変更を行いましょう。

reCAPTCHAバッジ（ロゴ）のGoogle推奨の非表示方法は、以下の記事にて取り上げています。

2023.04.20

reCAPTCHAのロゴを非表示にしてみる（Google推奨方法）

スパム対策等で、reCAPTCHAを導入している場合、初期設定ではサイトの右下にロゴマークが常駐します。 このreCAPTCHAのロ...