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

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

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

特に海外から。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

各項目の説明ですが、

①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」にチェックでいいと思います。

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

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

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

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

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

サイズ：ノーマル
テーマ：明るい

サイズ：ノーマル
テーマ：暗い

サイズ：コンパクト
テーマ：明るい

サイズ：コンパクト
テーマ：暗い

あとがき

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

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

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

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

そして決め手は・・・

「カッコイイ」

これでした。