【スパム対策】Contact Form 7 に reCAPTCHA v3を導入しよう！

今回はこのようなお悩みにお答えします。

ブログやサイト運営には「お問い合わせフォーム」は欠かせないものです。

「お問い合わせフォーム」といえば、プラグインとして「Contact Form 7」が定番ですが、そのままプラブインを導入しただけでは、スパムメールを防ぐことはできません。

今回は、スパム対策をするため「Contact Form 7」に、Google 「reCAPTCHA」の導入方法を解説をします。

※スパムメールとは、受信者の意向を無視して一方的に送り付けられるメールであって、迷惑メールとも呼ばれます。

このような流れで進めていきます。

今回解説する上での前準備として、

が必要となります。

「Contact Form 7」の設定方法や使い方については、次の記事で詳しく解説しています。ぜひ参考にしてみてください。

【お問い合わせフォーム】Contact Form 7 の設定方法と使い方を解説【定番プラグイン】

続きを見る

【WordPress】お問い合わせフォームの作り方【2通り】

続きを見る

それでは早速はじめていきましょう！

Google reCAPTCHA とは？

reCAPTCHA とは、Google が無料で提供しているボットと人間を区別するためのサービスです。これによって、スパムメールや不正攻撃からWebサイトを保護することができます。

よく「私はロボットではありません」と記載のあるチェックボックスにチェックを入れたり、歪んだ数字を読み取り入力した覚えはありませんでしょうか？このような識別サービスが reCAPTCHAです。

reCAPTCHA にはいくつかバージョンがあります。

最新版の「reCAPTCHA v3」の特徴とは

「reCAPTCHA v3」の機能については、次の youtube 動画にて詳しく解説されています。 (Google Search Central より)

v3 の特徴は、上記で説明したように画像認証を行ったり、「私はロボットではありません」のチェックが不要となり、訪問者の手を煩わすなく自然とセキュリティーを強化できるようになったことです。

また、v3 は Google AI がユーザーのサイト内での行動をスコアとして数値化することで、そのスコアを元にbotか人間かを判別します。さらに、「reCAPTCHA v3」を配置した各ページでのユーザーの動きを学習し、アクセスが増えるとともにスコアの精度を高めていくこともv3の特徴です。

サイトによっては、v2を採用しているところもありますが、今回は最新バージョンの「reCAPTCHA v3」 を導入して、WordPress のプラグイン「Contact Form 7」に実装する方法をご紹介します。

reCAPTCHA のバージョン

2022年5月現在、reCAPTCHA にはバージョンが3つあります。

reCAPTCHA v1 (現在使用不可)

reCAPTCHA v1は、2018年3月に提供が終了しており、現在は利用できません。

今は見る機会が無くなりましたが、上の画像のように歪んだ英数字をユーザーに入力させるものでした。

現在はAIなどを使った画像認識精度もあがってきたため、「歪んだ文字の認識も解読され」reCAPTCHA v1は破られるようになったためです。

reCAPTCHA v2

まだ見かける機会のある、reCAPTCHA です。

まず、「私はロボットではありません」というチェクボックスが表示されます。

▼
▼

そして、チェックボックスにチェックを入れた際に挙動が疑われ bot と判断された場合、画像を選択するアクションが求められます。この画像のチェックが煩わしく、ユーザビリティを損なうといったデメリットがあります。

reCAPTCHA v3 (最新版)

reCAPTCHA v3は、2018年10月29日に公開され、 現役最新版の reCAPTCHA です。

reCAPTCHA v3は、ユーザーが人間か bot かどうかを判断するために、ユーザーに何らかのアクションを求めることが無くなりました。その理由は機械学習にあり、Webページ上の行動を機械的に学習することで、人間と bot のパターンを判別できるようになったからです。

そのためサイトを訪れたユーザーに煩わしい画像認証や、チェックボックスへのチェック操作などが一切不要になりました。

したがって、v3 はユーザービリティを損なうことなく bot を検知することができるので、特段理由がない限り、reCAPTCHA を導入するのであれば、reCAPTCHA v3 を導入するのがおすすめです。

reCAPTCHA 導入のメリット・デメリット

reCAPTCHA を導入する最大のメリットは、ボットからの攻撃を妨げること(スパム対策やセキュリティー強化)です。

しかし、先述したようにバージョンによってはデメリットもあります。

メリット	デメリット
✅ スパムメールを防ぐ	❌ 設定がややこしい (v1,v2)
✅ botの攻撃から守る	❌ 確認が求められる (v1,v2)
✅ 導入が簡単 (v3)	❌ ユーザビリティを損なう(v1,v2)

デメリットとして最も顕著なものは、「ユーザービリティを損なうおそれ」です。

reCAPTCHA v1,v2 の場合、訪問ユーザーにチェックボックスの有効化や画像認識を求める場合があります。

botかどうか疑わしいと判断された場合は、指定された画像を選択するアクションが必要となります。それをユーザーが煩わしく思うかどうかにより、サイトから離脱してしまう可能性が高まります。

何度も言いますが、今回紹介します v3 は、認証操作などによってユーザーの手を煩わすことなく、botを検知できます。

では続いて、reCAPTCHA v3 の導入方法について見ていきましょう！

最新版 reCAPTCHA v3 の導入方法

Google アカウントを持っていれば、無料で利用できるサービスです。

まずは、こちらにアクセスしましょう。
＞＞Google reCAPTCHA v3

❶ reCAPTCHA v3 に新規登録して キー を取得

① Google reCAPTCHA v3 にアクセスして「v3 Admin Console」をクリックする

② 次の項目を入力

③ 次の2箇所にチェックを入れ、最後に「送信」をクリック

④ 「送信」後、「サイトキー」と「シークレットキー」が発行されるので、コピーして控えておきましょう。この画面は次の設定が終わるまで開いていても構いません。

これで一先ず Google reCAPTCHA への登録は完了です。

❷ Contact Form 7 に reCAPTCHA を実装

いよいよ、お問い合わせフォームである「Contact Form 7」に reCAPTCHA を実装していきます。

① WordPressの管理画面から、「お問い合わせ」→ 「インテグレーション」　を選択

② いくつかの項目のうち、reCAPTCHA の「インテグレーションのセットアップ」をクリック

③ ❶ の手順で控えた2つのキー「サイトキー and シークレットキー」をそれぞれ下記の欄に入力して、「変更を保存」をクリック

④ サイトの画面右下に reCAPTCHA の「ロゴ」が表示されていれば OK です。

※「トップへ戻る」ボタンと重なっていて見にくい場合があります。

以上の設定で、「お問い合わせフォーム」からのスパムメールなどを排除することができます。

※ Contact Form 7 の公式サイトにも reCAPTCHA についての詳細が載せてありますので、併せてご参照ください。
＞＞ Contact Form 7 reCAPTCHA(v3) について

reCAPTCHA のロゴを非表示にする方法【Google 公認】

以下の設定は、必須事項ではありません。必要であれば行ってください。

先のように reCAPTCHA を実装するとサイト画面の右下にロゴマーク(バッジ)が表示されるようになります。PCのブラウザ表示で「TOPへ戻る」ボタンの設定をしている場合、ロゴの表示位置と完全に被ってしまいます。

これを解決するために、reCAPTCHA のバッジを Google 公認の設定の元、非表示にする方法を解説します。

非表示にするための Google 公認設定方法

reCAPTCHA を使用するからには、サイト訪問者にそれを通知する必要があるため、ロゴ(バッジ)を勝手に削除したり隠すことは Google の規約に反することになります。

しかし、Google 公認の設定方法により、次のテキストをサイトに掲載すればロゴを非表示にすることができます。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

実際に「カスタムHTML」にコードを入力するとこんな感じになります。

▼

＞＞Google reCAPTCHA サポートのFAQ はこちら

日本語ならフォーム入力のあるページに次の一文を掲載することで、ロゴを非表示にすることができます。

▼

非表示にするための CSS設定

ロゴを非表示にするためには、次の CSSコードをご利用ください。こちらも「Google reCAPTCHA サポートのFAQ」 に解説があります。

実際にこの CSSコードを「追加CSS」にコードを貼り付けて「公開」をクリックします。

※AFFINGER6 では、外観 > カスタマイズ > 追加CSS で「追加CSS」を見つけることができます。

▼

このようにして、Google reCAPTCHA のバッジを非表示にすることができました。

日本語で掲載するなら次のコードを該当ページに「カスタムHTML」で貼り付けてください。

▶︎ 参考までに「お問い合わせ」フォームに reCAPTCHA の文言を掲載してみます。

■ reCAPTCHA のプライバシーポリシーと利用規約の文言を「お問い合わせ」用の固定ページに追加する

▼

■ 「お問い合わせ」ページの確認

※その他に訪問者に目に付くところといえば、「フッター」が良いでしょう。

もう一つの方法として、ロゴを非表示にせず、ロゴの位置を修正する方法をご紹介します。

CSS設定でロゴの位置を調整する方法

上記のように、非表示にする方法を見てきましたが、非表示にはせず被さっているロゴの位置をずらし、見た目を改善する方法をご紹介します。

■ reCAPTCHA のロゴが被さっている場合

▶︎ 次のようにして、ロゴの位置をずらし「TOPへ戻る」ボタンと分離させてみましょう。

■ 「追加CSS」に次のコードを入力する

※「追加CSS」に貼り付ける方法は先ほどと同じです。

※コード内の数字を増やすと、さらに上へと移動させることができるので、お好みに合わせて調整しましょう。

■ 表示の確認

まとめ：reCAPTCHA v3 を導入してサイトを保護しよう！

本記事では、お問い合わせフォームのプラグインである「Contact Form 7」を利用している方向けに、スパムメール対策として Google reCAPTCHA v3 の導入と実装方法を解説しました。

このようなランナップでした。

「お問い合わせフォーム」はサイトやブログを運営する上では、欠かすことのできない WordPress に設置すべき一つの項目です。

「お問い合わせ」のような外部から入力させる欄を設けておくと、どうしてもスパムやハッキングなどの攻撃でサイトを踏み台にされてしまいます。またこれを放置しておくと知らずのうちに不正に加担することにもなりかねません。

そのために、今回ご紹介した Google reCAPTCHA を Contact Form 7 に実装してそのような事態を免れることができます。セキュリティーを強化するための一つのツールとして思って良いでしょう。

reCAPTCHA のロゴの非表示についても、CSSコードの貼り付けで簡単に調整することができます。

スパムメールが来る前に早急に対策を講じて、安全なサイト運営を行いましょう！

今回は以上となります。