Contact Form 7でエラーを一つにまとめてポップアップ表示する方法【完全解説】

Contact Form 7（以下CF7）は、WordPressで最も利用されているお問い合わせフォームプラグインの一つです。
しかし、標準のエラー表示について、次のような不満を感じたことはないでしょうか？

• 入力エラーが各項目にバラバラに表示されて分かりづらい
• スマホで見るとエラーメッセージが散らばってUXが悪い
• マルチステップフォームでエラー位置が分かりにくい

この記事では、CF7のエラー表示を一つにまとめ、ポップアップ（モーダル）で表示する方法を、実装手順付きで分かりやすく解説します。

プラグインの追加は不要で、JavaScriptとCSSのみで対応可能です。

この記事でできること

• Contact Form 7のエラー表示を1か所にまとめる
• 入力エラー時にポップアップで注意喚起
• スマホ・マルチステップ対応
• デザインや文言を自由にカスタマイズ可能

Contact Form 7の標準エラー表示の問題点

CF7のデフォルト仕様では、以下の2種類のエラー表示があります。

1. 各入力項目の直下に表示されるエラーメッセージ
2. フォーム上部に表示される赤枠のエラーメッセージ

この仕組み自体は親切ですが、

• 入力項目が多いと視線が散る
• スマホではスクロールしないと気づかない
• マルチステップフォームでは特に分かりにくい

といったUX上の課題があります。

解決策：エラーをまとめてポップアップ表示する

CF7には、バリデーションエラー発生時に実行されるJavaScriptイベントが用意されています。
これを利用することで、エラー情報を取得し、まとめてポップアップ表示できます。

実装の流れ

1. デフォルトのエラー表示を非表示にする
2. エラー用モーダルHTMLを用意
3. JavaScriptでエラー内容を取得
4. ポップアップを表示

順番に見ていきましょう。

① デフォルトのエラー表示を非表示にする（CSS）

まずは、CF7標準のエラーメッセージを非表示にします。

/* 各入力項目のエラー非表示 */
.wpcf7-not-valid-tip {
  display: none;
}

/* フォーム上部のエラーメッセージ非表示 */
.wpcf7-response-output {
  display: none;
}

※ 入力欄の赤枠は残したままにできます。

② エラー表示用のモーダルHTMLを用意

次に、ポップアップ表示用のHTMLを用意します。
フッター付近やフォーム直下に設置するのがおすすめです。

<div id="cf7-error-modal" class="cf7-modal">
  <div class="cf7-modal-inner">
    <p class="cf7-modal-title">入力内容をご確認ください</p>
    <div id="cf7-error-list"></div>
    <button class="cf7-modal-close">閉じる</button>
  </div>
</div>

③ JavaScriptでエラー内容をまとめて取得

CF7では、バリデーションエラー時に wpcf7invalid イベントが発火します。
ここからエラーメッセージを取得します。

<script>
document.addEventListener('DOMContentLoaded', function () {

  document.addEventListener('wpcf7invalid', function (event) {

    const modal = document.getElementById('cf7-error-modal');
    const list = document.getElementById('cf7-error-list');

    list.innerHTML = '';

    // エラー配列を取得
    if (event.detail.apiResponse && event.detail.apiResponse.invalid_fields) {
      event.detail.apiResponse.invalid_fields.forEach(function (field) {
        const p = document.createElement('p');
        p.textContent = field.message;
        list.appendChild(p);
      });
    } else {
      list.innerHTML = '<p>入力内容に不備があります。ご確認ください。</p>';
    }

    modal.classList.add('is-active');
  });

  // モーダルを閉じる
  document.querySelector('.cf7-modal-close').addEventListener('click', function () {
    document.getElementById('cf7-error-modal').classList.remove('is-active');
  });

});
</script>

④ モーダルデザイン（CSS）

最低限のモーダルCSS例です。

.cf7-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 9999;
}

.cf7-modal.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf7-modal-inner {
  background: #fff;
  padding: 30px;
  max-width: 420px;
  width: 90%;
  border-radius: 8px;
}

.cf7-modal-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.cf7-modal-close {
  margin-top: 20px;
}

よくあるカスタマイズ例

エラーメッセージを1文にまとめたい

list.innerHTML = '<p>入力内容に不備があります。必須項目をご確認ください。</p>';

モーダル表示中はスクロール禁止

document.body.style.overflow = 'hidden';
// 閉じる時
document.body.style.overflow = '';

マルチステップフォームでも使える？

はい、CF7 Multi-Step Formsでも問題なく動作します。
wpcf7invalid はステップ単位で発火するため、次のステップへ進む前にエラーを表示できます。

実装時の注意点

• CF7 v5.4以降を推奨
• JSが複数フォームで共通の場合、IDの重複に注意
• テーマ・キャッシュ系プラグイン使用時はJSの読み込み順を確認

まとめ

Contact Form 7では、

• エラー表示を一つにまとめる
• ポップアップで分かりやすく伝える
• UXを大幅に改善する

といったことが、プラグイン追加なしで実現可能です。

特に、

• スマホユーザーが多いサイト
• マルチステップフォーム
• コンバージョン率を重視したLP

では非常におすすめの改善施策です。

Favorite