Contact Form 7で条件分岐を実装する方法｜Conditional Fields活用ガイド【制作案件向け】

当ページのリンクには広告が含まれています。

2026年5月11日2026年5月14日

クライアントから「お問い合わせ種別によって入力項目を変えたい」と言われたことはありませんか？

Contact Form 7単体では条件分岐ができませんが、「Conditional Fields for Contact Form 7」を使えばコードなしで実装できます。

この記事では、制作案件でよく出てくる3つのパターンを実例付きで解説します。基本的な仕組みを理解すれば、応用も効くようになります。

この記事でわかること👇️

Conditional Fields for Contact Form 7の仕組みと基本操作
【パターン①】お問い合わせ種別で項目を出し分ける
【パターン②】法人・個人で入力項目を切り替える
【パターン③】「その他」を選んだら自由入力欄を表示する
条件分岐をメール本文にも反映させる方法
よくあるハマりポイントと対処法

この記事はContact Form 7の基本設定が完了している前提で進めます。まだの方はこちらをご覧ください。 👉 Contact Form 7の使い方【コーポレートサイト向け】

Conditional Fields for Contact Form 7とは

Contact Form 7に条件付きロジックを追加できるプラグインで、回答内容によって次に表示される項目内容をリアルタイムに変えられます。

基本機能は無料で使えます。複雑な分岐でなければ無料版で十分対応できます。

仕組みの概要

条件分岐は以下の3要素で成り立っています。

トリガー：何を選んだら（ラジオボタン・チェックボックス・セレクトボックス）
グループ：どの項目を（[group]タグで囲んだ範囲）
ルール：表示する/非表示にする

この3つを設定するだけです。難しそうに見えますが、慣れれば5分で設定できます。

インストール方法

管理画面 → プラグイン → 新規追加で「Conditional Fields」と検索します。

⚠️ プラグイン名が紛らわしいので注意。「Conditional Fields for Contact Form 7」が正しいプラグインです。作者は「Jules Colle」になっています。

有効化すると、コンタクトフォームの編集画面に「条件付きフィールド」タブと「条件付きフィールドグループ」ボタンが追加されます。

基本操作：設定の流れ

どのパターンでも、設定の流れは同じです。

STEP 1. フォームタブ：トリガーになる選択肢を作る
STEP 2. フォームタブ：表示切り替えしたい項目を[group]タグで囲む
STEP 3. 条件付きフィールドタブ：ルールを設定する
STEP 4. メールタブ：メール本文にも[group]タグを追加する（必要な場合）

STEP 1〜3が必須、STEP 4は通知メールにも条件を反映させたい場合に行います。

パターン①｜お問い合わせ種別で項目を出し分ける

制作案件で一番多いパターンです。「ご用件」のラジオボタンで選んだ内容によって、次の入力項目を変えます。

完成イメージ

ご用件：
○ Web制作のご依頼　→「制作内容」「ご予算」「希望納期」を表示
○ 資料請求　　　　→「送付先住所」を表示
○ その他　　　　　→「お問い合わせ内容」（自由入力）を表示

STEP

STEP 1. ラジオボタンを作る

フォームタブで、ラジオボタンタグを挿入します。

<label>ご用件</label>
[radio inquiry-type default:1 "Web制作のご依頼" "資料請求" "その他"]

タグ名（inquiry-type）は後でルール設定に使うので、わかりやすい名前をつけておきましょう。

STEP

STEP 2. グループタグで項目を囲む

「条件付きフィールドグループ」ボタンから、グループを3つ作ります。

グループ名	対応する選択肢
`group-seisaku`	Web制作のご依頼
`group-shiryo`	資料請求
`group-sonota`	その他

フォームタブのコードはこのようになります。

<label>ご用件</label>
[radio inquiry-type default:1 "Web制作のご依頼" "資料請求" "その他"]

[group group-seisaku]
<label>制作内容</label>
[textarea seisaku-naiyou]
<label>ご予算</label>
[select yosan "〜30万円" "30〜50万円" "50万円〜" "未定"]
<label>希望納期</label>
[date kibou-noki]
[/group]

[group group-shiryo]
<label>送付先住所</label>
[text jusho]
[/group]

[group group-sonota]
<label>お問い合わせ内容</label>
[textarea sonota-naiyou]
[/group]

STEP

STEP 3. ルールを設定する

「条件付きフィールド」タブを開き、「新規条件付きフィールドルールを追加」をクリックします。

3つのルールをそれぞれ設定します。

Show（グループ）	if（フィールド）	equals（値）
group-seisaku	inquiry-type	Web制作のご依頼
group-shiryo	inquiry-type	資料請求
group-sonota	inquiry-type	その他

設定後に「保存」を忘れずに。

ポイント：デフォルトで最初の選択肢が選ばれた状態にするには、ラジオボタンタグにdefault:1を入れます。これで画面読み込み時から対応するグループが表示されます。

パターン②｜法人・個人で入力項目を切り替える

コーポレートサイトでよく出てくるパターンです。法人か個人かで、必要な情報が変わります。

完成イメージ

ご利用区分：
  ○ 法人　→「会社名」「部署名」「担当者名」を表示
  ○ 個人　→「お名前」のみ表示

フォームコード

<label>ご利用区分</label>
[radio client-type default:1 "法人" "個人"]

[group group-hojin]
<label>会社名 *</label>
[text* company-name]
<label>部署名</label>
[text department]
<label>担当者名 *</label>
[text* staff-name]
[/group]

[group group-kojin]
<label>お名前 *</label>
[text* your-name]
[/group]

<label>メールアドレス *</label>
[email* your-email]

ルール設定

Show	if	equals
group-hojin	client-type	法人
group-kojin	client-type	個人

注意点：グループ内のフィールドに必須（*）をつけると、非表示状態でもバリデーションエラーが発生することがあります。非表示グループ内の必須フィールドはバリデーションエラーを引き起こしませんが、念のため動作確認を行いましょう。

パターン③｜「その他」を選んだら自由入力欄を表示する

シンプルですが使用頻度が高いパターンです。選択肢に「その他」を用意して、選ばれた場合だけ追記欄を出します。

完成イメージ

ご用件：
  □ 新規サイト制作
  □ 既存サイトの修正
  □ 保守・管理のご依頼
  □ その他　→ 自由入力欄を表示

フォームコード

チェックボックスでも同様に設定できます。

<label>ご用件（複数選択可）</label>
[checkbox inquiry-check "新規サイト制作" "既存サイトの修正" "保守・管理のご依頼" "その他"]

[group group-free]
<label>その他の内容を教えてください</label>
[textarea free-text]
[/group]

ルール設定

Show	if	equals
group-free	inquiry-check	その他

チェックボックスの場合も、equalsに選択肢のテキストをそのまま入力すればOKです。

条件分岐をメール本文にも反映させる

フォームの条件分岐を設定しても、通知メールには全項目が入ってしまいます。条件分岐を設定したら、自動送信メールの文章にも条件分岐させましょう。条件分岐の時のみ表示させるには、フォームと同じようにグループの名前で囲みます。

メールタブの本文に、以下のように[group]タグを追加します。

ご用件：[inquiry-type]

[group group-seisaku]
制作内容：[seisaku-naiyou]
ご予算：[yosan]
希望納期：[kibou-noki]
[/group]

[group group-shiryo]
送付先住所：[jusho]
[/group]

[group group-sonota]
お問い合わせ内容：[sonota-naiyou]
[/group]

これで、選ばれた選択肢に対応する項目だけがメールに記載されます。