お問い合わせフォームにreCAPTCHAを導入してスパム対策するやり方

ブログ

どうも、こんにちは!

ブログに問い合わせフォームを設置しているのですが、外国から宣伝目的の問い合わせがくるようになりました!

「いわゆる迷惑なスパムメールってやつだ!!!」

頻繁にスパム行為があると困るので、Googleの「reCAPTCHA」という技術を利用してスパム対策してみたいと思います!

reCAPTCHAは、みなさんも見たことあるのではないかと思います。

これのことです!

当サイトでは問い合わせフォームは、プラグイン「Contact Form 7」を利用しています。

今回はこの「Contact Form 7」に「reCAPTCHA」を導入する手順の説明になります。

それでは早速導入していきたいと思います!

reCAPTCHを導入までの手順

まずはじめに、reCAPTCHを導入するまでの手順を簡単に説明しておきたいと思います!

GoogleのreCAPTCHAページからサイトを登録する。

②WordPressのContact Form 7(インテグレーション)にreCAPTCHAのキーを設定する。

③お問い合わせフォームにreCAPTCHの部品を配置する!

思ったより簡単に導入できますよ!

reCAPTCHにサイトを登録する

まずはじめに、GoogleのreCAPTCHAページに行きます。

 

右上の「My reCAPTCHA」を選択します。

 

Googleのアカウントにログインしていない場合は、ログイン処理を実行します。

 

reCAPTCHAに、サイトを登録する画面が出てきます。

次の項目を入力および選択して登録処理を行います。

設定ができたら右下の「Register」を選択して登録します。

設定項目の説明

①Label

これから作成する「reCAPTCHA」の名前を入力します。

ドメイン名やサイト名など付けてあげると良いと思います。

②Choose the type of reCAPTCHA

reCAPTCHAのタイプを選択します。

今回は、reCAPTCHA v2 の「Checkbox」タイプにしたいと思います。

※本当は、reCAPTCHA v3が良かったのですが上手くいきませんでしたw

③Domains

reCAPTCHAを導入したいサイトのドメインを入力します。

1行に1ドメイン登録できるようです。

④Accept the reCAPTCHA Terms of Service.

reCAPTCHA利用規約に同意するかのチェックになります。

利用規約の同意について確認し、チェックを入れましょう。

チェックを入れてreCAPTCHA利用規約に同意します。

⑤Send alerts to owners

何か問題を検出した時にお知らせするかの確認のチェックになります。

通知がほしい方はチェックを入れましょう。

 

設定ができたら「Register」を選択してサイトの登録を行います。

 

サイトの登録ができたらContactForm7(お問い合わせフォーム)に設定する「Site Key」と「Secret Key」をコピーしておきます!

 

お問い合わせ(ContactForm7)にAPIキーを設定する

 

「reCAPTCHA」のAPIキーをContactForm7(お問い合わせ)に登録する作業をしていきます!

 

WordPressのダッシュボードを開きます。

お問い合わせ→インテグレーションを選択します。

 

「キーを設定する」を選択します。

 

前の手順でコピーした「サイトキー」「シークレットキー」を入力します。

「保存」を選択します。

 

これでContactForm7(お問い合わせフォーム)に「サイトキー」と「シークレットキー」の登録ができました。

お問い合わせフォームにreCAPTCHAを配置する

最後にお問い合わせフォームにreCAPTCHAの部品(私はロボットではありません)を配置してあげます。

 

コンタクトフォームの編集画面を開きます!

今回は「送信」ボタンの上に「reCAPTCHA」を配置したいので、送信ボタンの上にカーソルを合わせておきます!

 

上部のボタンの中に「reCAPTCHA」があるので選択します。

 

「reCAPTCHA」のタグ生成画面が表示されるので「サイズ」や「テーマ」を選択して「タグを挿入」を選択します。

 

「reCAPTCHA」のタグがテキストエリアに入力されます!

「保存」ボタンを押して設定完了です!

 

reCAPTCHAの動作確認を行う

それでは早速、お問い合わせフォームに導入した「reCAPTCHA」が正常に表示されるか確認してみたいと思います!

 

おおー!しっかり「reCAPTCHA」が導入されました!

 

そして「reCAPTCHA」によるお問い合わせ処理も正常に動作するのか確認していきます。

 

 

チェックを入れる前は、こんな感じで表示されます!

チェックを入れてロボットではないことを証明します。

 

ロボットでないことが証明されました!

 

「reCAPTCHA」にチェックを入れた後に、[送信]ボタンを押して問い合わせ処理をしてみましたが、

問題なく正常に動作することが確認できました。

 

ちなみに「reCAPTCHA」にチェックを入れて何もしないで時間が経つとタイムアウトします。

この場合は、再びチェックをいれて証明の確認をすることになります。

 

その他に「reCAPTCHA」にチェックをいれないで「送信」ボタンを押すと、

「あなたがロボットでないことを証明してください。」と表示されて送信処理に進むことができません!

 

そして「reCAPTCHA」に怪しい認定されると、こんな風にロボットかどうかテストされます!

こうなったら「reCAPTCHA」の問いに正しく回答しないといけません!

 

このテスト結構繰り返し試されることがあって人間がやっても大変な時がありますw

 

正しい確認ができれば通常通りロボットでないことが証明されます。

 

まとめ

今回はお問い合わせフォーム(Contact Form 7)に「reCAPTCHA」を導入するやり方を説明しました。

「reCAPTCHA」を導入したことで、迷惑な問い合わせの数が減るのではないかと思います!

最後に「reCAPTCHA」導入までの手順を簡単におさらいします。

GoogleのreCAPTCHA ページからサイトを登録する。

②WordPressのContact Form 7(インテグレーション)にreCAPTCHAのキーを設定する。

③お問い合わせフォームにreCAPTCHの部品を配置する!

難しそうな感じがしましたが結構簡単に導入することができました!

迷惑な問い合わせやスパムメールが届いて困っている人は、ぜひ「reCAPTCH」導入してみてください!

コメント