Contact form 7 に reCAPTCHA を付けてスパム防止

WordPressにお問い合わせフォームを設置できる超有名プラグイン「Contact form 7」。

とても便利ですが、デフォルトで設置したままだと謎のスパムメールがたまに来ちゃいますよね。

特に海外から。

Contact form 7の最近のバージョンでは、スパムメールを防止するのにGoogleでおなじみのあのreCAPTCHAを付けることができます。

reCAPTCHAを付けるとスパム防止になるだけでなく、フォーム自体もスタイリッシュでかっこよくなる気がするのでそのやり方を解説したいと思います。

Contact form 7がインストール＆有効化されていることが前提条件です。

またの方はプラグイン新規追加の検索窓より「Contact form 7」と検索すると出てきますので、予めインストール＆有効化しておいてください。

Contact form 7にreCAPTCHAを設置するまでの流れ


おおなまかな流れとしては以下のような感じです。

  1. GoogleでreCAPTCHAを使うサイトを登録してキーを取得
  2. 取得したキーをContact form 7に設定する
  3. お問い合わせフォームにreCAPTCHAを表示させる

また、reCAPTCHAを設置するにあたり、Googleアカウントが必須になります。

Googleアカウントを持っていない方は取得しておきましょう。

3ステップの流れで簡単に見えますが、実際やると地味にめんどくさかったです。

なので一度これから解説するやり方を読んで、やるかどうかは判断するといいかもですね。

ただ、設置してお問い合わせフォームがかっこよくなったので個人的にはやりがいがあり、達成感もありました。

Contact form 7にreCAPTCHAを設置する手順


それでは解説していきます。

まずContact form 7が有効化されていると管理画面左のメニューに「お問い合わせ」という項目がるのでクリックします。

そうると「インテグレーション」という項目があるのでクリックしてください。

ここで「インテグレーション」がない場合、プラグインを最新版に更新してみて下さい。

Contact form 7にreCAPTCHAを設置する手順１

次の画面で右上に「google.com/recaptcha」というリンクがあるのでクリックします。

Contact form 7にreCAPTCHAを設置する手順２

Googleのサイトへ飛ぶので「My reCAPTCHA」をクリックしてください。

Contact form 7にreCAPTCHAを設置する手順３

ここでブラウザがGoogleアカウントにログイン状態じゃない場合は、ログインします。

すると以下のようなフォームが現れます。

Contact form 7にreCAPTCHAを設置する手順４

英語で一瞬戸惑いますが、基本的には以下のように設定してください。

Contact form 7にreCAPTCHAを設置する手順５

各項目の説明ですが、

  • ①Label ・・・ 任意の名前。
  • ②Choose the type of reCAPTCHA ・・・ reCAPTCHAのタイプ。一番上でOK。
  • ③Domains ・・・ reCAPTCHAを使うサイトのドメイン。
  • ④Accept the reCAPTCHA Terms of Service. ・・・ 利用規約に同意する的なチェック。

となります。

②について、2つめの「Invisible reCAPTCHA」でも動くことは動きますが、チェックを入れると以下のようなメッセージが表示されます。

You agree to explicitly inform visitors to your site that you have implemented reCAPTCHA on your site and that their use of reCAPTCHA is subject to the Google Privacy Policy and Terms of Use.

訳すと・・・

あなたは、あなたのサイトにreCAPTCHAを実装しており、reCAPTCHAの使用がGoogleのプライバシーポリシーと利用規約の対象であることをサイトに訪問者に明示的に伝えることに同意します。

サイト訪問者に伝える？
なんか注意書きをどこかに書かなくちゃいけないの？

って思いますよね。

なんだかめんどそうなので無心で1つ目の「reCAPTCHA v2」にチェックでいいと思います。

それで、フォームを送信するとめでたくサイトキーとシークレットキーが発行されます。

Contact form 7にreCAPTCHAを設置する手順６

これをWordPressの管理画面の「インテグレーション」に戻り、それぞれ入力していくわけです。

Contact form 7にreCAPTCHAを設置する手順７

入力して保存したら、フォームをいじっていきます。

Contact form 7にreCAPTCHAを設置する手順８

フォームの編集画面では丁寧に「reCAPTCHA」というボタンが用意されているのでクリックして設置しましょう。

reCAPTCHAボタンには4つのデザインが用意されていました。

Contact form 7にreCAPTCHAを設置する手順９
サイズ：ノーマル
テーマ：明るい

Contact form 7にreCAPTCHAを設置する手順１０
サイズ：ノーマル
テーマ：暗い

Contact form 7にreCAPTCHAを設置する手順１１
サイズ：コンパクト
テーマ：明るい

Contact form 7にreCAPTCHAを設置する手順１２
サイズ：コンパクト
テーマ：暗い

あとがき


やっぱり個人的には簡単に設置できますよ！とは言えず。

Googleアカウントやら、Google側にreCAPTCHAを使うサイトを設定する必要があるのが手間です。

ただ、なんだかんだ言ってこの認証システムを自力でプログラムするのはとても大変なので、ありがたいサービスですね。

それになんといってもあのGoogleですし、信頼もできますし。

そして決め手は・・・

「カッコイイ」

これでした。