画像認証付きのフォームをContact Form 7で作ってみた

このblogを書いていて一番困るのが「ネタ」です。日々のIT生活(^_^;)で「あーこうやってやるのか!」とか「これは便利」とか思ったことを主にネタにしていますが、それでも毎日のことになるとだんだん尽きてきます。そんなとき八王子WordPressもくもく会や知り合いの方に「こんなことしたいんだけど」と相談されることが結構ネタになります。
しかし、それもリアルで会ったり話したり、と機会に限界があります。そこで、Webサイトになにかちょっと一言もらえるようなフォームを設置してみようかと思いました。だれでも簡単に、ということは画像認証が必要だなということでCntact Form 7に画像認証を付けたいと思います。

何か一言もらうフォームの内容を考える

気軽に一言もらいたい、しかし確実な返事は期待しないでもらいたい(^_^;ということでどんなフォームになるか、考えてみました。Contact Form 7でこんな風に作ってみました。

まだ構想段階で煮詰まってませんが大体こんな感じにしたいと思います。気軽に書いてもらうためにお名前もしくはニックネームは任意で、内容だけでも送ることができるようにしたいと思いました。

スパムメールが来ないように画像認証を付けたい!

ということになると…心配になるのがスパムメールです。たしかContact Form 7には画像認証があったはずです。

reCAPTCHAの設定をする

Contact Form 7の編集画面に reCAPTCHA というボタンがあるのでクリックしてみます。

img_56a6dd996d98d

すると、このようになにやら設定が必要そうでした。 reCAPTCHA をクリックします。

Contact Form 7 reCAPTCHA 説明ページです。Googleのアカウントが必要ということです。

下の方にある  reCAPTCHA 管理ページ をクリック

Googleにログインしていない場合はログイン画面が出るのでログインします。

ログインするとこのようなフォームがあるので、画像認証を付けたいフォームを置くURLLabelDomainsの両方に入力して 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 sponsored link] WordPressデザイン 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る