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

レスポンシブ・メールフォームのreCAPTCHAアドオン(バージョン2)の設置方法を解説します。
バージョン3については「reCAPTCHAアドオン(バージョン3)の設置方法の解説」のページをご覧ください。

また、reCAPTCHAアドオンの機能や価格などの詳細は「レスポンシブ・メールフォームのreCAPTCHAアドオンについて」のページをご覧ください。

このページに書かれている内容はこのアドオンに同梱されている「reCAPTCHA(v2)アドオンの設置手順.txt」の内容と同じです。
購入前の人も参考にできるように公開しています。

設置手順

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

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

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

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

3、メールフォーム本体のindex.htmlに以下の2つのコードを追加します。
(index.htmlをrecaptcha-v2フォルダの中のindex(差し替え用).htmlと差し替えるだけでもOKです)
index.htmlのhead要素内に、以下のようにrecaptcha-v2.cssの読み込みを追加。

<link rel="stylesheet" href="addon/recaptcha-v2/recaptcha-v2.css" />

index.htmlのform要素内で、reCAPTCHAのチェックボックスを表示させたい場所に以下のHTMLを追加。

<!-- reCAPTCHA(v2)ここから -->
<div id="recaptcha_v2">
  <div id="recaptcha_v2_render"></div>
  <span class="error_recaptcha">reCAPTCHAがチェックされていません</span>
</div>
<!-- reCAPTCHA(v2)ここまで -->

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

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

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

設置は以上です。
メールフォーム上にreCAPTCHAのチェックボックスが表示されているかを確認してみましょう。

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

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

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

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

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

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

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

「reCAPTCHAタイプ」は今回はバージョン2である「チャレンジ (v2)」を選択し、「チェックボックス」のほうを選択してください。

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

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

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

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

エラーメッセージについて

reCAPTCHAのチェックボックスにチェックを入れずに「送信する」のボタンを押すと、「reCAPTCHAがチェックされていません」というエラーメッセージが赤文字で表示されます。
この文字列は上記の設置手順3のHTMLで自由に変更することができます。

トークンの有効時間について

あまり気にする必要もないですが、reCAPTCHA(v2)ではチェックボックスにチェックを入れてから2分を経過すると以下のような表示になり、再度チェックを入れなければいけなくなります。

これは「リプレイ攻撃を防ぐため」と公式マニュアルに記載されています。

各reCAPTCHAユーザーレスポンストークンは2分間有効で、リプレイ攻撃を防ぐため1回しか検証できません。
ユーザーの回答を確認する  |  reCAPTCHA  |  Google for Developers

そういう仕様ですのでご了承ください。

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

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

サポートについて

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

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