2020年7月18日

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

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

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

5年ぐらいの間に1回あったか無いかぐらいです。(笑)

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

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




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


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

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

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

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


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

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


次に、フォームタグの中に下記を追記します。
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx"></div>
(注)xxxxxxxxxxxxxxxxxxxxxxxの部分にサイトキーを書いてください。

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

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

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

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

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

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


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


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

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

とても興味があります。


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

<関連記事>
お問合せフォームをformrun(フォームラン)に変えてみた



スポンサーリンク