WordPress

Contact Form 7の「画像認証」を利用して問い合わせスパム対策をする方法

なんだか最近、海外からのよく分からない問い合わせメールが増えてきたなと思ったら画像認証を使ってみましょう。といっても、ここでご紹介するのは、いわゆる「画像認証」ではなくて、Googleの新しい画像認証?のあのチェックを入れるだけの便利なやつです。

こちらの方が一般的な画像認証よりも精度が高く利便性も高いそうなのでこちらの話をさせていただきますね。

「Contact Form 7」の画像認証タグ

実はWordPressのお問合せフォームとして有名な「Contact Form 7」には画像認証を追加するクイックタグが最初から備わっています。

この「reCAPTCHA」というのが上の画像認証を挿入するボタンです。さっそく使ってみたいところなのですが、設定をしていないと下記のようなウィンドウが開いてしまってタグが入力できません。

実は、「reCAPTCHA」というのはGoogleの画像認証サービスなので登録が必要になります。下記でその手順について見ていきましょう。(※ここではGoogleのアカウントを持っている前提でお話しています。アカウントをお持ちでない方は、はじめにアカウントを登録してください。)

まず、これから何をするかを理解していただくためにWordPressの管理画面「お問い合わせ」>「インテグレーション」に移動してみてください。

「キーを設定する」をクリックすると、「サイトキー」と「シークレットキー」を入力する項目が出てきます。この2つのキーを入手して「reCAPTCHA」を使えるようにすることがここでの目的です。

GoogleのreCAPTCHA管理者ページに自分のサイトを登録する

「reCAPTCHA 管理ページ」へアクセスします。

英語表記になっていますが、上記の内容の通りに入力してもらえれば問題ありません。

  1. Label:ラベルなので分かりやすくサイト名を記入しましょう。
  2. Choose the type of reCAPTCHA:推奨は、一番上の「reCAPTCHA V2」です。
  3. Domains:サイトのドメインを入力します。サイトURLではないので気をつけて下さい。
  4. 「Accept the reCAPTCHA Terms of Service.」にチェックを入れます。
  5. 最後に「Register」をクリックで登録します。

サイトの登録をすると、上記のように「サイトキー」と「シークレットキー」が表示されます。

「サイトキー」と「シークレットキー」の設定

WordPressの管理画面「お問い合わせ」>「インテグレーション」に移動します。

「キーを設定する」をクリックして先ほどの「サイトキー」と「シークレットキー」を入力して「保存」で設定完了です。

以上の手順で、問い合わせフォームの「reCAPTCHA」が使えるようになります。ちなみに、タグを単純に入れるだけだと左に寄ってしまうので、下記のようにタグを入れると、中央寄せができますよ。

<div style="width:304px;margin:0 auto;">[recaptcha]</div>

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP