【WordPress】確認画面が前の入力のまま…Contact Form 7×キャッシュの原因と対処法

WordPress

2025.09.13

Contact Form 7 に「確認画面（プレビュー）」を追加する拡張プラグインを導入したとき、入力を修正したのに確認画面に前の内容が残ってしまうケースがあります。多くの場合、その原因はブラウザやキャッシュ系プラグインが HTML をキャッシュしてしまうことです。ここでは原因と対処法を整理します。

なぜ前の入力が残るのか？
解決方法
確認画面プラグインの仕様を理解する
まとめ

なぜ前の入力が残るのか？

ブラウザの「戻る」操作時にキャッシュされたページをそのまま再表示している
サーバーやキャッシュ系プラグイン（WP Super Cache / W3 Total Cache / LiteSpeed Cache など）がフォームページをキャッシュしている
CDN（Cloudflare など）が HTML をキャッシュしてしまい、更新が反映されない

Contact Form 7 自体はフォーム入力をセッションに保持していません。そのため、キャッシュによって古い状態が出てしまうと「修正が反映されない」ように見えるのです。

解決方法

1. フォームページのキャッシュを無効化する

確認画面を含むフォームページをキャッシュから除外しましょう。キャッシュ系プラグインやサーバーの管理画面で「特定ページをキャッシュしない」設定が可能です。


// functions.php に no-cache ヘッダーを送る例
add_action('template_redirect', function() {
  if (is_page('contact')) { // 問い合わせページのスラッグに変更
    nocache_headers();
  }
});

2. meta タグでキャッシュ制御を追加

確認画面付きフォームのテンプレートに以下を追加すると、ブラウザにキャッシュさせにくくなります。

<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

3. JavaScript で強制的にフォームを初期化する

ページ読み込み時に値をリセットする方法もあります。ただし「確認画面から戻ったときに入力が消える」ので UX 的には注意が必要です。

document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('.wpcf7 form');
  if (form) form.reset();
});

4. CDN やブラウザキャッシュの設定を確認する

Cloudflare やサーバー側でキャッシュレベルが高すぎる場合、フォームページまで静的にキャッシュされます。「HTML キャッシュを除外する」ルールを設定してください。

確認画面プラグインの仕様を理解する

Contact Form 7 は標準で「確認画面機能」を持たないため、ほとんどの場合は CF7 Confirmations や Contact Form 7 Multi-Step Forms などの拡張を利用しています。これらは入力値を JavaScript で保持・コピーして表示していることが多く、キャッシュ環境下では意図通り動かない場合があります。プラグインの FAQ で「キャッシュ無効化」を推奨していることもあるので確認しましょう。