Contact Form 7 チェックボックスとラジオボタン!

contact-form7

 Contact Form 7 でお問い合わせを作っているとき、気になったのがチェックボックスとラジオボタンとクイズとreCAPTCHA。

まず、フォームの項目の構造について振り返り、それぞれ試しに動作させてみました。

スポンサーリンク
スポンサーリンク

フォームの項目の構造

<labal>お名前(必須)

       [ text*  your-name ] </label>

 各項目は、pタグではさまれ、項目のタイトル表示部分があり、改行。次にフォーム項目のショートコードがあり、pタグの終了、となっています。

上のフォーム構造を表示させると、

お名前(必須)

            

となります。

イラスト、PC

 ショートコードは作成挿入できますが、そのショートコードが何かわかるようにタイトルを設定する必要があります。

Contact Form 7 編集画面へ

 メニュー → コンタクトフォーム

contactform7

contactform7

 ここで、上の方の新規追加ボタンをクリックし、タイトルを『動作確認フォーム』(仮称)としました。

contactform7

 以下のチェックボックス、ラジオボタン、クイズの追加は、ここからスタートです。

新規追加した後は、コンタクトフォーム一覧で、編集したいタイトル下にある『編集』をクリック。

contactform7

この編集をクリックすると、フォームの編集画面が出てきます。

チェックボックス追加

 操作は、フォーム設定 → メール設定、の二段階。

フォーム設定

 チェックボックスを挿入する位置を決めます。挿入したい位置で、改行1回しました。

contactform7

チェックボックスボタンをクリック。

contactform7

contactform7

ここで、名前とオプションを入力。

contactform7

タグを挿入をクリック。挿入されるのは [checkbox  yourbreakfast  “ごはん” ”パン” ”シリアル”]  の部分。<label>タグと項目タイトルは、ここの画面で入力。

contactform7

入力が正しいかどうか確認のため、最下段の保存ボタンをクリック

 先に入力済みのメッセージ本文他では、<label></label>で挟んでいるので、checkboxも挟んでみたのですが、エラー・・・

contactform7

画面の最上段と最下段にエラーメッセージが出力されていて、入力欄が赤線で囲まれてます。

原因は、ひとつのラベルタグ内に『あなたのいつもの朝食は?』と『checkbox〜』の二つが含まれているからでした。

なので、分ければいいと・・・

』

あなたのいつもの朝食は、を<label>で挟んで、保存ボタンをクリック。

OK ^_^

checkboxは、それ単体でラベルとみなされるようです。

メール設定

contactform7

メッセージ本文へ、次のオレンジ枠内の文字列を入力。

contactform7

保存します。

contactform7

contactform7

以上で、メール設定終了。

動作確認

 フォーム一覧を表示。メニュー → コンタクトフォーム

contactform7

contactform7

テスト用に作成したのは、動作確認フォーム

contactform7

該当するショートコードをクリックすると反転表示されます。このコードをテスト用の固定ページへコピーします。

contactform7

メニュー → 固定ページ:新規追加。

contactform7

タイトルに『動作確認ページ』と入力。記事欄に、さきほどコピーしたショートコードを貼り付けます。

contactform7

右肩あたりのプレビューボタンをクリック。

contactform7

 チェックボタンが動作していることを確認できました。なお、このページは後悔しないので、プレビューで確認するだけです。

ラジオボタン追加

フォーム設定

 コンタクトフォーム編集画面へ移動。

contactform7

ラジオボタンをクリック

contactform7

オレンジ枠で囲まれた、名前とオプションを入力。下方のタグを挿入の左側は、自動で入力されます。

タグを挿入をクリック。

contactform7

下から2行目に挿入されました。

contactform7

タイトルを入力して、保存をクリック。

エラー出なければ、メール設定へ

メール設定

 メールタブをクリック。

contactform7

オレンジ枠内の文字列入力し、保存します。

contactform7

動作確認

 チェックボックスの動作確認で、すでに固定ページは作成しているので、その固定ページをプレビューします。

contactform7

オレンジ枠のように、期待通り表示されました。

クイズの追加

フォーム設定

 コンタクトフォーム編集画面へ移動。

contactform7

クイズボタンをクリック。

contactform7

名前、クイズと回答、を入力します。下方のタグを挿入の左側は自動入力。

クイズと回答の書き方は、入力欄の下の例を参考にしました。

タグを挿入ボタンをクリック

contactform7

クイズなので、タイトルは不要。確認のために保存ボタンをクリック。

エラー出なければ、メール設定へ。

メール設定

 メールタブをクリックし、次のオレンジ枠内の文字列を入力。

contactform7

保存します。

エラー出なければ、動作確認へ

動作確認

チェックボックス、ラジオボックスと同じフォームであれば、同じ固定ページをプレビュー表示すれば、動作が確認できます。

contactform7

ここで、試しに日本の首都をハワイと入力し、送信ボタンをクリック。

 クイズの答えが正しくないので、送信されませんでした。このクイズもボット対策に使えそうに思うのですが・・・

contactform7

答えに東京を入力し、送信ボタンをクリック。contactform7

送信できました。

メール確認

 チェックボックス、ラジオボタン、クイズのテスト送信結果。

contactform7

届いています。

内容は、こんな感じ。

contactform7

よくできているなぁ、とても楽に作成できます。

reCAPTCHA

 あと気になってるのが、reCAPTCHA。ボットでないことを証明するのに画像選択という方法を利用します。

ボッド対策で、文字を入力したり、数値計算をさせたりする方式の画像選択版です。

スマホやタブレットでは、いちいち文字入力する手間が省け、画像をタッチ選択できるので、とても便利な方法です。もちろん、PCもマウスかタッチパッドで選択できるので入力ミス削減や処理時間短縮に効果ありと思います。

イラスト、PC

 知らないだけかもしれないのですが、承諾確認チェックボックスをプログラムでチェックすることができるのでしょうか?

ボッドは年々能力が向上していると聞きます。しばらく運用してみて、ボットがくるかどうか確認してみよう。

 reCAPTCHAを活用するためには、サイトごとにAPIキーが必要です。

すぐに必要性を感じていないので、別記事でアップすることにします。

スポンサーリンク
スポンサーリンク
スポンサーリンク