Contact Form 7 で条件分岐（項目の出し分け）を実装する方法｜聞かなくていいことを聞かないフォームへ

問い合わせフォームの項目は、増やせば増やすほど情報が取れる一方で、入力の負担が増えて離脱を招きます。
かといって減らせば、営業側が「結局これはどういう案件なのか」を電話やメールで聞き直すことになり、初回接触から見積もりまでの往復が増えます。

この二律背反を解くのが 条件分岐（項目の出し分け） です。
「お問い合わせ種別」で見積もりを選んだ人にだけ予算とスケジュールを聞き、採用応募を選んだ人には職種を聞く。
全員に全項目を見せるのをやめるだけで、1人あたりの入力量は減り、それでいて必要な情報は取れるようになります。

ところが Contact Form 7（CF7）には条件分岐の機能が標準にありません。
この記事では、CF7で条件分岐を実装する3つの方法を、実装の手間と長期の保守の観点から比較します。

CF7 標準では条件分岐ができない

CF7のフォームタグには、[text] [select] [checkbox] といった入力欄を置く仕組みはありますが、「Aを選んだときだけBを表示する」という条件を持たせる仕組みがありません。
確認画面やマルチステップと同じく、条件分岐も標準のスコープ外です。

そのため、CF7で条件分岐を実現する道は次の3つになります。

1. 条件分岐に対応した拡張プラグインを入れ、出し分けたい範囲を囲む
2. 条件分岐専用のプラグインを入れ、専用タグと管理画面のルール設定で組む
3. JavaScriptで表示切替を自前で書く

どれを選んでも見た目上の挙動は似ますが、あとから項目を足すとき・別のサイトへ横展開するときの手間が大きく変わります。

条件分岐で効くのは「離脱」と「聞き直し」の両方

条件分岐は見た目の親切さの話に見えますが、実際に改善するのは数字です。

入力の完了率は、1画面あたりの項目数に素直に反応します。
見積もり・採用・サポートを1本のフォームで受けている場合、全員に全項目を見せると、自分には関係ない欄が視界に入り続けます。
関係のある項目だけを出せば、体感の長さは半分近くになります。
項目数そのものが多い場合は、マルチステップフォームで画面を分ける手も併用できます。

初回接触から見積もりまでの往復も減ります。
「予算感」「希望納期」「現在のCMS」といった、案件によっては必須だが全員には聞けない情報を、該当する人にだけ確実に聞けるからです。
問い合わせ1件あたりのやり取り回数が1往復減るだけで、受注までのリードタイムは体感で変わります。

つまり条件分岐は、フォームの離脱を減らしながら、取れる情報の密度を上げるという、通常はトレードオフになる2つを同時に改善する数少ない打ち手です。

方法1：data属性で囲んで出し分ける（無料・コード最小）

実装の手軽さ ★★★

拡張プラグイン Frontierline Forms の無料版に含まれる条件分岐は、出し分けたい範囲をHTMLの div で囲み、data属性で条件を書くだけです。
CF7のフォーム編集画面にそのまま書けるため、functions.php もJavaScriptも触りません。

CF7のフォーム編集画面に、次のように書きます。

[select* contact-type "見積もり" "採用応募" "その他"]

<div data-cf7mp-show-if="contact-type" data-cf7mp-show-value="見積もり">
  [text budget placeholder "ご予算"]
  [text deadline placeholder "希望納期"]
</div>

<div data-cf7mp-show-if="contact-type" data-cf7mp-show-value="採用応募">
  [text position placeholder "希望職種"]
</div>

「お問い合わせ種別」で見積もりが選ばれたときだけ予算と納期が現れ、採用応募なら職種が現れます。
判定は入力や選択のたびに即座に走るので、ページの再読み込みは発生しません。

条件の書き方は、完全一致以外も指定できます。

属性	役割
data-cf7mp-show-if	判定に使うフィールド名（必須）
data-cf7mp-show-value	この値と完全一致したら表示
data-cf7mp-show-contains	この文字列を含んでいたら表示
data-cf7mp-show-op	判定方法（eq 完全一致 / ne 不一致 / contains 部分一致 / not-contains 部分不一致 / filled 入力あり / empty 未入力）

チェックボックスやセレクトの複数選択にも対応しており、選ばれている値をまとめて見て判定します。
ルール数に制限はありませんので、種別が5つあっても10あっても同じ書き方で足していけます。

この方式の実務上の利点は、非表示になった範囲の入力欄が自動的に無効化される点です。
単にCSSで隠しただけの実装と違い、非表示の項目は送信データにも通知メールにも入りません。
「画面には出ていなかったのに、メールには空欄の項目がずらりと並ぶ」という、あとから送信ログを読み返すときに厄介な状態を避けられます。

一方で、条件はHTMLに直接書くため、管理画面のUIでルールを一覧管理する形ではありません。
ルールがどこにあるかはフォーム編集画面を見れば分かる、という素直さと引き換えです。
確認画面・マルチステップ・送信ログのDB保存も同じ無料版に入っているため、フォーム周りの機能を1本にまとめたい場合は、この方式が最も保守対象を増やしません。

方法2：条件分岐専用プラグインを使う

実装の手軽さ ★★☆

条件分岐だけを担当する専用プラグインもあります。
代表的なのが Conditional Fields for Contact Form 7 で、こちらは [group] タグで範囲を囲み、CF7編集画面に追加される専用タブでルールを組む方式です。

[group estimate]
  [text budget placeholder "ご予算"]
[/group]

そのうえで、専用タブから「contact-type が 見積もり と一致したら estimate を表示する」というルールを追加します。
条件をGUIで一覧・編集できるのが最大の利点で、ルールが十数本に増えても管理しやすい設計です。
グループの入れ子にも対応します。

注意点として、ルールの値は大文字・小文字を厳密に区別します。
選択肢のラベルを後から変えたのにルール側の値を直し忘れると、条件が静かに効かなくなります。
メール本文側でも [group名]…[/group名] の形でグループ単位の出し分けができるため、通知メールの見た目まで作り込みたい場合はこの方式が向きます。

一方で、プラグインが1本増えます。
CF7に確認画面・マルチステップ・保存・通知を足していくと、機能ごとに別プラグインを積む構成になりがちで、更新停止や競合のリスクが機能の数だけ増えます。
この積み上がり方の問題は Contact Form 7 の拡張プラグインおすすめ比較 で整理しています。

方法3：JavaScript で自前実装する

実装の手軽さ ★☆☆

プラグインを増やさず、テーマのJavaScriptで表示切替を書く方法もあります。
セレクトの change を拾って、対象ブロックの style.display を切り替えるだけなら、20行ほどで動きます。

ただし、実務で運用に乗せようとすると、次の対応がすべて自前になります。

• 非表示にした項目の入力欄を無効化する（隠すだけでは送信値に残ります）
• チェックボックス・ラジオ・複数選択セレクトの値の取り方を揃える
• CF7がAjax送信後にフォームをリセットしたときの再初期化
• 確認画面やマルチステップと併用したときの、画面切替との整合
• CF7本体のバージョンアップでマークアップが変わったときの追随

特に1つ目は見落としやすく、CSSで隠しただけの項目は送信内容に残り続けます。
管理者宛メールに関係のない空欄が並ぶだけならまだしも、選択肢を変更した後の古い値がそのまま飛ぶこともあります。

自前実装が正解になるのは、条件が1つだけで今後も増えないことが確定していて、なおかつプラグインを一切増やせない制約があるケースに限られます。

3つの方法の選び方

	data属性で囲む	専用プラグイン	JavaScript自作
実装の手軽さ	★★★	★★☆	★☆☆
コードを書くか	不要（HTMLで囲むだけ）	不要	必要
ルール数の上限	なし	なし	実装次第
ルールの管理場所	フォーム編集画面	専用タブのGUI	テーマのJS
非表示項目の送信値	自動で除外	プラグイン仕様に依存	自前で対応
確認画面・保存との統合	同じプラグインで完結	別プラグインが必要	すべて自前
費用	無料	無料	無料（工数は別）

条件分岐だけが必要で、ルールをGUIで細かく管理したいなら専用プラグインが向きます。
条件分岐と一緒に確認画面・マルチステップ・送信ログの保存も要るのであれば、1本で完結する方が保守対象が増えず、更新停止のリスクも1本分で済みます。

条件分岐でつまずく3つの落とし穴

1. 出し分ける項目を必須にしている

最も多いのがこれです。
CF7の必須チェックはサーバー側でも働くため、画面上で非表示になっていても、必須指定（[text* ...]）が残っていると条件に当てはまらない人が送信できなくなる可能性があります。

対策はシンプルで、出し分ける項目は必須にしないことです。
どうしても必須にしたい情報は、常に表示される側の項目に置くか、種別ごとにフォームそのものを分けます。

2. メール本文のテンプレートを直していない

項目を出し分けても、メールテンプレート側が全項目を並べたままだと、通知メールには空欄がずらりと並びます。
送信データから除外される実装（方法1）であれば、空欄が出るだけで実害は小さいものの、読みづらさは残ります。
項目が増えるたびにテンプレートを直す運用が続くなら、送信ログをデータベースに保存して管理画面で一覧するほうが、メールの体裁に依存せずに済みます。

3. 確認画面・マルチステップとの相性を確かめていない

条件分岐は、確認画面やステップ分割と組み合わせたときに挙動が複雑になります。
ステップ2で選んだ内容によってステップ3の項目が変わる、といった構成は珍しくありません。
別々のプラグインで組むと、どちらが先に表示を切り替えるかで表示崩れが起きることがあります。
同じプラグイン内で完結していれば、この種の噛み合わせを自分で検証する必要がありません。
実装手順は マルチステップフォームの設定ガイド と 確認画面・完了画面の設定ガイド にまとめています。

確認画面・マルチステップと組み合わせる

条件分岐が本当に効くのは、単体で使うときではなく、「入力 → 確認 → 送信」の流れ全体を設計するときです。

たとえば見積もりフォームなら、STEP1で種別を選ばせ、STEP2でその種別に応じた項目だけを出し、STEP3の確認画面では実際に表示された項目だけを並べる。
この一貫性があると、送信直前の確認画面で「なんでこの項目が空欄なんだろう」と迷わせずに済み、最後の一押しで離脱する確率が下がります。

確認画面の追加方法は Contact Form 7 に確認画面を追加する方法、ステップ分割は Contact Form 7 で多段階フォームを作る方法 で個別に解説しています。
条件分岐・確認画面・マルチステップ・送信ログのDB保存は、いずれも Frontierline Forms の無料版に含まれるため、順番に足していっても入れるプラグインは1本のままです。

まとめ

Contact Form 7 には条件分岐が標準にないため、全員に全項目を見せるフォームになりがちです。
その結果、入力の負担で離脱が増え、同時に「案件によっては聞きたい情報」を取り逃がします。
条件分岐は、この2つを同時に改善できる数少ない打ち手です。

実装方法は、出し分けたい範囲をHTMLのdata属性で囲む、条件分岐専用プラグインを[group]タグとGUIで組む、JavaScriptで自前実装する、の3つです。
条件分岐だけをGUIで細かく管理したいなら専用プラグイン、確認画面やマルチステップ・送信ログの保存もまとめて必要なら、1本で完結する拡張プラグインの無料版から始めるのが最も無理がありません。
まずは Frontierline Forms 無料版で条件分岐を試し、必要になったら通知や外部連携へ広げてください。
分岐設計や改修ごとのご相談は お問い合わせフォーム からどうぞ。

よくある質問

Q. Contact Form 7 に条件分岐の機能はありますか？

標準にはありません。
Contact Form 7 は、選んだ値に応じて入力項目を出し分ける機能を持たないため、全員に全項目が表示されます。
条件分岐を実装するには、条件分岐に対応した拡張プラグインを使うか、JavaScriptで表示切替を自前で書く必要があります。

Q. Contact Form 7 の条件分岐は無料で使えますか？

使えます。
Frontierline Forms の無料版に条件分岐が含まれており、出し分けたい項目をHTMLのdata属性で囲むだけで、選択内容に応じた表示・非表示を設定できます。
ルール数の制限はなく、非表示になった範囲の入力欄は自動的に無効化されるため、送信内容にも混ざりません。

Q. 条件分岐で非表示にした項目は、送信内容やメールに含まれますか？

含まれません。
Frontierline Forms の条件分岐では、非表示になった範囲の input・textarea・select が自動的に無効化されるため、その項目は送信データにも通知メールにも入りません。
表示されていた項目だけが記録されるので、あとから送信ログを見返したときも解釈に迷いません。

Q. 出し分ける項目を必須にしても大丈夫ですか？

出し分ける項目は必須にしないことをおすすめします。
Contact Form 7 の必須チェックはサーバー側でも働くため、画面上で非表示になっている項目を必須のままにすると、条件に当てはまらない人が送信できなくなる可能性があります。
必須にしたい情報は、常に表示される側の項目に置くのが安全です。