Contact Form 7 × 確認画面で「空の項目」を自動で非表示にする方法【マルチステップ対応】

お問い合わせフォームや注文フォームで、「未入力の項目」や
「未定の選択肢」がそのまま確認画面に表示されてしまって困った経験はありませんか？

本記事では、Contact Form 7 + Multi-Step Forms を使っている方向けに、
確認画面で空の項目を自動的に非表示にする方法をご紹介します。

よくある困りごと：「未定」や未入力もそのまま表示される…

例えば、以下のようなフォーム内容があるとします。

<div class="form-group event-block">
  <dl>
    <dt>イベント参加可否</dt>
    <dd>
      <span id="cf7msm_event-status">未定</span>
      <span id="cf7msm_event-date"> </span>
      <span id="cf7msm_event-time"> </span>
    </dd>
  </dl>
</div>

確認画面に進んだとき、すべて未入力でも「イベント参加可否：未定」といった表示が残ってしまい、
ユーザー体験が損なわれます。

解決策：JavaScriptで中身をチェック → 自動で非表示

以下のようなスクリプトを使えば、中身が空（または未定）であれば、
そのブロックごと非表示にすることができます。

スクリプト（HTMLに埋め込み）

<script>
document.addEventListener('DOMContentLoaded', function () {
  function hideIfEmptyText(id, blockClass) {
    const targetText = document.getElementById(id);
    const targetBlock = document.querySelector(`.${blockClass}`);

    if (targetText && targetBlock) {
      const content = targetText.textContent.trim();

      // 空または「未定」の場合は非表示にする
      if (!content || content === '未定') {
        targetBlock.style.display = 'none';
        console.log(`✅ ${id} が空または未定のため、.${blockClass} を非表示`);
      }
    }
  }

  // 任意の項目を設定（IDは multiform によって生成されたID）
  hideIfEmptyText('cf7msm_event-status', 'event-block');
  hideIfEmptyText('cf7msm_event-date', 'event-date-block');
});
</script>

HTML構造も明確にしておくと便利！

JavaScriptが判別しやすいように、以下のように .event-block や
.event-date-block などのクラスを追加しておくと安心です。

<div class="form-group event-block">
  <dl>
    <dt>イベント参加可否</dt>
    <dd><span id="cf7msm_event-status">未定</span></dd>
  </dl>
</div>

<div class="form-group event-date-block">
  <dl>
    <dt>日程</dt>
    <dd><span id="cf7msm_event-date"></span></dd>
  </dl>
</div>

マルチステップ対応の注意点

cf7msm_ というIDが自動的に付与されるのは、
Contact Form 7 Multi-Step Forms の [multiform] タグを使ったときです。

例

[multiform event-status]
[multiform event-date]

送信前の確認画面でこれらの値を判定するには、DOMContentLoaded イベントでは間に合わないこともあります。その場合は以下のように setTimeout を使うと安定します。

setTimeout(() => {
  hideIfEmptyText('cf7msm_event-status', 'event-block');
}, 300);

注意点と応用のヒント

• 「未定」などの文言は事前にラジオボタンやセレクトボックスで設定している文言と一致している必要があります。
• 「空欄だけ消す」のではなく、「中途半端な内容も非表示にしたい」場合は、複数のフィールドを組み合わせてチェックすることも可能です。

まとめ

課題	解決方法
未入力・未定でも表示される	JavaScriptでテキストをチェック＆非表示
確認画面での見栄えが悪くなる	.form-group 単位で非表示処理をする
Contact Form 7 の柔軟性の限界	multiform＋JS制御で補う

確認画面に不要な情報を出さないことで、ユーザーにとっても読みやすく、
信頼性の高いフォームに仕上がります。
フォームの完成度を上げたい方は、ぜひ今回のスニペットを取り入れてみてください！

Favorite