WORDPRESS

【2021年】reCAPTCHA v3の登録方法と「Contact Form 7」へ設定するやり方【WordPressお問い合わせフォームのスパム防止】

reCAPTCHA v3の登録方法と「Contact Form 7」へ設定するやり方
 

あずきです🐥

WordPressでお問い合わせフォーム作成プラグイン「Contact Form 7」を導入したら、それにあわせて導入しておきたい代表的なセキュリティー対策…

Google reCAPTCHA

の登録・設定方法と使い方について、ブログ初心者さん向けに1から解説していきます

 

まず!

この「Google reCAPTCHA」は、お問い合わせフォームを始めとしたWEBサイト上に設置してある各種「送信フォーム」を…

「スパムメッセージ」などの、自動化された不正な攻撃から保護する

ためのツールです

Googleが提供してる無料のセキュリティーツール!
 

「Google reCAPTCHA」は、初代バージョンである「v1」から何度かアップデートが行われていて、現在では…

reCAPTCHA v3

というバージョンが最新になります(2021年3月時点の情報です)

 

「Google reCAPTCHA」バージョンごとの認証形式

  • reCAPTCHA v1 → 歪んだ文字を解読する、文字認証
  • reCAPTCHA v2 → 「私はロボットではありません」のチェックボックスと画像認証
  • reCAPTCHA v3 → ユーザー側が直接行う認証は一切なくなり、AIによる自動判別
 

従来までのバージョン「v1」「v2」と違い、「ブログ訪問者は実質なにもしなくてOK」という点で、ユーザーの利便性が大きく向上したのが「reCAPTCHA v3」のメリットです

「Contact Form 7」側が旧バージョンにはもう対応してないから、今は必然的に「reCAPTCHA v3」の一択だよ!
 

注意

現在の最新バージョン「reCAPTCHA v3」のデメリットとして、導入したブログの「全ページ」に専用のバッジ(=保護マーク)が表示されてしまう仕様になっています

 

この「reCAPTCHAバッジ」の全ページ表示を、「お問い合わせフォーム」を始めとした…

指定ページのみの表示

に変更する方法は、下記のプラグインが一般的です ↓

 
WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方
【2021年】WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方【Invisible reCaptcha for WordPressを使用】

続きを見る

上記は、今回ご紹介する【ステップ①】までの手順を済ませていることが前提となります(=reCAPTCHA v3にサイト登録して、サイトキー&シークレットキーを取得)

 

ということで…

そんな「Google reCAPTCHA」の登録手順と「Contact Form 7」への設定方法について、2つのステップで解説していきます

  1. 「reCAPTCHA v3」にサイト登録し、「サイトキー」と「シークレットキー」を取得する
  2. 取得したサイトキーとシークレットキーを、「Contact Form 7」側に貼り付ける

また!

この記事の後半では【補足】として…

  1. 「reCAPTCHA v3」の登録内容をあとから変更するやり方 ※ラベル変更、ドメイン追加など!
  2. 「reCAPTCHA v3」における、「AMP対応」のための設定 ※AMP化してあるブログのみ対象!

についてもあわせてご紹介していきます

サイトキーやシークレットキーを紛失しちゃった場合も、【補足】を見てね!
 

ということで、さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

【2021年】reCAPTCHA v3の登録方法と「Contact Form 7」へ設定するやり方【WordPressお問い合わせフォームのスパム防止】

ステップ1:「reCAPTCHA v3」にサイト登録し、「サイトキー」と「シークレットキー」を取得する【ドメインは複数登録可能】

WordPress ヘッダー b-01

 

まず1つ目のステップは…

「reCAPTCHA v3」にサイト登録し、サイトキー&シークレットキーを取得

する手順について

 

Google reCAPTCHA」のTOPページへアクセスして、画面の右上に表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-01

↑ こちらの「v3 Admin Console」という項目をクリックしましょう

 

クリックすると、いずれかの「Googleアカウント」にログインしている状態の場合…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-02-a

↑ このような「サイト登録」の画面が表示されます

「どのGoogleアカウントにもログインしていない」という場合は、少し先まで読み進めてね!
 

まず!

「Googleアカウントを複数持っている」という場合は、画面の右上に表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-02-b

↑ こちらの「プロフィール」アイコンを開いて、すでに保有している複数の「Googleアカウント」のなかから、今回の…

「Google reCAPTCHA」のサイト登録

に使用したい、任意の「Googleアカウント」に切り替えておきます

そもそも「アカウントが1つだけ」な場合は、そのままでOK!
 

一方で…

  • どのGoogleアカウントも「ログアウト」の状態になっている
  • もしくは、Googleアカウントをまだ1つも作ったことがない

という場合は、先に「ログイン or アカウント新規作成」の画面が表示されるので、まずは「ログイン or アカウント新規作成」から済ませましょう

 

ということで…

任意のGoogleアカウントに切り替えたら、ここから各種設定を行っていきます

上から順に見ていくよ!
 

まず、1番上の…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-03-a

↑「ラベル」という項目ですが、ここはブログ訪問者から直接見られるものではないので、自分で管理しやすいと思う「任意のタイトル」を入力しておけばOKです

 

今回は一例として…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-03-b

↑ このようなラベル名にしてみました(日本語でも設定は可能です)

 

ちなみに!

このラベル名は、登録完了したあとでも変更はできます

あとから変更する方法は【ステップ3】で解説してるよ!
 

補足

ラベルのフォーム欄には、例としてドメイン名(例 ●●●●●.com )が表示されていますが、別のドメインも追加登録していくことを考慮して、自分はドメイン名などは入れていません

 

つづいて、その下の…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-04-a

↑「reCAPTCHA タイプ」ですが、ここは最新バージョンの…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-04-b

↑「reCAPTCHA v3」を選択しましょう

 
「v2」はもう「Contact Form 7」に対応してないので注意!
 

お次は…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-05-a

↑「ドメイン」ですが、こちらは「reCAPTCHA v3」を今回サイト登録したいブログの…

ドメイン名

を、そのまま…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-05-b

↑ このように入力します(ドメイン名なので、 https:// や https://www. までの先頭部分は入力しません)

 

ちなみに!

このドメインもあとから変更や削除、また(別のドメインを)追加登録することができます

同じく【ステップ3】で解説してるよ!
 

今度は…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-06

↑ こちらの「オーナー」という項目ですが、こちらは最初から使用しているGoogleアカウントのメールアドレスが設定されているので、通常そのままでOKです

 

つづいて、その下に表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-07-a

↑ 各種利用規約をよく確認して、内容に同意できたら…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-07-b

↑ こちらのボックスにチェックを入れます

 

最後に…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-08

↑「アラートをオーナーに送信する」という項目ですが、こちらはなにか問題を検知したときに、そのアラート(=通知)を受け取るかどうかの設定なので、ここは任意で設定しましょう

自分は「チェックあり」のままにしてるよ!
 

ということで!

ここまでできたら、入力内容に間違いがないかどうか確認したうえで、1番下にある…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-09

↑ こちらの「送信」ボタンをクリックします

 

すると、「reCAPTCHA v3」のサイト登録が完了し…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-1-10

↑ このように…

  • サイトキー
  • シークレットキー

という次のステップで使用する【2つのキー】が発行されるので、コピーして大切に保管しておきましょう

 

これで、「Google reCAPTCHA」側での登録作業については完了となります🐥(この画面は一旦閉じてしまってOKです)

今度は「Contact Form 7」側の設定に入っていくよ!

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

 

ステップ2:取得したサイトキーとシークレットキーを、「Contact Form 7」側に貼り付ける【注:保護マークを「全ページ表示」にしたくない場合は、また別の手順となります】

WordPress ヘッダー b-02

 
 

重要

reCAPTCHA v3を導入すると、通常は「全ページ」の右下に表示されるバッジ(=保護マーク)を、お問い合わせフォームを始めとした…

指定ページのみの表示

に設定したい場合は…

Invisible reCaptcha for WordPress

というプラグインを使うのが一般的です

 
WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方
【2021年】WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方【Invisible reCaptcha for WordPressを使用】

続きを見る

 

その場合…

 

この【ステップ2】の手順は行いません

 

のでご注意ください

 

つづいて2つ目のステップは…

取得したサイトキー&シークレットキーを、「Contact Form 7」側に貼り付け

する手順について

 

WordPress管理画面から、プラグイン「Contact Form 7」を導入すると表示される…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-2-01

↑「お問い合わせ」を開き、そのなかの「インテグレーション」という項目をクリックしましょう

 
 

「インテグレーション」を開いたら、そのなかに表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-2-02

↑ こちらの「インテグレーションのセットアップ」というボタンをクリックします

 

すると…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-2-03

↑ このように「reCAPTCHA」の…

  • サイトキー
  • シークレットキー

を入力する画面になるので、さきほどコピーしておいた【2つのキー】を各フォームに貼りつけます

 

最後に、「変更を保存」ボタンをクリックして…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-2-04

↑ このように「reCAPTCHA はこのサイト上で有効化されています。」というメッセージが表示されたら、設定は無事完了です🐣

 

念のため!

実際のブログ上で、各ページの右下に…

reCAPTCHAのバッジ(=保護マーク)

がちゃんと表示されていることを確認しましょう

 

これで基本的な設定については完了となりますが、最後に【補足】として…

  1. 「reCAPTCHA v3」の登録内容をあとから変更するやり方 ※ラベル変更、ドメイン追加など!
  2. 「reCAPTCHA v3」における、「AMP対応」のための設定 ※AMP化してあるブログのみ対象!

の2点について解説していきます🐥

サクッと見ていこう!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

補足1:「reCAPTCHA v3」の登録内容をあとから変更するやり方【ラベル変更/ドメイン追加/サイトキー・シークレットキーがわからなくなった場合など】

WordPress ヘッダー b-03

 

つづいて1つ目の【補足】は、今回登録した「reCAPTCHA v3」の各種内容を…

あとから変更(編集)するやり方

について

 

まずは「Google reCAPTCHA」のTOPページにアクセスして、最初と同じように右上の…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-3-01

↑「v3 Admin Console」という項目をクリックしましょう

 

つづいて、画面の右上にある…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-3-02

↑ こちらのプロフィールアイコンを開いて、「reCAPTCHA v3」の登録に使用したGoogleアカウントに切り替えます

 

すると、登録済みデータの管理画面に切り替わるので、左上に表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-3-03-a

↑ こちらのラベル名のところを開いて、編集したい該当の登録データに切り替えます

「reCAPTCHA」の登録済みデータが1つだけの場合、ここはそのままでOK!
 

切り替えたら、画面の右上に表示されている…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-3-03-b

↑ こちらの「設定」アイコンをクリックしましょう

 

すると…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-3-04

↑ このように登録時と同じような入力画面が表示されるので、ここで各種内容を編集すればOKです🐥

サイトキーとシークレットキーがわからなくなった場合は、「reCAPTCHA のキー」という場所を開けば確認できるよ!
 

補足2:「reCAPTCHA v3」における、「AMP対応」のための設定【注:AMP化されたブログのみ対象です】

WordPress ヘッダー b-04

 

つづいて2つ目の【補足】は、「reCAPTCHA v3」における…

「AMP対応」のための設定

について

 

注意

この設定は「AMP化」したサイトのみ対象の作業なので、それに該当しない場合は行わないでください

 

まずは、さきほどの【補足1】で解説した…

「reCAPTCHA v3」の登録内容を、あとから変更するやり方

と同じ手順で、登録済みデータの編集画面を開きましょう

 

そのなかに…

「reCAPTCHA v3」の登録方法と「Contact Form 7」へ設定するやり方 1-4-01

↑「このキーがAMPページで動作するようにする」という項目があるので、こちらに「チェックを入れる」だけでOKです

最後に「保存」ボタンを忘れずに!
 

今回の記事はこちらの章に属しています

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

 

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS