Contact Form 7 スパム対策!reCAPTCHAの設定

スパム対策アイキャッチ ブログ運営

ブログにお問い合わせフォームを設置したものの、スパムメールにお困りではありませんか?

あんまき
あんまき

こんにちは、あんまきです。外国語のスパムメールって怪文書みたいで怖いですよね。

今回は、WordPressのお問い合わせフォームプラグイン「Contact Form 7」に、Googleのスパム対策サービス「reCAPTCHA(v3)」を導入する方法をご紹介します。

reCAPTCHAってそもそもなに?

reCAPTCHAとは、Googleの無料スパム対策サービスです。

導入することで、フォームへ送信者がbot(ロボット)か人間かをテストします。

「私はロボットではありません」チェックボックスや、「この中から○○を含む画像を、すべて選択してください」などでおなじみ。

所要時間目安は15分。

全体の流れ
  1. お問い合わせフォームに承諾確認チェックボックスを設置
  2. Google reCAPTCHAのサイトでAPIキーを取得
  3. WordPressでAPIキーを入力

パソコン操作が苦手な方でもこの記事の通りに設定すればカンタンに導入できますよ!さっそくやってみましょう!

スポンサーリンク

【前提】Contact Form 7にチェックボックスを設置

reCAPTCHAを導入する前に、Contact Form 7で作成したお問い合わせフォームに、承諾確認チェックボックスをつけておきましょう。↓

承諾確認ボックスをつけることで、bot(ロボット)によるスパムメールの送信を防ぐことができます。

フォームの承諾確認編集画面に移動

WordPressのダッシュボード内にあるコンタクトフォーム編集画面に移動します。

ダッシュボード左側の「お問い合わせ」から「コンタクトフォーム」を選択。承諾確認ボックスをつけたいコンタクトフォームをクリック。

コンタクトフォーム編集画面に移動したら、「フォーム」タブ→「承諾確認」タブをクリックすると、承諾確認編集画面へ移動できます。

黒く塗りつぶされている部分は何も入力しなくて大丈夫です。

承諾確認チェックボックス作成

承諾確認編集画面で、チェックボックスを作成します。

手順
  1. 同意条件文を入力
  2. オプションのチェックボックスを外す
  3. タグを挿入」ボタンをクリック

同意条件文は任意ですので、当ブログでは

この内容でよろしければ、チェックを入れて送信してください

としています。

あなたのブログの雰囲気にあった文面に書き換えてくださいね。

チェックボックスタグの位置を確認して保存

承諾確認チェックボックスタグの位置を確認してから保存します。

赤枠で囲ったタグが[textarea]と[submit]の間にあることを確認したら、左下の保存ボタンをクリック。

メッセージ本文と送信ボタンの間に承諾確認チェックボックスを表示することができました。

あんまき
あんまき

こうしておけば読者さんもうっかり誤送信が防げて安心ですね!

ですが、承諾確認チェックボックスを設置しただけでは完全にスパムメールを防ぐことができません。

さらにGoogle reCAPTCHAを導入することでより強固にスパムメールをブロックしましょう。

スポンサーリンク

【手順1】Google reCAPTCHA (v3) のAPIキーを取得

Googleの無料スパム対策サービス「reCAPTCHA」にサイトを登録してAPIキーを取得します。

Googleのアカウントが必要ですので、事前に登録してログインしておいてください。完全無料ですのでご安心を!

Google reCAPTCHA登録画面に移動

reCAPTCHA公式サイトにアクセスします。

reCAPTCHA
reCAPTCHA is a security service that protects your websites from fraud and abuse.

reCAPTCHAの公式画面に移動したら、「v3 Admin Console」をクリックして登録画面へ。

reCAPTCHAに登録してAPIキーを取得

導入時に必要となるサイトキーシークレットキーを取得するため、フォームに必要事項を入力していきましょう。

手順
  1. ラベル、ドメインに「あなたのブログのドメイン」を入力します
  2. reCAPTCHA タイプは「reCAPTCHA v3」を選択
  3. reCAPTCHA利用条件に同意する」にチェックを入れたら、送信ボタンをクリック

送信が完了すると、サイトキーとシークレットキーが発行されます。後ほどWordPressへ登録しますので、この画面は開いたままにしておきましょう。

reCAPTCHA (v3)にする理由

reCAPTCHA v3を選択することで、テスト不要完全自動でbotと人間を選別してくれます。

「私はロボットではありません」チェックボックスや、「この中から○○を含む画像を、すべて選択してください」などのめんどうな作業は一切不要。

ユーザーのストレスを軽減できるので、迷わずreCAPTCHA v3を選択しましょう!

スポンサーリンク

【手順2】reCAPTCHA (v3) APIキーを入力

WordPressのダッシュボードに戻り、お問い合わせフォームにreCAPTCHA (v3)を導入します。

インテグレーション編集画面に移動

ダッシュボードの「お問い合わせ」から「インテグレーション」を選択し、reCAPTCHAのキーを入力する画面に移動します。

外部 API とのインテグレーションの中から、「reCAPTCHA」のインテグレーションのセットアップを選択します。

サイトキーとシークレットキーの入力

外部 API とのインテグレーション編集画面で、手順1で取得したサイトキーとシークレットキーをそれぞれ入力します。

入力できたら「変更を保存」。

「設定を保存しました」と表示され、サイトの右下に「プライバシー・利用規約」のロゴが表示されていたらreCAPTCHAの完了です!

reCAPTCHA v3をお問い合わせフォームに導入すれば、ブログ読者がストレスを感じることなく、スパムメールだけをブロックすることができます。

あんまき
あんまき

毎日大量に届いたスパムメールが一切届かなくなって快適〜♪

難しい用語も出てきますが、この記事の通りに設定をすればあっという間に導入できますので、ぜひ試してみてくださいね!

しかし!ここでひとつ問題が…。

あんまき
あんまき

ブログの右下にロゴとヘッダーリンクのアイコンが被ってる〜!

ロゴ被り
ロゴとヘッダーリンクアイコン表示例

安心してください、こちらの記事でreCAPTCHAのロゴを非表示にするGoogle公認方法を解説しています。

この記事の方法であれば推定所要時間10分程度で設定完了できます♪reCAPTCHA v3を導入したら、こちらもセットで設定しちゃいましょ〜!

タイトルとURLをコピーしました