「Contact Form 7」に条件分岐機能を追加するプラグイン「Contact Form 7 Conditional Fields」

お問い合せフォームプラグイン「Contact Form 7」に条件分岐機能を追加するプラグイン「Contact Form 7 Conditional Fields」の備忘録です。

先日、「撮影会セミナーの申込フォームを作ってね」とのオファーがありまして、その中に「カメラの貸出もするから、事前に機種の予約を受け付けられるようにしてください。」との注文がありました。

何でもメーカ協賛で新製品のお披露目も兼ねているのだとか、、、

数種類のボディ（カメラ本体）があって、それぞれに組み合わせるレンズか違うらしく、組み合わせは何パターンあるんだろう？？

ボディとレンズの組み合わせ一覧表でも作って、そこから選択してもらうカタチにしようかな？？

いや、、もっとスマートな方法は無いだろうか？

そう言うわけで、こんなフォームを作ってみました↓

メールフォームの条件分岐例

レンタル希望にチェックを入れるとボディやレンズの選択画面が表示されます。

作り方

使用するプラグイン

「Contact Form 7 Conditional Fields」

上記サイトからダウンロード、もしくは［プラグイン］→［新規追加］でインストールして有効化します。

「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」で選んだフィールドの選択肢を入力します。