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を使うようになっています。
以前のreCAPTCHA v2と、最新のreCAPTCHA v3では、使用するAPIキーが異なります。reCAPTCHA v2をお使いの方は、改めてサイトを登録してreCAPTCHA v3のAPIキーを入手してから、ContactForm7を設定してください。
ContactForm7 インテグレーションのメッセージ
ContactForm7をインストールすると、ダッシュボードのメニューに「インテグレーション」が追加されます。ここからreCAPTCHA v3のセットアップが行えます。
すでにreCAPTCHAを使用しているサイトでは、インテグレーションに「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。v2 のキーは v3 の API では機能しません。」というメッセージが表示されます。
すでに reCAPTCHA v2 によって保護されているので、そのまま使っても問題ありませんが、手間はそれほどかからないので、この機会にreCAPTCHA v3へ移行しましょう。
reCAPTCHA サイトキーとシークレットキー取得
では、ContactForm7にreCAPTCHA v3を導入してみましょう。まずはreCAPTCHAに新規登録する場合のサイトキーとシークレットキー取得方法を説明します。
ダッシュボードの「お問い合わせ」→「インテグレーション」から、「インテグレーションのセットアップ」をクリックします。
キーの入力欄右上のURLをクリックして、Google reCAPTCHAに進みます。キーを取得した後にまたWordPressへ戻るので、URLをクリックするときは新しいタブで開くと便利です。
右上の「Admin console」からreCAPTCHAにログインします。
Googleアカウントを所有していない場合は、「アカウントを作成」から新規作成してください。
ここで新しいサイトを登録して、reCAPTCHAのサイトキーとシークレットキーを取得します。
ラベル： 設置するサイトの名前等を入力します。
reCAPTCHAタイプ： reCAPTCHA v3を選択します。
ドメイン： reCAPTCHAを設置するサイトのドメインを入力します。http:// や https:// 、下層のディレクトリ等は入力不要です。
あとは「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」をクリックします。「アラートをオーナーに送信する」は任意なので、通知が必要であればチェックしてください。
「サイトキー」と「シークレットキー」をメモ帳等にコピペしてから「設定に移動」をクリックします。この2つのAPIキーを入力するとreCAPTHCAが使えるようになります。
もう一度設定に戻って、reCAPTHCA保護対象のページ（問い合わせフォームやコメントフォーム）がAMPページの場合は、「このキーが AMP ページで動作するようにする」にチェックを入れて「保存」してください。
AMPページの項目は、なぜか最初のサイト登録の時には表示されず、登録が済んでからチェックできるようになっています。AMP対応サイトの場合は注意してください。
ContactForm7でreCAPTCHA設定
もう一度ContactForm7に戻って、サイトキーとシークレットキーを入力します。reCAPTCHAとContactForm7のタブを両方開いておくと、作業しやすくなりますよ。
「変更を保存」をクリックすると、ContactForm7の設定は無事終了です。
問い合わせフォームを確認してみると、サイトの右下にちゃんとreCAPTCHAのマークが表示されています。
テスト送信でも問題はなく、reCAPTCHAは機能しています。
reCAPTCHA のバッジを非表示に
ContactForm7の機能を使って reCAPTCHA v3 を導入すると、全てのページで reCAPTCHA のバッジが表示されます。バッジは右下の隅の方にあるので目立ちませんが、保護する必要がないページで表示されると、ちょっと気になりますよね。
PCより画面サイズが小さいスマホでバッジがあると結構目立つし、「トップに戻る」ボタンと被りやすい場所なので、関係ないページではバッジを非表示にしたいところです。
コードや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」から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に移行する場合は、改めてサイトを新規登録します。管理画面右上の「＋」マークをクリックして、新しいサイトを登録してください。
ContactForm7のreCAPTCHA v3導入まとめ
WordPressのメールフォーム設置プラグインといえばContactForm7が定番ですが、何も対策しないとスパムメールが大量に送られてくるので、困っている方も多いかと思います。
ContactForm7のスパムメール対策は、今までAkismetを使うのが一般的でしたが、最近はGoogleのreCAPTCHAを推奨するようになっています。
reCAPTCHA v2では、メール送信者がチェックを入れたり画像を選択する等の操作が必要でしたが、reCAPTCHA v3は自動で人間かスパムボットかを判断してくれます。
reCAPTCHA v3の導入はそれほど難しくないので、ContactForm7をお使いの方はぜひ使ってみてください。
他の reCAPTCHA 導入方法や使い方は、以下でも紹介しています。
