お問い合せフォームで、選択した項目によって、次の項目内容をリアルタイムに変更したい場合があります。

Contact Form 7を利用したフォームの条件分岐が手軽に設定できるプラグインが「Conditional Fields for Contact Form 7」です。

Conditional Fieldsのフォームサンプル

このプラグインが凄いのは「AND（且つ）」の分岐が簡単に設定できる点で、その点もご紹介いたします。

フォームの条件分岐の方法

Conditional Fields for Contact Form 7をインストールすると「Conditional Fields」タブが追加されます。

サンプルとして下記の様な３つの条件分岐を設定してみます。

条件分岐のフォームを作成

まずは通常通りフォームを作っていきます。
右中括弧の箇所が条件分岐によって表示を変えたいフォーム要素になります。
３つの条件分岐があるのが分かると思います。

---

「Conditional Fields Group」ボタンをクリックして「Name」に１つ目の条件分岐の名称（任意）を記入します。

---

グループのフォームタグが追加されました。

このままでは機能しないので、条件の１つ目を「group」タグで括るように修正します。

---

同じように、条件２，条件３も作っていきます。

完了したら「保存」ボタンをクリックします。

---

続いて条件分岐の設定を行っていきます。「Conditional fields」タブをクリックします。

1. 条件１の「group-yes」を設定します
2. 選択肢を設定した「test-1」を設定します
3. equals（イコール）にします
4. 選択肢の「test-1」で「はい」を選択した時に条件1を表示するようにしました

設定が終わったら「保存」ボタンをクリックします。

---

同様に、条件２，条件３も追加していきましょう。
「＋add new Conditional rule」ボタンをクリックして追加していきます。

---

フォームを保存して、実際の動作を見てみましょう。

チェックボックスの選択で、次のフォーム項目が変わっていますね。

メールの作成

メールには下記のように記載すると条件に合わせてメールに記入されます。

メール

条件に合わせてメールに記入されるので、下記のようなこともできます。

メール

条件分岐だけではなく、選択によってメールにいろいろな文章を差し込むこともできるので、活用方法が広がりますね。

ANDを使った条件分岐

下記のサンプルでは「2名様」且つ「いいえ」を選択した場合のみ、次の選択肢が表示されるようにしています。

まずは通常通りの分岐を作ります。
作り終わったら「And」ボタンをクリックします。

---

AND条件を追加して「保存」ボタンを押すと完了です。

ちなみに「not equals（ノット・イコール）」にすると「いいえ」以外を選択した場合となります。

分岐で表示された選択肢を、さらに分岐させることもできるのでお店の予約フォームなどに活用できそうですね。

Contact Form 7の便利な機能を紹介しているのでよろしければご覧ください。

フォームの改善を検討されている方はお気軽にご相談ください。