reCAPTCHA v3の導入とContact Form 7の設定方法

パソコンを操作する女性 ブログ

こんにちは、ikuzo(いくぞう)です。

先日、エックスサーバーからこんなメールが届きました。

エックスサーバーから届いた注意喚起のメール

内容としては「2021年12月頃からWordPressのメールフォーム(問い合わせフォーム)を悪用してスパムメールの配信行為が急増している」とのことでした。

 

対策ですが

WordPressやプラグインを最新版にアップデート

メールフォーム(問い合わせフォーム)に“reCAPTCHA v3”を導入

以上の2つをして下さいとのことです。

今回は“reCAPTCHA v3”を導入されていない方のために、“reCAPTCHA v3”の設定方法についてまとめてみました。

スポンサーリンク

Google reCAPTCHA v3の導入方法

reCAPTCHAは“v1”から始まり、現在は2018年に公開された“v3”が最新版です。

自分のGoogleアカウントを使って、Google reCAPTCHAにログインしましょう。

>>Google reCAPTCHA

v3 Admin Console”をクリックします。

ログイン後、“v3 Admin Console”をクリック

設定項目を以下のように入力します。

Google reCAPTCHAの必要項目を入力

reCAPTCHAの設定項目

 ラベル(ドメインなどを入力
 reCAPTCHA タイプ(“v3”を選択)
 ドメイン(ブログのドメインを入力)
 オーナー(アカウントに登録しているアドレスが表示される)
 下の2つはそれぞれチェックを入れる

入力が完了したら「送信」を押すと「サイトキー」および「シークレットキー」が表示されます。

reCAPTCHAの「サイトキー」および「シークレットキー」

2つのキーはあとで使うので、別のタブかウィンドウでWordPressのダッシュボードを開いて下さい。

Google reCAPTCHA側はこれでひとまず終了です。次はWordPress側を設定します。

スポンサーリンク

Contact Form 7の設定方法

メールフォーム(問い合わせフォーム)は、ほとんどの方がプラグインの“Contact Form 7”をお使いだと思いますので、そちらの設定方法を説明させていただきます。

WordPressのダッシュボードの「お問い合わせ」→「インテグレーション」を押して、

reCAPTCHAの「インテグレーションのセットアップ」をクリックします。

reCAPTCHAの「インテグレーションのセットアップ」をクリック

するとサイトキーとシークレットキーの入力画面が出てくるので、さきほどの2つのキーをコピー&ペーストして「変更を保存」を押して下さい。

reCAPTCHAの「インテグレーションのセットアップ」

これでWordPress上でreCAPTCHAが有効化されました。

スポンサーリンク

reCAPTCHAバッジを非表示にする方法

reCAPTCHAが有効になった証として、画面右下に“reCAPTCHAバッジ”が表示されるようになります。

パソコンだとこんな感じで

reCAPTCHAバッジ(パソコンの画面)

スマホはこのようにバッジが表示されます。

reCAPTCHAバッジ(スマホの画面)

私はCocoonを使っていますが、ちょうどバッジが「先頭に戻る」のボタンと重なってしまうため、このバッジを表示させないようにしました。

本来は、reCAPTCHAを使うにはバッジの表示が義務付けられているんですが、reCAPTCHAの「よくある質問」を見ると

Googleが指定するテキストを含めることにより、バッジを非表示にしてもよいという許可が出ています。

reCAPTCHAバッジを非表示にするにはreCAPTCHA「よくある質問」より

私と同じようにバッジを表示させたくない方は、次の手順で設定して下さい。

reCAPTCHAバッジを非表示にするCSS

「よくある質問」に記載されているreCAPTCHAバッジを非表示にするCSSがこちらです。

.grecaptcha-badge { visibility: hidden; }

このCSSを、WordPressテーマのスタイルシートに貼り付けます。

「外観」→「テーマエディター」を選択して

「外観」→「テーマエディター」を選択

CSSを貼り付けて「ファイルを更新」を押します。

スタイルシートに貼り付けたreCAPTCHAバッジを非表示にするCSS

これでバッジが消えているかどうかを確認してみて下さい。

reCAPTCHAバッジが消えたスマホの画面

Google指定のテキストをメールフォームに含める

そして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.

Googleが指定しているテキストをメールフォームの「送信」の下へ貼り付け

するとこのようにメールフォーム(問い合わせフォーム)の「送信」の下に

このサイトはreCAPTCHAとGoogleによって保護されています」というメッセージが表示されるようになります。

メールフォームに表示されているreCAPTCHAのメッセージ

これで設定はすべて完了です。

スポンサーリンク

reCAPTCHAを導入したあとで変化したこと

reCAPTCHAを導入して良かったのは、それまで当ブログの「問い合わせ」に届いていた英文や、わけの分からない文字のメールが一切届かなくなったことです。

こんなことならさっさとreCAPTCHAを導入しておけばよかったと思いましたが、実はエックスサーバーから連絡が来るまでreCAPTCHAの存在を知りませんでした(笑)

現在、外国から変なメールが届いていない方も、今後届く可能性もあるので早めにreCAPTCHAを導入した方がいいかもしれません。

コメント