問い合わせフォームを簡単に作成できるWordPressプラグイン「ContactForm7」のスパムメール対策として、GoogleのreCAPTCHA v2を導入してみました。
※ 最新のContactForm7 バージョン5.1から、reCAPTCHA v3 APIを使うようになりました。この記事は旧バージョンのreCAPTCHA v2に関する解説なので、以下の記事を参照して最新のreCAPTCHA v3を導入してください。
reCAPTCHA v2にはいくつか種類がありますが、サイト訪問者が手動でチェックを入れる「私はロボットではありません」チェックボックスか、操作不要で目立たない「非表示reCAPTCHAバッジ」を使えばよいでしょう。非表示reCAPTCHAバッジにはスパムコメントを防止する機能や、ログイン画面保護機能もあります。
「私はロボットではありません」チェックボックスはContactForm7上で設定できるのでプラグイン不要ですが、非表示reCAPTCHAバッジはプラグイン「Invisible reCaptcha for WordPress」を使って導入します。
reCAPTHCAアカウント登録
では、ContactForm7にGoogleのreCAPTCHAを導入してみましょう。まずはプラグイン不要で手動チェックを行うタイプの「私はロボットではありません」チェックボックス設定方法を解説します。
ダッシュボードから「お問い合わせ」→「インテグレーション」に進むと、reCAPTCHAを導入することができます。まずはreCAPTCHA用のAPI キーを取得するために、右上のリンクからGoogle「reCAPTCHA」へアクセスします。
reCAPTCHA設定 google.com/recaptcha/
右上の「My reCAPTCHA」をクリックします。
reCAPTCHAを導入するサイトに関連したGoogleアカウントでログインしてください。Googleアカウントがない場合は、「アカウントを作成」で新規作成します。
GoogleのreCAPTCHA設定ページです。ここに必要項目を入力していきます。
reCAPTHCA 「私はロボットではありません」チェックボックスの導入
では、「私はロボットではありません」チェックボックスのreCAPTCHAを導入しましょう。
ラベル： 設置するサイトの名前等を入力すればOKです。
reCAPTCHAタイプ： 「私はロボットではありません」チェックボックスを選択します。
ドメイン： reCAPTCHAを設置するサイトのドメインを入力します。http:// や https:// 、下層のディレクトリ等は入力不要です。
あとは「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」をクリックします。「アラートをオーナーに送信する」は任意なので、どちらでも構いません。
「サイトキー」と「シークレットキー」をコピーしてください。この2つのAPIキーを入力すると、ContactForm7でreCAPTHCAが使えるようになります。
ContactForm7 APIキー入力
もう一度ダッシュボードから「お問い合わせ」→「インテグレーション」に進み、「キーを設定する」をクリックします。
さきほどコピーしたサイトキーとシークレットキーを入力して「保存」をクリックします。
「設定を保存しました。」と表示されたらOKです。
ContactForm7 reCAPTHCA設置
これで準備が整ったので、メールフォームにreCAPTHCAを設置してみましょう。「お問い合わせ」→ メールフォーム名をクリックします。
フォームテンプレートの編集から、reCAPTCHAを設置したい場所にカーソルを移動させて、「reCAPTCHA」ボタンをクリックします。
reCAPTCHAのサイズやテーマを選択できます。CSSでデザインを調整する場合は「ID属性」「クラス属性」を入力して「タグを挿入」をクリックします。
または[recaptcha]をコピーして、フォームの好きな場所に貼り付けてもOKです。
フォームに[recaptcha]のタグが挿入されました。「保存」をクリックします。
メールフォームのreCAPTCHA動作
フォームを設置したページを見ると、ちゃんとreCAPTCHAが追加されてますね。
reCAPTCHAにチェックを入れないと「あなたがロボットではないことを証明してください。」と表示されてメールの送信ができません。
一度目のメール送信はreCAPTCHAをチェックすればOKですが、短期間で何度も送信すると、セキュリティ対策として確認用画像が表示されるようになります。
これでボットからのスパムメールはほぼ100%ブロックすることができます。
ただ、reCAPTCHAの「私はロボットではありません」というチェックや、突然表示される画像選択に違和感を感じる方もいるようで、reCAPTCHAの設置が好まれない場合もあります。
そんな時は操作不要で目立たない別タイプの「非表示reCAPTCHAバッジ」を導入します。
Invisible reCaptcha for WordPressの導入
「非表示reCAPTCHAバッジ」のreCAPTCHAは、プラグイン「Invisible reCaptcha for WordPress」を使って導入します。Checkタイプの時と同様に、Google「reCAPTCHA」にログインして、非表示reCAPTCHAバッジ用のAPIキーを取得してください。
reCAPTCHAの設定は「私はロボットではありません」チェックボックスの時と同様です。「reCAPTCHAタイプ」は「非表示reCAPTCHAバッジ」を選択して、「送信」をクリックします。
表示されたサイトキーとシークレットキーをコピーしてください。
続いて「Invisible reCaptcha for WordPress」をインストールします。「プラグインを追加」から検索してインストールしてください。
次に、ダッシュボードの「設定」→「Invisible reCAPTCHA」で、Invisible reCaptcha の設定を行います。先ほどコピーしたサイトキーとシークレットキーを貼り付けます。
「Language」は日本語を選択、「Badge Position」はデフォルトの右下でいいでしょう。「Badge Position」をInlineにすると、送信ボタンの下に表示されます。最後に「変更を保存」をクリックします。
あとは「Contact Forms」から「Enable Protection for Contact Form 7」にチェックを入れて「変更を保存」すればOKです。
メールフォームを見ると、reCAPTCHAバッヂは隅に小さく表示されて目立たないし、チェック等も必要ないので違和感はないですね。
あとは好みに応じてreCAPTCHAの設置場所を変更してください。
ContactForm7 reCAPTCHA導入まとめ
reCAPTCHAのボット不正操作検知システムはとても優秀で、ContactForm7にreCAPTCHAを設定すると、スパムメールはほぼ100%防止できます。
また、非表示reCAPTCHAバッジはコメントフォームの保護や、ログイン画面の保護機能もあり、設定の「WordPress」から各項目にチェックを入れるだけで有効になります。
コメントフォーム保護にチェックすると、スパムコメント対策プラグインのAkismetは不要になります。実際にreCAPTCHAを導入したサイトでは、Akismetを外しました。
ContactForm7にreCAPTCHAを導入するなら、サイト訪問者の操作が不要で違和感もなく、スパムコメントも防止できる「非表示reCAPTCHAバッジ」をオススメします。
ContactForm7の関連記事です。よかったらこちらもどうぞ・・・
他の reCAPTCHA 導入方法や使い方は、以下でも紹介しています。
