ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

Contact Form 7のお問い合せフォームを条件によって変更する方法

リモートでも新宿に行くことが多いデザイナーのNNです。

Contact Form7を使って、フォームの条件分岐ができるConditional Fields for Contact Form 7をご紹介します。ANDによる条件分岐もできるだけではなく、選択によってメールに差し込む文章も変えることができる優れたアドオン・プラグインです。

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

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

Conditional Fieldsのフォームサンプル

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

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

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

Conditional Fields for Contact Form 7

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

フォームの条件分岐

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

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


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

Conditional Fields for Contact Form 7


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

Conditional Fields for Contact Form 7

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


同じように、条件2,条件3も作っていきます。

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


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

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

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


同様に、条件2,条件3も追加していきましょう。
「+add new Conditional rule」ボタンをクリックして追加していきます。

Conditional Fields


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

フォームの条件分岐

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

メールの作成

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

メール
[group-yes][yes][/group-yes]
[group-no][no][/group-no]
[group-neither][neither][/group-neither]

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

メール
[group-yes]
ご回答ありがとうございました。下記の内容で承りました
[yes]
[/group-yes]

[group-no][no][/group-no]
[group-neither][neither][/group-neither]

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

ANDを使った条件分岐

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

フォームの条件分岐

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

フォームのAND条件分岐


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

フォームのAND条件分岐

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

フォームの条件分岐ノットイコール

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

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

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

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ