[reCAPTCHA導入]キーを取得しWPForms(フォーム)に実装する方法

  • URLをコピーしました!

reCAPTCHA]を問い合わせフォームに埋め込み、ロボットによるスパム投稿を防ぎます。

この記事では、以下の2ステップを解説します。

  1. Google reCAPTCHAのキーを取得する方法
  2. そのキーを使ってFormに[reCaptcha v2]または[reCaptcha v3]を実装する方法
目次 タップで飛べます!

[CAPTCHA][reCAPTCHA]とは?

[reCAPTCHA v2]の場合

[reCAPTCHA v2]だと、赤枠内のようなものをフォームに埋め込みます。

[reCAPTCHA v3]の場合

[reCAPTCHA v3]v2よりユーザビリティが高い。

[CAPTCHA]とは、bot(ボット)によるシステムへの自動アクセスを防止する為に考案された認証システムです。

「私はロボットではありません」と記載されたチェックボックスにチェックを求められたり、歪んだ文字を読み取って入力させられたり、横断歩道や信号機を9つの画像の中から選ばされたりしたことがありますよね。

それらは[Captcha]と呼ばれるものです。

CAPTCHAの中で最もポピュラーなのがGoogleの[reCAPTCHA]です。

[reCAPTCHA]とは、Googleが無料で提供している、botと人間を区別するためのサービスです。

ここでは、そのGoogle[reCAPTCHA]の設定方法をお届けします。

Google[reCAPTCHA]をフォームに埋め込む方法

[reCAPTCHA]のキーを取得する

STEP
Googleにアクセスする

 Google reCAPTCHAにアクセスします。

STEP
必要項目に入力

必要項目を入力や選択し、「送信」ボタンを押します。

  1. ラベルは自分が認識しやすい名称を入力
  2. reCAPTCHAのタイプを選ぶ ここではv2を選んでいますが、ユーザビリティの高いv3を選んだほうが良いでしょう。以下の方法はv2の場合と同じです。
  3. ドメインを入力 本サイトならzakkioh.com
  4. 利用条件に同意
  5. 送信
STEP
サイトキーとシークレットキーをコピー

サイトキーとシークレットキーをコピーします。

[reCAPTCHA]を「WPForms」に埋め込む方法

ワールドプレスのプラグイン[WPForms]がセッティング済みであることを前提に解説を進めます。

まだの方は、[WPForms]簡単なフォームの作り方とカスタマイズ方法をご覧いただき、設定を済ませてから下のステップへ進んでください。

未インストールの方はインストールを済ませてください。

STEP
「設定」ボタンを押す

プラグイン→インストール済みプラグイン→[WPForms Lite]→設定

STEP
「CAPTCHA」を押す

メニューの「CAPTCHA」を押します。

STEP
「reCAPTCHA」を選択

「reCAPTCHA」を選択します。

STEP
キーをペーストし「設定を保存」

先程コピーしたサイトキーとシークレットキーを各欄にペーストし、「設定を保存」ボタンを押します。

STEP
WPFormsの「reCAPTCHA」を押す

WPForms→フィールド→「reCAPTCHA」と進みます。

STEP
ページに埋め込む

既存のページに埋め込むなら「既存のページを選択」、新規ページを作成するなら「新規ページを作成
ボタンを押します。

STEP
「reCAPTCHA」が組み込まれたかを確認

WPFormsのフォームに「reCAPTCHA」が実装されたかをプレビューで確認します。

v2、PCの場合

「reCAPTCHA v3」を選んだ場合、次のように右下にreCAPTCHAのアイコンが表示されます。v3のほうがユーザーの手を煩わせずに済みますので、おすすめです。

v3、PCの場合
v3、スマホの場合

v2とv3の違い

reCAPTCHA v2

[reCAPTCHA v2]は、「私はロボットではありません」と記載されたチェックボックスが埋め込まれます。

ユーザーがチェックボックスにチェックを入れると、次は2パターンに分かれます。

  1. そのまま人間と判断されるもの。
  2. 人間かどうかの試験を課されるもの。

後者は、人間かどうかの試験をさらに課されます。

9枚の画像が現れ、たとえば「横断歩道」とか「信号機」とか「丘」とかの画像を3枚ほど選ぶ試験を課されます。

reCAPTCHA v3

[reCAPTCHA v3]は現在、最新版で、ユーザーに何らかのアクションを求めることはありません。

[reCAPTCHA v3]は、人間とbotのWebページ上の行動を機械的に学習し、人間とbotを自動的に判別します。

つまり、[reCAPTCHA v3]は、ユーザービリティを損ないませんので、おすすめです。

まとめ

[CAPTCHA]とは、bot(ボット)によるシステムへの自動アクセスを防止する為に考案された認証システムです。

[reCAPTCHA]とは、Googleが無料で提供している、CAPTCHAのサービスです。

この記事では以下の方法を解説しました。

  1. Google reCAPTCHAのキーを取得する方法
  2. そのキーを使ってFormに[reCaptcha v2]または[reCaptcha v3]を実装する方法

\高速サーバーなら↓/

国内最速!初期費用無料の高性能レンタルサーバー【ConoHa WING】>

\ワードプレスのテーマなら↓/

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ>

目次 タップで飛べます!