[WordPress] Contact Form 7で条件分岐のフォームを作る

2025年4月2日

お問い合わせフォームで、選択肢がある場合　いくら「これを選択した場合は選べません」など書いても、選んでしまう方がいらっしゃるんですよね。

ならば、条件分岐で選択出来ない様にしてしまおう！というのが、今回のお話です。Conditional Fields for Contact Form 7というプラグインに頼ります。

INDEX

準備

Contact Form 7でフォームを作成します。

Conditional Fields for Contact Form 7　プラグインを使える様に設定します。

WordPress.org 日本語

Conditional Fields for Contact Form 7 Contact Form 7 に条件付きロジックを追加します.

条件

欲しい情報だけ入力してもらえる様に、用件に応じて入力枠の表示、非表示を設定します。

用件：新規登録: 名前、職場の名前、所在地の入力枠が表示される
用件：名前の変更: 名前の入力枠が表示される
用件：職場の変更: 職場の名前と所在地の入力枠が表示される

フォームの例

選択がある部分を「group add clear_on_hide inline」と「group」で囲みます。

<dd>[select* select-任意の番号 "新規掲載希望" "名前の修正" "勤務先名の修正"]</dd>
[group add clear_on_hide inline]
<dt>掲載(新規)<span class="form7-require">必須</span></dt><dd><div class="form-harf">
<div>[text list-name placeholder"お名前"]</div>
<div>[text work-name placeholder"勤務先"]</div>
</div></dd>
[/group]

[group rename clear_on_hide inline]
<dt>修正(名前)<span class="form7-require">必須</span></dt><dd><div class="form-harf">
<div>[text list-oldname placeholder"修正前"]</div>
<div>[text list-newname placeholder"修正後"]</div>
</div></dd>
[/group]

[group rework clear_on_hide inline]<dt>修正(勤務先)<span class="form7-require">必須</span></dt><dd><div class="form-harf">
<div>[text work-oldname placeholder"修正前"]</div>
<div>[text work-newname placeholder"修正後"]</div>
</div></dd>
[/group]

[group state clear_on_hide inline]<dt>勤務先都道府県<span class="form7-require">必須</span></dt><dd>[text work-city]</dd>
[/group]