ブログの問い合わせフォームからスパムを防止!reCAPTCHAの導入方法

更新日:

問い合わせフォームから問い合わせをもらう時に、気をつけたいのがスパム攻撃。

今までのスパム対策としては、画像に表示されている文字や数字を入力する方式の画像キャプチャ認証でした。

今回は、Googleのサービスとして、新しいキャプチャ認証「reCAPTCHA」を、

WordPressを使っているブログの問い合わせフォームに導入する方法を紹介します。

reCAPTCHAを導入するための条件はこちら

  • Googleアカウントを持っていること。
  • WordPressのブログを利用していること。
  • WordPressプラグイン「Contact Form 7」(バージョン4.3以降)をインストールしていること。

スポンサーリンク

reCAPTCHAへ登録しよう

reCAPTCHAに登録するためには、Googleアカウントが必要です。

持っていない場合は、まずはGoogleアカウントを取得しましょう。

 

reCAPTHCHA登録ページはこちら

(新しいページで開きます。)

Googleアカウントを持っている場合は、ログイン画面が表示されますので、ログインしてください。

 

すると、reCAPTCHAのTOPページに変わります。

recaptcha1

右上の青ボタン「Get reCAPTCHA」からアクセスして、
登録ページの中にある、下記の入力欄に、reCAPTCHAを導入したいブログの情報を入力していきます。

recaptcha2

Label : ブログのタイトルなどを入れましょう。

Domains : ブログのドメイン名を入れましょう。

入力したら、右下の「Register」ボタンを押します。

 

すると、このような横文字だらけの画面が表示されて、
ボクなんかドギマギしてしまいますが、

recaptcha3

今回の導入目的をおさらいすると、
WordPressブログで、 Contact Form 7のプラグインで作った問い合わせフォームに、 reCAPTCHAを使いたい!!

だから、今回はこのハイライト部分の「Site key」と「Secret key」のみを使います!

この2つのkeyをメモ帳などにコピーしたら、ログアウトしてください。

 

いざ、reCAPTCHA導入へ

Contact Form 7はインストールしてますか?

WordPressプラグイン「Contact Form 7」の問い合わせフォームはもう用意できていますか?

PCとスマホに対応したテーブルデザインの問い合わせフォームを作ってみましたので、よかったら使ってみてね。

ブログの問い合わせフォームがCOOLになるよ!

wordpressの問い合わせフォームをCSSカスタマイズしよう!AFFINGER流

「Contact Form 7」は、wordpressブログに欠かせない問い合わせメールフォームが作れるwordpress用のプラグインである。 今回はテーマにAFFINGER4を使っている方をメイン ...

続きを見る

 

reCAPTCHAとの紐付け

さて、あなたのブログのWordPress管理画面を開きましょう。

Contact Form 7のプラグインをwordpressにインストールしていれば、
左メニューに「お問い合わせ」メニューが追加されていることでしょう。

 

recaptcha4

この「インテグレーション」から、reCAPTCHAとの紐付けをしていきます。

 

「ちょっと待って!メニューにこのインテグレーションがないっ!!」
慌てないでください。
Contact Form 7に、reCAPTCHAが導入できるようになったのは、
バージョン4.3 以降からなのです。
それ以前のバージョンを使っていたら、4.3 以降のものを再インストールしてね。

 

もうひとつ厄介なことが・・・
バージョン4.4以降では、インストールしただけでは日本語化されていないのです。
だから、わざわざ自分で日本語化しないといけません。
こちらに、日本語化する手順を載せていますので参考に!

『Contact Form 7』を日本語になってない?日本語化する手順

(新しいページで開きます。)

 

 

インテグレーションを選択すると、他のサービスとのインテグレーション画面となるので、
「キーを設定する」を選択します。

 

recaptcha5

さあ、いよいよreCAPTCHAを登録して取得した、

「Site key」と「Secret key」を使うときが来ましたよ!

recaptcha6

サイトキーには、「Site key」

シークレットキーには、「Secret key」

を貼り付けて、「保存」ボタンを押してください。

 

設定を保存しました。と出れば紐付け完了です。

 

いよいよreCAPTCHAの導入へ

「新規追加」で新しい問い合わせフォームを作りましょう。

recaptcha7

 

フォーム編集画面内で、reCAPTCHAタグを挿入したい箇所を選択して、
reCAPTCHAボタンを押します。

 

recaptcha8

 

すると、以下の画面が表示されます。

とくにこだわりの設定がなければ、そのまま「タグを挿入」ボタンを押してください。

recaptcha9

これで、[recaptcha]タグが挿入され、導入完了です。

 

recaptcha10

 

問い合わせフォーム画面の送信ボタンの上に、
「私はロボットではありません」のキャプチャ認証が出ていたら、

お疲れ様でした、成功です。

 

recaptcha11

 

 

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

スポンサーリンク

  • この記事を書いた人
  • 最新記事

-ピアスを売りたい!, ブログ運営(WordPress)
-, ,

Copyright© ピアスマップ , 2018 All Rights Reserved.