【Blogger】私はロボットではありません。お問い合わせフォームにreCAPTCHAを付けてみたよ。

このブログのお問い合わせのページはformrunというサービスを利用して構築しています。

ただこのブログ、お問い合わせなんてほとんどありません。

５年ぐらいの間に１回あったか無いかぐらいです。（笑）

そんな訳でお問い合わせのページは無くてもいいんですが、一応Google Adsenseをやる場合に「お問い合わせフォーム」があったほうがいいらしいんで設置しています。

ところで最近気づいたのですが、このお問い合わせフォームにreCAPTCHAを付けられるようになったみたいです。

reCAPTCHA（リキャプチャ）というのは何かというと、よくサイトのお問い合わせフォームで見るこういうやつです。

これを設置することによりbotと呼ばれるロボットによるスパム攻撃を防ぐことが出来ます。

さっそく設置してみました。

まずformrunで「コード型」で新規フォームを作成します。

次にhttps://www.google.com/recaptcha/admin#listに行き、reCAPTCHAの登録を行います。

登録できるとサイトキーとシークレットキーというのが作られますので、このうちのシークレットキーをフォームの設定画面に入力します。

次に、サイトのほうに下記スクリプトを追加します。

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

次に、フォームタグの中に下記を追記します。

（注）xxxxxxxxxxxxxxxxxxxxxxxの部分にサイトキーを書いてください。

その他、手順の詳細はformrunのFAQをご覧になってください。

で、これで一応reCAPTCHAがお問い合わせフォームに表示されるようになったのですが、ただこのままだとreCAPTCHAのチェックをしなくても送信が出来てしまいますので、チェックしないと送信ボタンが押せないようにします。

まず、buttonタグにdisabledを追加し、送信ボタンを押せないようにします。

次にrecaptchaのdivタグにdata-callback="clearcall"を追記し、以下のスクリプトを追加します。

<script>
function clearcall(code) {
  if(code !== ""){
    $(':submit[name=sendButton]').removeAttr("disabled");
  }
}
</script>

これによりreCAPTCHAにチェックが入るとdisabledが外れて送信ボタンが押せるようになります。

以下、お問い合わせページ全体のタグです。

	<div id="mailform_main">
	<p>ご意見、ご質問等、お気軽にお問い合わせください。</p>
	<form class="formrun" action="https://form.run/api/v1/r/6a1f35fahnu5t01mcd1yofur" method="post">
	<div>
	<label>お名前 [必須]</label>
	<input name="お名前" type="text" class="formrun-name" data-formrun-required>
	</div>
	<div>
	<label>メールアドレス [必須]</label>
	<input name="メールアドレス" type="text" class="formrun-mail" data-formrun-type="email" data-formrun-required>
	<div data-formrun-show-if-error="メールアドレス">メールアドレスを正しく入力してください</div>
	</div>
	<div>
	<label>メッセージ [必須]</label>
	<textarea name="メッセージ" class="formrun-message" data-formrun-required></textarea>
	<div data-formrun-show-if-error="メッセージ">メッセージを入力してください</div>
	</div>
	<!-- reCAPTCHA -->
	<div class="g-recaptcha" data-callback="clearcall" data-sitekey="6LceuLIZAAAAAI9Mh91wXkRIjllwHhAd9hDQxfII"></div>
	<button type="submit" name="sendButton" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中..." disabled>送信</button>
	</form>
	</div>

	<!-- disabledを削除するスクリプト -->
	<script>
	function clearcall(code) {
	if(code !== ""){
	$(':submit[name=sendButton]').removeAttr("disabled");
	}
	}
	</script>

view raw formrun_mailform.html hosted with ❤ by GitHub

実際の表示はこんな感じになります。
（注）テキストボックスのサイズとかはCSSで調整しています。

それにしても、この「私はロボットではありません」というのは、なんとも言えない表現だと思います。

近い将来、人工知能が発達して人間のように動けて自分の頭で考えられるロボットが表れたとき、そのロボットはこの「私はロボットではありません」にどう答えるのだろうか。

とても興味があります。

＜参考サイト＞
Googleの「reCAPTCHA」を5分で実装する | WEB担当者の備忘録

＜関連記事＞
お問合せフォームをformrun（フォームラン）に変えてみた