Contact Form 7で確認画面をプラグインなしで実装する方法

Contact Form 7（CF7）で確認画面を作る際、専用プラグインを使うのが一般的ですが、実は以下のようなリスクがあります。

• 文字数制限の壁： URLパラメータで値を渡すタイプの場合、長文（数千文字〜）を入力するとデータが送信できなかったり、確認画面が真っ白になったりする。
• データ消失： 確認画面から戻った際に入力内容が消えてしまうトラブル。
• サイトの鈍化： プラグインを増やすことによる読み込み速度の低下。

この記事では、JavaScript（jQuery）を使用して「同じページ内で表示を切り替える」ことで、これらの問題をすべて解決する方法を解説します。

---

1. Contact Form 7 のフォーム編集

まずはCF7の編集画面で、「入力エリア」と「確認エリア」をそれぞれ id で囲って作成します。

<!-- 入力エリア -->
<div id="cf7-input-fields">
  <p>お名前<br>[text* your-name]</p>
  <p>メールアドレス<br>[email* your-email]</p>
  <p>お問い合わせ内容<br>[textarea your-message]</p>
  
  <div class="confirm-btn-wrap">
    <button type="button" id="btn-to-confirm">入力内容を確認する</button>
  </div>
</div>

<!-- 確認エリア -->
<div id="cf7-confirm-fields" style="display:none;">
  <h3>入力内容のご確認</h3>
  <table>
    <tr><th>お名前</th><td><span id="res-name"></span></td></tr>
    <tr><th>メール</th><td><span id="res-email"></span></td></tr>
    <tr><th>内容</th><td><span id="res-message"></span></td></tr>
  </table>

  <div class="confirm-btn-wrap">
    <button type="button" id="btn-back-to-input">修正する</button>
    [submit "この内容で送信する"]
  </div>
</div>

---

2. 制御用JavaScript（jQuery）の記述

次に、テーマの footer.php や、固定ページのJS挿入エリアに以下のコードを記述します。これにより、入力値をリアルタイムで確認画面へ反映させます。

<script>
jQuery(document).ready(function($) {
  var $inputArea = $('#cf7-input-fields');
  var $confirmArea = $('#cf7-confirm-fields');

  // 「確認する」ボタンを押したとき
  $('#btn-to-confirm').on('click', function() {
    // 各項目の値を取得して確認用スパンにセット
    $('#res-name').text($('input[name="your-name"]').val());
    $('#res-email').text($('input[name="your-email"]').val());
    // テキストエリアは改行を維持するために少し工夫が必要
    var message = $('textarea[name="your-message"]').val().replace(/\n/g, '<br>');
    $('#res-message').html(message);

    // 表示の切り替え
    $inputArea.hide();
    $confirmArea.fadeIn();
    
    // 画面上部へスクロール
    $('html, body').animate({scrollTop: $confirmArea.offset().top - 100}, 500);
  });

  // 「修正する」ボタンを押したとき
  $('#btn-back-to-input').on('click', function() {
    $confirmArea.hide();
    $inputArea.fadeIn();
  });
});
</script>

ポイント： URLパラメータを使わず、ブラウザ上のメモリ内で値を保持しているため、文字数制限（ブラウザのURL上限など）に引っかかることはありません。

---

3. 見た目を整えるCSS

ボタンのデザインや確認画面のテーブルを整えます。style.css または「追加CSS」に貼り付けてください。

#btn-to-confirm, #btn-back-to-input {
    background: #444;
    color: #fff;
    padding: 10px 30px;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}
#btn-to-confirm:hover, #btn-back-to-input:hover {
    opacity: 0.8;
}
#cf7-confirm-fields table {
    width: 100%;
    border-collapse: collapse;
}
#cf7-confirm-fields th, #cf7-confirm-fields td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

---

まとめ：プラグインなしが最強な理由

項目	プラグイン方式	今回の自作方式
文字数制限	URL上限の影響を受ける場合あり	無制限
安定性	プラグインの更新に左右される	極めて高い
カスタマイズ	制約が多い	自由自在

JavaScriptでの制御は一見難しそうですが、一度テンプレート化してしまえば、どんな案件でも使い回しが可能です。文字数制限やバグに悩まされる前に、ぜひこの「同一ページ切り替え方式」を試してみてください。