レスポンシブ・メールフォームのreCAPTCHAアドオン(バージョン3)の設置方法の解説

レスポンシブ・メールフォームのreCAPTCHAアドオン(バージョン3)の設置方法を解説します。
このページで解説するのはバージョン3のほうです。間違えないようにしてください。

バージョン2の設置方法の解説や、reCAPTCHAアドオンの機能や価格についてはそれぞれ別ページになっています。

なお、このページに書かれている内容はこのアドオンに同梱されている「reCAPTCHA(v3)アドオンの設置手順.txt」の内容と同じになります。
文字だけのテキストファイルと違い、このページでは画像や色分けなどされているため内容を把握しやすいかもしれません。

設置手順

1、zipファイルを展開します。
ついでにこのzipファイルをバックアップ保存しておくとベターです。
展開すると「recaptcha-v2」と「recaptcha-v3」というフォルダが入っています。
今回設置するのはバージョン3なので後者を使います。

2、メールフォーム本体にあるaddonフォルダの中にバージョン3である「recaptcha-v3」フォルダだけを入れます。
バージョン2のフォルダは入れないようにしてください。
もし両方のバージョンがaddonフォルダの中に存在する場合は、どちらのバージョンも機能しなくなります。

以下の場所にrecaptcha-v3フォルダを設置してください。
css、js、phpのフォルダの中身は以下の図では省略しています。

mailform/
  ┃
  ┣━━ addon/recaptcha-v3/ここにアドオンの様々なファイル
  ┃
  ┣━━ css/中身を省略
  ┃
  ┣━━ js/中身を省略
  ┃
  ┣━━ php/中身を省略
  ┃
  ┣━━ index.html (フォームのページ)
  ┃
  ┗━━ thanks.html (サンクスページ)

3、recaptcha-v3-config.phpをテキストエディタで開き、「サイトキー」と「シークレットキー」をreCAPTCHAの管理画面からコピーして貼り付けてください。
この作業は初めての方だとわかりにくい可能性があるので、後ほど図で細かく解説します。

//【必須】 サイトキーを設定
$rm_sitekey_v3   = '****************************************';

//【必須】 シークレットキーを設定
$rm_secretkey_v3 = '****************************************';

設置は以上です。
メールフォームのページをブラウザで開いたとき、ウインドウ右下にreCAPTCHAのアイコンが表示されているかを確認してみましょう。

次にフォームを送信し、管理者に届くメールの最下部に【reCAPTCHA(v3)の検証結果 (スコア)】という項目が記載されているかの確認もしてみましょう。(これはrecaptcha-v3-config.phpの設定で非表示にすることもできます)

なお私がテストした限りでは、reCAPTCHAの管理画面に反映されるのは2～3日後になるようです。

「サイトキー」と「シークレットキー」の取得手順

reCAPTCHAを使うためにはGoogle側で用意される「サイトキー」と「シークレットキー」を取得する必要があります。

1、まずGoogleアカウントが必要になります。
持っていない方は新規作成してください。
Gmailなどをすでにお使いの方はそのアカウントを使用してもOKです。

2、Googleアカウントでログイン後、reCAPTCHAの管理画面にアクセスし、新しいサイトを登録する。
以下のような画面になるので、reCAPTCHAを使用するサイトを登録してください。

「ラベル」は何でもよいです。自分がわかりやすい名前を付けておきましょう。

「reCAPTCHAタイプ」は今回はバージョン3である「スコアベース (v3)」を選択してください。

「ドメイン」には設置するサイトのドメインを記入してください。
開発環境で使いたい場合は、その間だけ「localhost」と記入すると良いでしょう。
また、今ご覧になっているこのサイトのようにwwwが付くURLのサイトの場合は、wwwも記入しておくとより厳格になるでしょう。

上記すべて入力したら送信ボタンを押してください。

3、「サイトキー」と「シークレットキー」が表示されます。
それぞれをコピーし、recaptcha-v3-config.phpの設定部分に貼り付けます。

なお、「サイトキー」は一般公開しても問題のないものですが、「シークレットキー」は公開してはいけません。

フォームの送信をブロックする値について

reCAPTCHAアドオンの機能紹介ページでも記載した通り、バージョン3のreCAPTCHAでは人間か、それともボットであるかを0.0～1.0のスコアとして算出する仕組みになっています。
(0.0に近いほどbotの可能性が高く、1.0に近いほど人間の操作である可能性が高い)

ですので「いくつ以下のスコアはボットとみなしてフォーム送信を拒否するか？」をrecaptcha-v3-config.phpの中で設定できるようになっています。

//【任意】 フォームの送信をブロックする値の設定
$rm_recaptcha_v3_score = 0.5;

上記の値は特に変更しなくても良いと思いますが、reCAPTCHA(v3)の管理画面の結果グラフを見て、人間からのフォーム送信もブロックしている可能性が高いと感じられた場合は数値を下げてみると良いでしょう。

または、最初はあえて0.0にしてbotを含む全てのフォーム送信を許可しておき、サイト管理者に届くメールの最下部に記録されるreCAPTCHA(v3)のスコアを確認し、botからのフォーム送信が減っていくように段階的に数値を上げていくのも良いかもしれません。

メールフォームのない別ページでもreCAPTCHAのJSを読み込みたい場合

バージョン3のreCAPTCHAはフォーム入力者の操作をブラウザを通して取得し、それによってボットか人間かの判定を行います。
例えば「マウスの動き」や「スクロールの仕方」、「クリックやタップのタイミング」や「閲覧時間」など、様々な要素が判定のための要素になるそうです。

ですので、メールフォームを設置しているページだけでなく他のページでもreCAPTCHAのJSを読み込んでおくと、判定の精度が高まります。
もし他のページでも読み込ませたい場合は、以下のコードをそのページ内に記述すればOKです。(●●●●の部分にサイトキーを記入)

<script src="https://www.google.com/recaptcha/api.js?render=●●●●"></script>

初期状態(このアドオンなし)の状態に戻す方法

初期状態(このアドオンなし)のメールフォームに戻すには、上記の設置手順2でaddonフォルダに入れたrecaptcha-v3フォルダごと削除すればOKです。

サポートについて

有料販売しているアドオンには設置メールサポートが付いています。
設置方法でご不明な点があったり、カスタマイズしていない初期状態なのに正常に動作しないような場合は、お問い合わせページからお問い合わせください。

設置メールサポートは「アドオンの設置」に関しての質問のみとなります。
カスタマイズに関してのご質問などは別途料金が発生いたしますので、ご了承ください。