お問い合せフォームプラグイン「Contact Form 7」に条件分岐機能を追加するプラグイン「Contact Form 7 Conditional Fields」の備忘録です。
先日、「撮影会セミナーの申込フォームを作ってね」とのオファーがありまして、その中に「カメラの貸出もするから、事前に機種の予約を受け付けられるようにしてください。」との注文がありました。
何でもメーカ協賛で新製品のお披露目も兼ねているのだとか、、、
数種類のボディ（カメラ本体）があって、それぞれに組み合わせるレンズか違うらしく、組み合わせは何パターンあるんだろう？？
ボディとレンズの組み合わせ一覧表でも作って、そこから選択してもらうカタチにしようかな？？
いや、、もっとスマートな方法は無いだろうか？
そう言うわけで、こんなフォームを作ってみました↓
メールフォームの条件分岐例
レンタル希望にチェックを入れるとボディやレンズの選択画面が表示されます。
作り方
使用するプラグイン
「Contact Form 7 Conditional Fields」
Conditional Fields for Contact Form 7 – WordPress プラグイン | WordPress.org 日本語
Contact Form 7 に条件付きロジックを追加します.
WordPress.org 日本語 
上記サイトからダウンロード、もしくは［プラグイン］→［新規追加］でインストールして有効化します。
「Contact Form 7 Conditional Fields」 の設定
Contact Form 7 →フォームの新規追加を行います。
フォームの任意の場所に［レンタル希望］のチェックボックスを追加します
タグが追加されました
条件分岐のグループタグを作成して挿入します
任意の場所に Conditional Fields Groupタブ をクリックしてグループタブを挿入します。
グループの名前は覚えやすい名前に変更します
今回は１～4個のグループを作っておきます
タグの間に条件分岐で表示したい項目を挿入してグループで囲います。
挿入した項目は以下の通りです
- group-001 → ボディの選択（チェックボックス）
- group-002 → レンズ群A（ドロップダウンメニュー）
- group-003 → レンズ群B （ドロップダウンメニュー）
- group-004 → レンズ群C （ドロップダウンメニュー）
ラベルを追加して体裁を整えます
Contact Form 7 フォーム例
<label>カメラの貸出をご希望の場合はチェックを入れてください。</label>
[checkbox rental use_label_element "レンタル希望"]
[group group-001]
<label>ボディの選択をしてください </label>
[checkbox* hontai use_label_element exclusive "ボディ-A" "ボディ-B" "ボディ-C"]
[/group]
[group group-002]
<label>レンズを選択してください</label>
[select menu-lens01 include_blank "レンズ10-24mm" "レンズ 300mm" "レンズ 16-55mm" "レンズ 16-80mm"]
[/group]
[group group-003]
<label>レンズを選択してください </label>
[select menu-lens02 include_blank "レンズ 63mm" "レンズ 120mm" "レンズ 64mm" "レンズ 23mm" "レンズ 45mm"]
[/group]
[group group-004]
<label>レンズを選択してください </label>
[select menu-lens03 include_blank "レンズ 140mm" "レンズ 200mm" "レンズ 100-400mm" "レンズ 35㎜/F1.4" "レンズ 60㎜/F2.4"]
[/group]フォームを、いったん保存します（重要）
「Conditional Fields」のタブで、条件を指定する
「Conditional Fields」のタブを選択して「+ add new conditional rule」をクリックします。
「Conditional Fields」 のメニューは以下の通りです。
| 項目名 | 内容 |
|---|---|
| ①「–Select group–」 | 作成したグループが表示されます。 |
| ②「–Select fields–」 | フィールドが表示されます。 |
| ③「equals」 | 「equals（表示）」「not equals（非表示）」の2種類から選ぶことができます。 |
| ④「Value」 | 「–Select fields」で選んだフィールドの選択肢を入力します。 |
まず「レンタルを希望」するかどうかの設定を行います。
チェックボックス rental にチェックを入れた場合、カメラ本体（ボディ）の選択画面が表示されます。
- group-001 →項目 rental で"レンタル希望" を選択した場合、項目 hontai が表示されます。
続けて 「+ add new conditional rule」 から、さらに条件を追加します。
- group-002 →項目 hontai で"ボディ-A" を選択した場合、項目 lens01 が表示されます。
- group-003 →項目 hontai で"ボディ-B" を選択した場合、項目 lens02 が表示されます。
- group-004 →項目 hontai で"ボディ-C" を選択した場合、項目 lens03 が表示されます。
以下のようなフォームが完成しました
※条件分岐の部分だけ表示させましたが、雰囲気は伝わると思います。
今回は、一回触っただけでは忘れてしまいそうなので備忘録をつけてみました。
エンジニアでも無い管理人でも、ここまでできるなんて驚きです ^^;)
触ってみて凄く便利だと感心しました！応用範囲が広そうですね～
ワードプレスのプラグイン♡エライ！
