WEBサイトのフォームにreCAPTCHAを付ける方法　オプション

投稿日：2015年10月05日
最終更新日：

今回はオプション部分になります。HTML,JavaScriptメインです。フォームをもう少し高機能にしようと思う人はチャレンジしてみてください。今回も、こちらのサイトを参考にしました。

環境と目次

  • サーバーサイドはPHPを使用しているものとします。Googleアカウントが必要になります。
  • 1.WEBサイト登録＆APIキー確保(前々回)
  • 2.クライアント側の設定(HTML)(前々回)
  • 3.サーバー側の設定(PHP)(前回)
  • 4.クライアント側のオプション設定(JavaScript)
詳細は以下

4.クライアント側のオプション設定(JavaScript)

前々回に作成した、最小構成のフォームでも、一応機能はします。しかし、アレのままでは、reCAPTCHAを済ませなくても送信ボタンを押すことができてしまいます。なので、reCAPTCHAが済んだら送信ボタンが使えるように改良しましょう。

testform.php(フル構成) [PHP] てすと

[/PHP] 完成したらこんな感じです。

jQueryを使えるようにする

今回はjQueryを使用します。必要に応じて、こちらのページで、CDNを確認して下さい。2015年8月現在は、特にこだわりがなければ、以下のタグを使用するのが良いかと思います。 [PHP] [/PHP]


とりあえず、jQuery Core最新版の「minified」のURLをコピーして使えばいいと思います。

コードの解説

今回は、 [PHP]
[/PHP] この部分がメインになります。

送信ボタンには、disabled属性が付いているので、最初は無効化されています。ユーザーがreCAPTCHAに成功したところで、JavaScriptでdisabled属性を取り除き、送信ボタンが機能するようにしています。

data-callback属性(reCAPTCHAのやつ)の値の関数(この例ではclearcall)が、reCAPTCHA終了時に実行されます。というわけで、JavaScriptで関数を作成します。 [PHP] [/PHP] 指定した関数を実行するとき、認証コードを引数として渡すようになっているので、そちらをチェックします。今回のものは、単純に認証コードが空っぽかそうでないかだけ確かめています。今回に限ったことではありまぜんが、必ずPHP側での内容チェックが必要なので、そこだけは気をつけてください。

関連記事リスト

その他関連記事

  1. WEBサイトのフォームにreCAPTCHAを付ける方法　その1
  2. WEBサイトのフォームにreCAPTCHAを付ける方法　その2
  3. はてなブックマークボタンの設置方法　個別ページ編(WordPress)
  4. jQueryを使いはじめる
  5. はてなブックマークボタンの設置方法　個別ページ編(PHPが使えるサイト)
  6. 「Make Link ジェネレータ」で生成したリンクタグ作成用ブックマークレットの微改造版
  7. .htaccessに頼らずに(HTMLだけで)WEBページのリダイレクトを行う
投稿者名： Koguma

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

モナゲボタン モナゲボタン

Bitcoin:

Monacoin:

Litecoin: