ContactForm7のスパムメール対策 reCAPTCHA v3の導入方法

スポンサーリンク
スポンサーリンク

ContactForm7にreCAPTCHAv3導入

WordPressの問い合わせフォーム作成プラグイン「ContactForm7」に、reCAPTCHAの最新バージョン「reCAPTCHA v3」を導入してみました。

ContactForm7は、WordPressでメールフォームを設置できる定番プラグインですが、メールフォームからスパムメールが大量に送られてきて困っている方も多いかと思います。

ContactForm7でスパムメールを防ぐための対策としては、Akismetを使うのが一般的ですが、今回はGoogleのreCAPTCHAを導入してみました。

ContactForm7の設定画面にも「賢いreCAPTCHAはうっとうしいスパムボットをブロックしてくれます。」とあるので、公式に推奨しているようです。

reCAPTCHA導入はContactForm7から設定する方法と、プラグイン「Invisible reCaptcha for WordPress」を使う方法がありますが、ContactForm7から設定すると、保護する必要のないページでもreCAPTCHAバッジが表示されます。

問い合わせページやコメントフォームのみバッジを表示させたい場合は、プラグイン「Invisible reCaptcha for WordPress」を使ってreCAPTCHA v3 を導入します。

スポンサーリンク

reCAPTCHAのバージョン

GoogleのreCAPTCHAは、以前のv2と最新のv3の2種があります。

reCAPTCHA v2では、認証のために曲がったテキストを入力したり、複数の画像を選択したり、「私はロボットではありません」というチェックボックスを選択する必要がありましたが、最新のreCAPTCHA v3 はバックグラウンドで認証を行うので、これらの操作は不要になりました。

以前にreCAPTCHA v2を導入する方法を紹介しましたが、最新のContactForm7 バージョン5.1からはreCAPTCHA v3 APIを使うようになっています。

ContactForm7にreCAPTCHA v2を導入する
WordPressプラグイン「ContactForm7」のスパムメール対策として、GoogleのreCAPTCHA v2を導入しました。ContactForm7には「Check」か「Invisible」タイプを導入すればよいでしょう。

以前のreCAPTCHA v2と、最新のreCAPTCHA v3では、使用するAPIキーが異なります。reCAPTCHA v2をお使いの方は、改めてサイトを登録してreCAPTCHA v3のAPIキーを入手してから、ContactForm7を設定してください。

ContactForm7 インテグレーションのメッセージ

ContactForm7をインストールすると、ダッシュボードのメニューに「インテグレーション」が追加されます。ここからreCAPTCHA v3のセットアップが行えます。

contactform7 recaptcha v3導入

すでにreCAPTCHAを使用しているサイトでは、インテグレーションに「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。v2 のキーは v3 の API では機能しません。」というメッセージが表示されます。

すでに reCAPTCHA v2 によって保護されているので、そのまま使っても問題ありませんが、手間はそれほどかからないので、この機会にreCAPTCHA v3へ移行しましょう。

contactform7 インテグレーション recaptcha警告メッセージ

reCAPTCHA サイトキーとシークレットキー取得

では、ContactForm7にreCAPTCHA v3を導入してみましょう。まずはreCAPTCHAに新規登録する場合のサイトキーとシークレットキー取得方法を説明します。

ダッシュボードの「お問い合わせ」→「インテグレーション」から、「インテグレーションのセットアップ」をクリックします。

contactform7 recaptcha v3導入

キーの入力欄右上のURLをクリックして、Google reCAPTCHAに進みます。キーを取得した後にまたWordPressへ戻るので、URLをクリックするときは新しいタブで開くと便利です。

contactform7 reCAPTCHAキー再取得

右上の「Admin console」からreCAPTCHAにログインします。

reCAPTCHAログイン

Googleアカウントを所有していない場合は、「アカウントを作成」から新規作成してください。

reCAPTCHA Googleアカウント

ここで新しいサイトを登録して、reCAPTCHAのサイトキーとシークレットキーを取得します。

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

ラベル: 設置するサイトの名前等を入力します。
reCAPTCHAタイプ:  reCAPTCHA v3を選択します。
ドメイン: reCAPTCHAを設置するサイトのドメインを入力します。http:// や https:// 、下層のディレクトリ等は入力不要です。

reCAPTCHA ドメイン入力エラー

あとは「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」をクリックします。「アラートをオーナーに送信する」は任意なので、通知が必要であればチェックしてください。

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

「サイトキー」と「シークレットキー」をメモ帳等にコピペしてから「設定に移動」をクリックします。この2つのAPIキーを入力するとreCAPTHCAが使えるようになります。

reCAPTCHA v3 サイトキーとシークレットキー

もう一度設定に戻って、reCAPTHCA保護対象のページ(問い合わせフォームやコメントフォーム)がAMPページの場合は、「このキーが AMP ページで動作するようにする」にチェックを入れて「保存」してください。

AMPページの項目は、なぜか最初のサイト登録の時には表示されず、登録が済んでからチェックできるようになっています。AMP対応サイトの場合は注意してください。

reCAPTCHA v3 AMPページ動作

ContactForm7でreCAPTCHA設定

もう一度ContactForm7に戻って、サイトキーとシークレットキーを入力します。reCAPTCHAとContactForm7のタブを両方開いておくと、作業しやすくなりますよ。

reCAPTCHA サイトキーとシークレットキー入力

「変更を保存」をクリックすると、ContactForm7の設定は無事終了です。

ContactForm7 reCAPTCHA設定

問い合わせフォームを確認してみると、サイトの右下にちゃんとreCAPTCHAのマークが表示されています。

ContactForm7 reCAPTCHA設定

テスト送信でも問題はなく、reCAPTCHAは機能しています。

ContactForm7 reCAPTCHA設定

reCAPTCHA のバッジを非表示に

ContactForm7の機能を使って reCAPTCHA v3 を導入すると、全てのページで reCAPTCHA のバッジが表示されます。バッジは右下の隅の方にあるので目立ちませんが、保護する必要がないページで表示されると、ちょっと気になりますよね。

reCAPTCHA バッヂ

PCより画面サイズが小さいスマホでバッジがあると結構目立つし、「トップに戻る」ボタンと被りやすい場所なので、関係ないページではバッジを非表示にしたいところです。

reCAPTCHA バッヂ スマホ

コードやCSSをいじって勝手にバッジを消すと規約違反になりますが、reCAPTCHAで保護されているページ以外で非表示にするのはOKです。

保護されたページ以外でreCAPTCHAを非表示にするなら、プラグイン「Invisible reCaptcha for WordPress」を使うのが一番簡単な方法です。

reCAPTCHA 新規登録の場合は、新たにサイトキーとシークレットキーを取得し、すでに登録済みであれば、ContactForm7 のキーを削除してからプラグインでキーを再登録します。

Invisible reCaptcha for WordPressの導入

では、Invisible reCaptcha for WordPressを使って、reCAPTCHA v3 を導入してみましょう。

WordPressダッシュボードの「プラグイン」→「新規追加」に進み、「Invisible reCaptcha for WordPress」を検索してインストールしてください。

プラグイン Invisible reCaptcha for WordPress

続いてダッシュボードの「設定」→「Invisible reCAPTCHA」からreCaptcha の設定を行います。先ほど取得したサイトキーとシークレットキーを貼り付けてください。

「Language」はAutomatically detect(自動検出)を選択、「Badge Position」はバッジの表示場所です。通常は右下でいいでしょう。

Invisible reCaptcha 導入

メールフォームの他に、コメントフォームやログイン画面を保護することもできます。設定の「WordPress」から各項目にチェックを入れるだけで有効になります。

Invisible reCAPTCHA WordPress設定

あとは「Contact Forms」の「Enable Protection for Contact Form 7」にチェックを入れて「変更を保存」すればOKです。

Invisible reCAPTCHA導入

これで問い合わせフォームにreCAPTCHAバッジが表示されます。

ContactForm7 reCAPTCHA設定

reCAPTCHAバッジの表示 / 非表示の切り替えは、プラグイン「Invisible reCaptcha for WordPress」を使うのが一番簡単です。これを使うと、問い合わせフォームやコメントフォームだけバッジを表示させて、他のページは非表示にすることができます。

reCAPTCHA のキーを再取得

reCAPTCHAの設定をContactForm7からプラグインに移行させる場合は、reCAPTCHA のサイトキーとシークレットキーを再取得してください。

次にContactForm7で登録済みのサイトキーとシークレットキーを削除してから、プラグインでキーを再登録します。

ダッシュボードの「お問い合わせ」→「インテグレーション」から、reCAPTCHA の「キーを削除」をクリックして、もう一度reCAPTCHAにログインします。

contactform7 reCAPTCHA キーを削除

管理画面右上の歯車マーク「設定」をクリックします。

reCAPTCHA 管理画面

設定済みの reCAPTCHAキーを再度取得します。「reCAPTCHAのキー」をクリックするとキーが表示されるので、サイトキーとシークレットキーをコピーします。

reCAPTCHA キー再取得

あとは同じ手順でプラグインをインストールして、reCAPTCHA v3を導入してください。

reCAPTCHA v2からv3に移行する場合は、改めてサイトを新規登録します。管理画面右上の「+」マークをクリックして、新しいサイトを登録してください。

reCAPTCHA管理画面

ContactForm7のreCAPTCHA v3導入まとめ

WordPressのメールフォーム設置プラグインといえばContactForm7が定番ですが、何も対策しないとスパムメールが大量に送られてくるので、困っている方も多いかと思います。

ContactForm7のスパムメール対策は、今までAkismetを使うのが一般的でしたが、最近はGoogleのreCAPTCHAを推奨するようになっています。

reCAPTCHA v2では、メール送信者がチェックを入れたり画像を選択する等の操作が必要でしたが、reCAPTCHA v3は自動で人間かスパムボットかを判断してくれます。

reCAPTCHA v3の導入はそれほど難しくないので、ContactForm7をお使いの方はぜひ使ってみてください。

他の reCAPTCHA 導入方法や使い方は、以下でも紹介しています。

reCAPTCHAの導入方法と使い方
WordPressのスパムコメントや不正ログインを防止するために、プラグインを用いてreCAPTCHAを導入する方法を紹介しています。また、メールフォーム設置プラグイン「ContactForm7」にreCAPTCHAを導入して、ボットによるスパムメール送信を防止する方法も紹介しています。
タイトルとURLをコピーしました