スパム問合せが増えてきたら、GoogleのreCAPTCHAを導入してみよう

ここ数週間の間に、ゆうそうとの問合せフォームから英文のスパムメールが多く届くようになってしまいました。中にはクリックすると危険そうなurlが載っていたりするのもいやですが、なにより「お問い合わせだ(^^)/」と思って開けたらスパムだったということになるとちょっとがっかりしてしまいます。
ということで、お問合せフォームに「私はロボットではありません」のreCAPTCHAを付けてみました。その方法について書きます。

Contact Form 7 にreCAPTCHAを付ける方法は?

使っているお問い合わせプラグインは「Contact Form 7」です。このプラグインにはもともと、reCAPTCHAを入れることのできる仕組みになっています。

ダッシュボード お問い合わせ をクリックすると、サブメニューにインテグレーションというものがありますので、クリックします。

すると、このような画面が表示されます。CAPCHAがGoogleが提供しているものだということと、reCAPTCHAを利用するにはAPIキーペアの設定が必要、ということがわかりました。

GoogleでreCAPTCHAのAPIキーペアを取得する

Googleにログイン状態にしておきます。

先ほどの画面の、google.com/recapcha/をクリック

ミーアキャット!が見守る、ページに移動します。

右上にある My reCAPTCHA をクリック

この入力画面が表示されます。

まず、reCAPTCHA v2 にチェックを入れます。自動的にCheckboxにチェックが入ります(入らない場合はチェックします)

Domainsの欄に、使いたいホームページのドメイン名を入力します。複数のドメインを指定したい場合は改行して入力します。
Accept the reCAPTCHA Terms of Service.Send alerts to tonersにチェックを入れてRegisterをクリック

すると、このように画面が遷移して、Site keySecret keyが表示され、GoogleでのreCAPTCHAのAPIキーペアを取得することができました。

reCAPTCHAのAPIキーペアを設定する

次にWordPressで、

ダッシュボード お問い合わせ>インテグレーションをクリック

キーを設定するをクリックします。

入力画面が表示されるので、

サイトキーに先ほどの画面からコピーしたSite keyを、シークレットキーに同じくSecret keyを貼り付けます。

保存をクリックします。これで、Contact Form 7reCAPTCHAが使えるようになりました。

フォームにreCAPTCHAを挿入する

ダッシュボード お問い合わせ>コンタクトフォームをクリックし、

reCAPTCHAを追加したいフォームの編集をクリック

送信の上をクリックして入力できるようにしてから、

reCAPTCHAをクリック

タグを挿入をクリック

送信の前にreCAPTCHAのタグが入りました。

保存をクリック。これで、お問い合わせフォームにreCAPTCHAを表示する設定が終わりました。

お問い合わせフォームにreCAPTCHAが表示されるかどうかを確認する

お問い合わせフォームを表示します。

このように送信ボタンの前にreCAPTCHAが表示されました。

動作を確認してみます。

項目に入力後、reCAPTCHAにチェックをせずに送信をクリックします。

すると、このようにあなたがロボットでないことを証明して下さいというメッセージがreCAPTCHAに、送信ボタンの下にメッセージの送信に失敗しました。後でまたお試し下さい。というメッセージが表示されました。reCAPTCHAにチェックを入れない状態ではメッセージを送ることができません。

reCAPTCHAにチェックを入れて、送信をクリックすると

ありがとうございます。メッセージは送信されました。という表示になり、メッセージは送信されました。

まとめ:GoogleのreCAPTCHAは一度設定しておけば簡単に使える

GoogleのreCAPTCHAは一度設定しておけば簡単に使うことができました。また、複数のドメインを後からでも指定できるので、1つの設定で別のドメインのフォームにもreCAPTCHA付きのお問い合わせフォームを作ることができ、便利だと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

コメント

  1. toshitoshi12 より:

    とてもわかりやすく参考になりました。ありがとうございます。

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。