【WordPress】メールフォームにreCAPTCHAを追加する

こちらの記事はv2の案内です。
reCAPTCHAはv3がほぼほぼ主流という感じで、現在記事精査中ですが間に合っていません。

v3での実装を検討されている方はこちらの記事を参照してみてください

自作の問い合わせフォームにreCAPTCHAを設定する方法｜BringFlower

スパム対策にreCAPTCHAを導入します

連日の猛暑に溶けかけているヨリアログ（@yorealog）です。もう死にそうです……←大袈裟

先日、WordPressにおいて「プラグインなしでメールフォームを追加する」というカスタマイズを実施いたしました。

スパムメール？が来るように

少し様子を見ておりましたところ、URLを数件並べただけの英語メールが届くように。

スパムBOTかしら(n’ω’`)？

と思いましたので、いつも通りGoogle先生にうかがってみると「Contact form 7」にスパム対策をほどこすという内容の記事がたくさん出てきました。ワタクシも以前は導入していたのですが……現在、メールフォームはプラグインなしで運用しております。設置したてホヤホヤ。

reCAPTCHAの導入手順

そのホカホカのメールフォームにスパム対策を実施してみます。参考にした記事はコチラ

フォームに reCAPTCHA を導入しよう | 2017春合宿 | ハンズオン | a-blog cms developer

Googleのサービスに「reCAPTCHA」というスパム対策ツールがあるそうで。これはロボットなのか人間なのかを簡単な方法で判別するというものですね。「わたしはロボットではありません」というメッセージとチェックボックス。よく見かけます。

本当はGoogleサービスのメールフォームに切り替えようかと検討していたのですが、こちらを実装した方が簡単かつ手っ取り早いイメージがしましたので試してみたいと思います。

ではさっそく下記リンクからreCAPTCHAツールを入手しましょう。なお、取得するためにはGoogleアカウントへのログインが必要になるかと思われます。

reCAPTCHA: Easy on Humans, Hard on Bots

トップページに「Get reCAPTCHA」と書かれているボタンリンクがあります。

私のときはこのような画面だったのですが。

赤い枠で囲ってある部分をクリックします。

赤枠で囲ってある部分を入力していきます。

• Label：自分で分かりやすい名前を
• Choose the type of reCAPTCHA：一番上をクリック
• Domains：reCAPTCHAを用いるウェブサイトのドメイン（http(s)://以降）を入力
• Accept the reCAPTCHA Terms of Service.：おそらく利用規約。チェックを入れます

ここまで埋めたら右下の「Register」に進みましょう。

• Site Key
• Secret Key

が出力されます。後ほどコピー＆ペーストで使いますのでそのままに。

reCAPTCHAの設置コードを追加

head要素内にコードを追加

reCAPTCHAで使うjavaScriptを読み込ませるコードにつきましては、こちらのページにテンプレートのようなものがあります。

reCAPTCHA V2  |  reCAPTCHA  |  Google Developers

遅延読み込み処理を入れているので、header.phpに貼り付けてOKです。

はじめに紹介したページに記載のコードを参照した方が手軽で良いかも知れません。私はfooter.phpにある＜/body＞タグの手前にコードを貼りました。

テンプレートにコードを追加

設置作業に移りましょう。

Site Key・Secret Keyが出力されているページの真ん中あたりにreCAPTCHAを実行させるための設置コードがあります。div云々という記述のタグを設置したい箇所に貼ります。data-sitekey=“に続く部分は、先ほどの出力された「Site key」を入力してください。

設置する場所ですが、メールフォームでしたら「送信」ボタンの手前あたりでしょうか。WordPressプラグイン「Contact Form 7」をご利用の方はもっと簡単に追加できるようですね。

コードを追加したら設置は完了です。該当のテーマファイルを変更したものへと更新します。

動作テスト

reCAPTCHAが問題なく動くかを確認します。

うまく実装できるかな？と不安でしたが上手くいった模様…！

reCAPTCHAを設置してから、妙なメールも来なくなりました(´ω`)♪

コピー＆ペーストでさっくり導入できますから、スパムに困ったらまずやってみる手段ということでオススメします。