このblogを書いていて一番困るのが「ネタ」です。日々のIT生活(^_^;)で「あーこうやってやるのか！」とか「これは便利」とか思ったことを主にネタにしていますが、それでも毎日のことになるとだんだん尽きてきます。そんなとき八王子WordPressもくもく会や知り合いの方に「こんなことしたいんだけど」と相談されることが結構ネタになります。
しかし、それもリアルで会ったり話したり、と機会に限界があります。そこで、Webサイトになにかちょっと一言もらえるようなフォームを設置してみようかと思いました。だれでも簡単に、ということは画像認証が必要だなということでCntact Form 7に画像認証を付けたいと思います。
何か一言もらうフォームの内容を考える
気軽に一言もらいたい、しかし確実な返事は期待しないでもらいたい(^_^;ということでどんなフォームになるか、考えてみました。Contact Form 7でこんな風に作ってみました。
まだ構想段階で煮詰まってませんが大体こんな感じにしたいと思います。気軽に書いてもらうためにお名前もしくはニックネームは任意で、内容だけでも送ることができるようにしたいと思いました。
スパムメールが来ないように画像認証を付けたい！
ということになると…心配になるのがスパムメールです。たしかContact Form 7には画像認証があったはずです。
reCAPTCHAの設定をする
Contact Form 7の編集画面に reCAPTCHA というボタンがあるのでクリックしてみます。
すると、このようになにやら設定が必要そうでした。 reCAPTCHA をクリックします。
Contact Form 7の reCAPTCHA 説明ページです。Googleのアカウントが必要ということです。
下の方にある reCAPTCHA 管理ページ をクリック
Googleにログインしていない場合はログイン画面が出るのでログインします。
ログインするとこのようなフォームがあるので、画像認証を付けたいフォームを置くURLをLabelとDomainsの両方に入力して Register をクリック
すると、このようにサイトキーとシークレットキーが表示されます。このキーを後で使うのでコピペするかこのまま開いておきます(もし閉じてしまってももう一度 https://www.google.com/recaptcha/admin に行けば見ることができます)。
ダッシュボード お問い合わせ＞インテグレーション をクリックします。
この画面が出るので キーを設定する をクリック
先ほどのサイトキーとシークレットキーをコピペして、保存をクリックします
このように表示され、reCAPTCHAの設定が終わりました。
reCAPTCHAをフォームに追加する
Contact Form 7の編集画面でreCAPTCHAを追加してみたいと思います。
編集画面で reCAPTCHA をクリック
設定が済んでいるので今度はちゃんとこの画面が出ました。タグを挿入をクリック
タグが挿入されました。適当なところに入ってしまったのでこのタグを
下の方に移動して保存します。
画像認証が付いたリクエストフォームはこんな感じになりました！
フォームを表示させてみると、
このように 私はロボットではありません という画像認証が表示されました(^^)/
もしもここにチェックを入れずに、
フォームを送ろうとすると、
このように あなたがロボットでないことを証明してください。 というエラーメッセージが表示されて、送信自体もされないようになりました。
チェックを付けて
送信すると、
ちゃんと送信されました(^^)/
まだ荒削りでメニューにも追加していませんが今回作ったフォームのリンクをこっそりここに貼っておきます。よろしければリクエストくださいね(^^)/
まとめ:reCAPTCHAはContact Form 7だけでなく他のフォームでも使える
今回使った、reCAPTCHAはGoogleが提供しているもののようです。
https://www.google.com/recaptcha/intro/index.html
reCAPTCHAのページの
この辺の情報を使えばContact Form 7だけでなく他のフォームでも使えそうですね！
[amazon_searchlink search=”WordPressデザイン”]
コメント