WordPressの問い合わせフォーム作成プラグイン「ContactForm7」に、Googleが提供する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のセットアップ
では、ContactForm7にreCAPTCHA v3を設定しましょう。まずはreCAPTCHAに新規登録するためのサイトキーとシークレットキー取得方法を説明します。
ContactForm7をインストールすると、ダッシュボードのメニューに「インテグレーション」が追加されます。ここからreCAPTCHA v3のセットアップが行えます。
ダッシュボードの「お問い合わせ」→「インテグレーション」から、「インテグレーションのセットアップ」をクリックします。
「外部APIとのインテグレーション」に進みます。reCAPTCHAを有効化するためには、サイトキーとシークレットキーを入力する必要があります。
Google reCAPTCHAに新しいサイトを登録
reCAPTCHAを有効化するため、以下の「Google reCAPTCHA登録ページ」にアクセスして、サイトを登録しましょう。
Googleアカウントからログアウトしている場合は、ログインが必要です。
reCAPTCHA登録 reCAPTCHA 新しいサイトを登録する
ここで新しいサイトを登録して、reCAPTCHAのサイトキーとシークレットキーを取得します。
ラベル： 設置するサイトの名前等を入力します。
reCAPTCHAタイプ： reCAPTCHA v3を選択します。
ドメイン： reCAPTCHAを設置するサイトのドメインを入力します。
最後に「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」をクリックします。「アラートをオーナーに送信する」は任意なので、通知が必要であればチェックしてください。
ドメイン入力の注意点ですが、http:// や https:// 、下層のディレクトリ等は入力不要です。
reCAPTCHA サイトキーとシークレットキー取得
これで「サイトキー」と「シークレットキー」を取得できました。ContactForm7に戻ってこのAPIキーを入力すると、reCAPTHCAが使えるようになります。
サイトキーとシークレットキーをメモ帳等にコピペしてから「設定に移動」をクリックします。
AMPページのreCAPTHCA設定
reCAPTHCA保護対象のページ（問い合わせフォームやコメントフォーム）がAMPの場合は、「このキーが AMP ページで動作するようにする」にチェックを入れて「保存」してください。
AMPページの項目は、なぜか最初のサイト登録の時には表示されず、登録が済んでからチェックできるようになっています。AMP対応サイトの場合は注意してください。
ContactForm7のreCAPTCHA設定
もう一度ContactForm7に戻って、サイトキーとシークレットキーを入力します。reCAPTCHAとContactForm7のタブを両方開いておくと、作業しやすくなりますよ。
「変更を保存」をクリックすると、ContactForm7の設定は無事終了です。
問い合わせフォームを確認してみると、サイトの右下にちゃんとreCAPTCHAのマークが表示されています。
テスト送信でも問題はなく、reCAPTCHAは機能しています。
「安全でないメール設定」のエラー
reCAPTCHAの設定がないままで、Contact Form 7のメール（2）を使用すると「安全でないメール設定が十分な防御策なく使われている」というエラーが表示されます。
コンタクトフォームのタイトル部分に「1件の設定エラーを検出しました」という警告マークが表示されていますね。
「メール」のタブを開いて、メール（2）の送信先を見ると「安全でないメール設定が十分な防御策なく使われている」というエラーが出ています。
クリックするとエラーの解説ページに移り、スパム対策としてreCAPTCHAが推奨されています。
このようなリスクからあなたのコンタクトフォームを保護するために、スパム対策モジュールを有効化することが強く推奨されます。この場合に最もありそうでまた最も厄介になる攻撃シナリオとはスパムボットによる大量メール送信ですから、ボットによる自動化攻撃を防ぐことに最適化された reCAPTCHA の展開が最低でも必要になります。
Contact Form 7の公式ページにエラー解説の全文があります。詳しくは以下をご参照下さい。
エラー解説 安全でないメール設定が十分な防御策なく使われている。
Contact Form 7にreCAPTCHAを設定しないまま放置すると、スパムボットが勝手にメールを大量送信して、サーバーからメール送信を停止されることがあります。
スパム対策はreCAPTCHAとAkismetの組み合わせが理想的とのことなので、プラグインは両方入れたほうがよいでしょう。
reCAPTCHA のバッジを非表示に
Googleが推奨する方法で、reCAPTCHA のバッジを非表示にしてみましょう。
reCAPTCHA v3 を導入すると、全てのページで reCAPTCHA のバッジが表示されますが、メールフォームのないページで表示されると、ちょっと気になりますよね。
PCより画面サイズが小さいスマホでバッジがあると結構目立つし、「トップに戻る」ボタンと被りやすい場所なので、関係ないページではバッジを非表示にしたいところです。
コードやCSSをいじって勝手にバッジを消すと規約違反になりますが、Googleが以下のページで非表示にする方法を公開しています。
reCAPTCHA バッジを非表示にします。どうすればよいですか？
Contact Form 7のフォームの下あたりに以下のHTMLコードを追記して、reCAPTCHA のブランドを明示すれば、バッジを非表示にできます。
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.あとはCSSに以下を追記すればOKです。
.grecaptcha-badge { visibility: hidden; }Invisible reCaptcha for WordPressの導入
reCAPTCHAを非表示にするなら、プラグイン「Invisible reCaptcha for WordPress」を使う方法もあります。
reCAPTCHA 新規登録の場合は、新たにサイトキーとシークレットキーを取得し、すでに登録済みであれば、ContactForm7 のキーを削除してからプラグインでキーを再登録します。
WordPressダッシュボードの「プラグイン」→「新規追加」に進み、「Invisible reCaptcha for WordPress」を検索してインストールしてください。
続いてダッシュボードの「設定」→「Invisible reCAPTCHA」からreCaptcha の設定を行います。先ほど取得したサイトキーとシークレットキーを貼り付けてください。
「Language」はAutomatically detect（自動検出）を選択、「Badge Position」はバッジの表示場所です。通常は右下でいいでしょう。
メールフォームの他に、コメントフォームやログイン画面を保護することもできます。設定の「WordPress」から各項目にチェックを入れるだけで有効になります。
あとは「Contact Forms」の「Enable Protection for Contact Form 7」にチェックを入れて「変更を保存」すればOKです。
これで問い合わせフォームにreCAPTCHAバッジが表示されます。
reCAPTCHAバッジの表示 / 非表示の切り替えは、プラグイン「Invisible reCaptcha for WordPress」を使うのが一番簡単です。これを使うと、問い合わせフォームやコメントフォームだけバッジを表示させて、他のページは非表示にすることができます。
reCAPTCHA のキーを再取得
reCAPTCHAの設定をContactForm7からプラグインに移行させる場合は、reCAPTCHA のサイトキーとシークレットキーを再取得してください。
次にContactForm7で登録済みのサイトキーとシークレットキーを削除してから、プラグインでキーを再登録します。
ダッシュボードの「お問い合わせ」→「インテグレーション」から、reCAPTCHA の「キーを削除」をクリックして、もう一度reCAPTCHAにログインします。
管理画面右上の歯車マーク「設定」をクリックします。
設定済みの reCAPTCHAキーを再度取得します。「reCAPTCHAのキー」をクリックするとキーが表示されるので、サイトキーとシークレットキーをコピーします。
あとは同じ手順でプラグインをインストールして、reCAPTCHA v3を導入してください。
reCAPTCHA v2からv3に移行する場合は、改めてサイトを新規登録します。管理画面右上の「＋」マークをクリックして、新しいサイトを登録してください。
reCAPTCHA v2からv3へ
GoogleのreCAPTCHAは、以前のv2と最新のv3の2種があります。
reCAPTCHA v2では、認証のために曲がったテキストを入力したり、複数の画像を選択したり、「私はロボットではありません」というチェックボックスを選択する必要がありましたが、最新のreCAPTCHA v3 はバックグラウンドで認証を行うので、これらの操作は不要になりました。
以前にreCAPTCHA v2を導入する方法を紹介しましたが、最新のContactForm7 バージョン5.1からはreCAPTCHA v3 APIを使うようになっています。
すでにreCAPTCHA v2を導入済みのサイトでは、インテグレーションに「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。v2 のキーは v3 の API では機能しません。」というメッセージが表示されます。
すでに reCAPTCHA v2 によって保護されているので、そのまま使っても問題ありませんが、手間はそれほどかからないので、この機会にreCAPTCHA v3へ移行しましょう。
以前のreCAPTCHA v2と、最新のreCAPTCHA v3では、使用するAPIキーが異なります。reCAPTCHA v2をお使いの方は、改めてサイトを登録してreCAPTCHA v3のAPIキーを入手してから、ContactForm7を設定してください。
reCAPTCHAv3設定 まとめ
WordPressのメールフォーム設置プラグインといえばContactForm7が定番ですが、何も対策しないとスパムメールが大量に送られてくるので、困っている方も多いかと思います。
ContactForm7のスパムメール対策は、今までAkismetを使うのが一般的でしたが、最近はGoogleのreCAPTCHAを推奨するようになっています。
reCAPTCHAのボット不正操作検知システムはとても優秀で、ContactForm7にreCAPTCHAを設定すると、スパムメールはほぼ100%防止できます。
reCAPTCHA v2では、メール送信者がチェックを入れたり画像を選択する等の操作が必要でしたが、reCAPTCHA v3は自動で人間かスパムボットかを判断してくれます。
reCAPTCHA v3の導入はそれほど難しくないので、ContactForm7をお使いの方はぜひ使ってみてください。
