- 動画の再生速度を３倍４倍にするChromeの拡張機能をYouTubeに使ってみる
Topics
インフォコネクト最新情報
Contact Form 7へのGoogleリキャプチャ（reCAPTCHA）v3の導入手順
Contact Form 7へのGoogleリキャプチャ（reCAPTCHA）v3の導入手順
この記事は公開から2年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
今回はContact Form 7を利用したお問い合わせフォームにGoogle reCAPTCHA（リキャプチャ）v3を実装する手順についてご紹介します。
- \\ 目 次 //
- Googleリキャプチャv3の準備
- Contact Form 7への実装
- reCAPTCHAのロゴを非表示にする方法（Google推奨）
- Googleリキャプチャ（reCAPTCHA）とは？
- あとがき
Googleリキャプチャv3の準備
まずは、サイトに実装するGoogleリキャプチャv3の準備をします。
① Googleアカウントにログインした状態で、Googleリキャプチャ公式サイトにアクセスします。
公式サイト：https://www.google.com/recaptcha/about/
② サイト上部の［v3 Admin Console］をクリックします。
③ コンソール画面が表示されたら、各項目を適宜入力して［送信］をクリックします。
④ 登録完了画面に遷移し「サイトキー」と「シークレットキー」が表示されます。この２つのキーを導入設定に使用します。
⑤ ２つのキーを保存したら［アナリティクスに移動］をクリックします。
⑥ 今回設定したドメインに関するアナリティクス画面が表示されます。
サイトへの実装後、この画面に情報が表示されます。
ここまでの手順で、Googleリキャプチャv3の準備は完了です。
もし⑤にて［設定に移動］をクリックすると、③のコンソール画面が表示されるので、設定の追加や修正などを行なうことができます。
Contact Form 7への実装
次に、準備したGoogleリキャプチャv3をWordPressプラグインContact Form 7を利用してサイトに実装します。
① WordPressの管理画面にログインします。
②［お問い合わせ］→［インテグレーション］を選択します。
③「reCAPTCHA」項目の［インテグレーションのセットアップ］をクリックします。
④ 外部APIとのインテグレーション画面が表示されるので、前項④で取得した「サイトキー」と「シークレットキー」をそれぞれ入力して［変更を保存］をクリックします。
ここまでの手順で、Googleリキャプチャv3をContact Form 7を利用して実装できました。
reCAPTCHAのロゴを非表示にする方法（Google推奨）
reCAPTCHAバッジを一目で確認できるため、ユーザーが安心してアクセス出来たり、お問い合わせフォームの入力をすることが出来るのですが、ページトップボタンやページ内コンテンツに被ってしまうなど、場合によってはreCAPTCHAバッジが邪魔になってしまうことも少なくありません。
みなさんの中にも「reCAPTCHAバッジを非表示にしたい」なんて考えた方いらっしゃいますよね。
実は、Google公式Q&Aサイトにアクセスしてみると、下図のように記載されています。
日本語に訳すと『reCAPTCHAバッジの非表示設定は許可されていますか？』という問いに対して『ユーザーにreCAPTCHAブランディングが分かるように表示すれば、reCAPTCHAバッジを非表示にすることができます。』と記載されています。
つまり、公式サイトに記載のあるコード同様、実際に表示されるreCAPTCHAバッジのコードと同じ内容のものを記述すれば、reCAPTCHAバッジを非表示にしても良いわけですね。
実装されるデフォルトのreCAPTCHAバッジのコードがこちら。
このコードを参考にして、フォーム下部にテキストおよびテキストリンクを設定したのがこちら。
Google公式Q&Aサイトの情報からすると、この設定でreCAPTCHAバッジを非表示にすることが可能なのですが、ユーザーの立場からすると、reCAPTCHAバッジが表示されないため安心してサイトを利用しづらくなります。これでは本末転倒です。
そこで弊社では、邪魔な場所での非表示とユーザーへの安心感を両立させるために、下図のようにフォーム送信ボタン下部の目立つ位置へ、reCAPTCHAバッジに似せた表示を、同様のコードで実装してみました。
この設定によってユーザーの安心度が増したからなのか、設定翌日からお問い合わせ件数が増えたことを付け加えておきます。
Googleリキャプチャ（reCAPTCHA）とは？
Googleリキャプチャ（reCAPTCHA）とは、Googleが提供する「フォームの不正利用やスパム対策の認証システム」のことです。
reCAPTCHA v2までは「私はロボットではありません」や「バスの写真を選んでください」のように、ユーザーが質問に対して何らかのアクションを行うことでボットかどうか判定していましたが、reCAPTCHA v3ではユーザーが一切アクションを行うことなく自動的にボットかどうか判定を行えるようになりました。
実際には、ボットを含むすべてのユーザーに対して、ページへのアクセスからフォーム送信に至るまでのブラウザ上での行動を監視することで、ボットかどうかの判定を行っています。
あとがき
いかがだったでしょう。思ってたより簡単にGoogleリキャプチャの導入が出来そうだと感じられたんじゃないでしょうか。
また、Contact Form 7の兄弟プラグインである「Flamingo」をインストールしていれば、Googleリキャプチャによってスパム判定され、手元には届かなかったメッセージを確認することができるとともに、Googleリキャプチャが正常に機能していることも確認できますよ。
お問い合わせフォームへのGoogleリキャプチャ実装は、スパム対策として必須と言っても過言ではありません。今回の記事を参考にして、是非みなさんも実装してみてください。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。