ウェブツール

海外からの英文スパムメール対策!Contact Form 7のreCAPTCHA設定方法

reCAPTCHA

ブログを運営していて厄介なのが、スパムメールなのではないでしょうか?

ユミ
ユミ
ちゃんとプラグインで対策してるのに、なんで?!

と、そのメールの多さにウンザリしてしまいますよね。

※最近では、開設したばかりのブログに届くケースも増えています。

そこで本記事では、WordPress用プラグインであるContact Form 7を利用して、reCAPTCHAを導入する方法をご紹介していきます。

海外から英語で送られてくるスパムメールにも有効ですよ!

reCAPTCHAとは?

reCAPTCHAとは

reCAPTCHAは、スパムメールなど外部の不正攻撃からウェブサイトを守るGoogleのサービスです。

ユミ
ユミ
無料で使用することができますよ。

reCAPTCHAにはいくつかバージョンがありますが、今回はreCAPTCHAv3というユーザーの目につかないバックグラウンドでスパム判定をし、サイトを保護する仕組みを利用します。

「私はロボットではありません」といったチェックを入れる必要がないため、ユーザビリティを損ねることもありません。

reCAPTCHAを導入する手順

reCAPTCHAの導入は、2つの手順に分かれます。

  1. reCAPTCHAに登録し、キーを取得する
  2. プラグインに設定する

2つ合わせて5分程度で完了するので、サクッと設定していきましょう!

reCAPTCHAに登録する

まずは、reCAPTCHAサービスページにアクセスして、プラグインに連携するためのキー(Key)を取得していきましょう!

reCAPTCHAにアクセス

 

GoogleのreCAPTCHAサービスページにアクセスして連携用のキー(Key)を取得する必要があります。

reCAPTCHAの導入手順

 

Googleアカウントにログインします。

reCAPTCHAの導入手順2

 

以下の①~④の項目をそれぞれ入力していきましょう。

reCAPTCHAの導入手順3
  1. ラベル:何でもOK
  2. reCAPTCHAタイプ:「reCAPTCHA3」を選択
  3. ドメイン:スパム対策したいブログURLを入力
  4. 同意事項にチェック

ここまで入力できたら、「送信」をクリックします。

③のドメインは、「https://」を除いた形で入力します。
このブログを設定する場合:ym-life.com

※「ym-life.com/」と最後にスラッシュがあるとエラーが表示されてしまうので注意。

 

無事登録されたら、サイトキーとシークレットキーが表示されます。

※このページは後で使いますので、閉じずに開いたままにしておいてください。

reCAPTCHAの導入手順4

 

プラグインに設定する

次に、WordPressでの設定です。

『お問い合わせ』⇒『インテグレーション』をクリック。

reCAPTCHAの導入手順5

 

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

reCAPTCHAの導入手順6

 

先ほどのサイトキーとシークレットキーをこちらに入力していきます。(※コピペ推奨)

reCAPTCHAの導入手順7

入力できたら、『変更を保存』しておきましょう!

 

reCAPTCHAの導入手順8

reCAPTCHAはこのサイト上で有効化されています。

このように表示されたら、設定完了です!

 

ブログを確認し、画面右下にこんなマークが表示されていればOK。

reCAPTCHAのプライバシー画像

保護マークを非表示にする方法(任意)

※ここからは、任意の操作になります。

フッターメニューを設定されている場合など、保護マークがブログ運営の邪魔になる場合のみ非表示の設定をしていきましょう!

こちらの手順も2段階です。

  1. htmlのコードをcontact form7に貼り付ける。
  2. CSSにコードを記述する。

htmlのコードをcontact form7に貼り付ける

まずは、GoogleのQ&Aサイトにアクセスします。

Google公式ページへ

※別ページで開くことを推奨

 

「I’d like to hide the reCAPTCHA badge. What is allowed?」の箇所までスクロールし、htmlコードをコピーします。

reCAPTCHAのログ非表示手順

※この画面はまだ使うので、閉じないでください。

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.

 

コンタクトフォーム7に、このコードを記述していきます。

管理画面『お問い合わせ』⇒『コンタクトフォーム』を開き、最後の行にコードを貼り付け。

reCAPTCHAのログ非表示手順2

貼り付けたら、「保存」を押しておきましょう。

ユミ
ユミ
この段階ではまだロゴは非表示になっていません。下記で非表示にする方法を解説していきます。

CSSにコードを記述する

次に、先ほどアクセスしたGoogleの公式ページを再度開き、ロゴを非表示にするコードをコピーします。

reCAPTCHAのログ非表示手順3
.grecaptcha-badge { visibility: hidden; }

 

こちらを、WordPressのダッシュボード画面からCSSに記述していきます。

JINやSWELLの場合は、『外観』⇒『カスタマイズ』から追加CSSを記述することができます。

reCAPTCHAのログ非表示手順4

 

先ほどコピーしたコードを貼り付けていきます。

reCAPTCHAのログ非表示手順5

貼り付けたら、忘れずに「公開」ボタンを押しておきましょう!

 

最後に、ロゴが非表示になっているか確認してください。

また、お問い合わせページに以下の文言が追加されているかも併せてチェックしておきましょう!

reCAPTCHAのログ非表示手順6

こちらが確認できたら、非表示の処理は完了です!

あとがき

今回は、スパムメール対策についてでした。

reCAPTCHAで海外から届く鬱陶しい英文メールを排除し、快適にブログを運営していきましょう!

 

\時間や場所にとらわれない働き方を叶えたいあなたへ/

ABOUT ME
ユミ
ブログコンサルタント(主にアドセンス)/複数のネット広告を組み合わせて、収益性の高いブログを作るのも得意/月収10~420万円の収入を得るコンサル生さんを輩出中/ブログで収入を得たい初心者の方へ、無料のメールマガジンを配信中
未経験からブログ起業でフリーランスになる方法
無料メルマガはこちら
未経験からブログで稼ぐ方法を無料公開中!
メルマガを見る