Contact Form 7の送信完了後にフォームが残る問題を解決！確認画面あり・なし両対応【コピペOK】

WordPressで一番使われているんじゃないか！？と言っても過言じゃない、「Contact Form 7」。デフォルトで、送信完了画面や確認画面はついていないけど、とても使いやすく人気があるお問い合わせプラグインなのは、間違いありません！

そこでよく一緒に使われるのが、「Contact Form 7 Multi-Step Forms」というプラグイン。これを使えば、とっても簡単に確認ページや完了ページが作れます。

…なんですが、実際に運用しているとこんな声がよく聞こえてきます。

• 「戻るボタンを押すと、また確認画面が表示されてしまう…」
• 「送信後にページを更新したら、同じ内容がもう一度送信されちゃった！」
• 「完了ページにまでいったのに、戻ったらフォームの中身が残ってるのが気になる…」

実はこれ、ブラウザのキャッシュや履歴の扱いが原因で起きる、ちょっと厄介なトラブルなんです。

でも大丈夫！この記事では、そんな「Contact Form 7」の送信後トラブルをスッキリ解決する方法を、初心者の方でもわかりやすくご紹介していきます！

Contact Form 7 に送信完了ページを追加する方法

「 Multi-Step Forms 」について知っている人や、フォームが残る問題の解決方法だけを知りたい人は 3ステップ or ２ステップ へ

「Contact Form 7」に送信完了画面ってどうやって付けるの？
と思う方もいらっしゃいますよね？そう思うのもそのはず！「Contact Form 7」単体では送信完了画面や確認画面は作る機能はありません。

Multi-Step Formsを使うメリット

このプラグインを組み合わせると、

• ステップごとにフォームを分けられる（入力画面→確認画面→完了画面）
• 簡単に確認画面を作ることができる
• 完了ページに自動遷移する設定も可能

…と、ユーザーにとっても分かりやすく、運用者にも扱いやすいフォームが簡単に実現できます。

Multi-Step Formsのデメリット

ただし、この便利なステップ構成、送信後の動作にちょっとした落とし穴があることも事実。

• 戻るボタンで確認画面に戻れてしまう
• ページを更新すると再送信されてしまう
• 完了画面に来ても、フォームの中身が表示されたまま

…といった、「送信後の不具合」や「体験上の違和感」が起こるケースもあるんです。
このあと紹介するセクションでは、確認画面あり・なしの構成別に注意すべきポイントや、具体的なトラブル対処法・カスタマイズコードまでしっかり解説していきます！！

コードはどこに書けばいいの？初心者さんも安心の手順ガイド

「カスタマイズって難しそう…」
そんなふうに感じる方もご安心ください。実は、WordPressの管理画面からとても簡単にコードを追加できる場所があるんです！

以下の手順通りに進めていけば、初めての方でも安心して作業できますよ。

１）WordPressの管理画面から「外観」→「テーマファイルエディター」をクリック

２）「function.php」ファイルを選択
画面右側にテーマファイルの一覧が表示されるので、「function.php」という名前のファイルをクリックしましょう

３）コードを追加して「ファイルを更新」
手順に沿って進めたら、表示された編集画面の一番下に、
必要なコードをコピペして追加し、「ファイルを更新」をクリックするだけ！

次のセクションでは、実際に書き込む具体的なコードとその説明をわかりやすく解説していきます！そのままコピペで使えるので、ぜひチェックしてください。

Contact Form 7「入力→確認→完了」の3ステップ構成で設定する場合のトラブル防止方法

WordPressでお問い合わせフォームを作るとき、「入力 → 確認 → 完了」の3ステップ構成にしたい方も多いのではないでしょうか？中でも「確認画面」を挟むスタイルは、送信前に内容をチェックできるため、ユーザーにとって安心感がある丁寧な設計です。

ただし、この構成には思わぬ落とし穴も…。

• 完了ページから「戻るボタン」を押すと、また確認ページに戻ってしまう
• 入力した内容がフォームに残ったまま再表示される
• ページの再読み込みで、同じ内容が再送信されてしまう

といったトラブルが起こってしまうことが多いんです。

ここでは、これらの問題を一発で解決できるコードと、その仕組みを初心者にもわかりやすく解説していきます！

この設定で解決できること！

• 完了ページから確認ページへ戻れないようにする（再送信防止）
• 入力ページに戻ったらフォームをリセットする
• 確認ページを直接開けないようにして、不正アクセスを防止する

Contact Form 7の3ステップをしっかり守るカスタム設定

完了ページのキャッシュを無効にする（PHP）

function add_cache_control_for_thanks_page() {
  if ( is_page('thanks') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_thanks_page');

⭐️効果

• 「戻るボタン」で完了ページが再表示されるのを防ぐ
• 「再読み込み」で同じ内容が送られてしまうのを防ぐ

確認ページへの不正遷移を防ぐ（JS）

add_action('wp_footer', function () {
  if (is_page('confirm')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const isVisited = sessionStorage.getItem('cf7-confirm-accessed');
        if (!isVisited) {
          // 入力ページにリダイレクト
          window.location.href = '/contact/';
        } else {
          sessionStorage.removeItem('cf7-confirm-accessed');
        }
      });
    </script>
    <?php
  }

⭐️効果

• 正規ルート（入力→確認）で来たユーザーしか確認ページにアクセスできない
• ブラウザのURL直打ちなどによる確認ページの不正表示を防止

入力ページで通行証（セッション）を発行（JS）

 if (is_page('contact')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const confirmButton = document.querySelector('form.wpcf7-form input[type="submit"]');
        if (confirmButton) {
          confirmButton.addEventListener('click', function () {
            sessionStorage.setItem('cf7-confirm-accessed', 'true');
          });
        }
      });
    </script>
    <?php
  }
});

⭐️効果

• 「送信」ボタンを押した人だけにセッションが付与される
• 不正アクセスをブロックしつつ、ユーザー体験はスムーズ！

一発コピペOK！3ステップ構成のまとめコード

function add_cache_control_for_thanks_page() {
  if ( is_page('thanks') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_thanks_page');

add_action('wp_footer', function () {
  if (is_page('confirm')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const isVisited = sessionStorage.getItem('cf7-confirm-accessed');
        if (!isVisited) {
          window.location.href = '/contact/';
        } else {
          sessionStorage.removeItem('cf7-confirm-accessed');
        }
      });
    </script>
    <?php
  }

  if (is_page('contact')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const confirmButton = document.querySelector('form.wpcf7-form input[type="submit"]');
        if (confirmButton) {
          confirmButton.addEventListener('click', function () {
            sessionStorage.setItem('cf7-confirm-accessed', 'true');
          });
        }
      });
    </script>
    <?php
  }
});

このコードを functions.php に貼り付けるだけで…

• 完了ページで戻るボタンを押しても、確認ページに戻らない！
• フォームの内容が残らない！
• 確認ページは「正規の流れ」でしか表示できない！

Contact Form 7「入力→完了 」の2ステップ構成で設定する場合のトラブル防止方法

「確認画面は使わず、入力→完了のシンプルな2ステップで運用したい！」
というケースはとても多いです。実際、多くのサイトでこの構成が採用されています。（入力→完了）です。

ただし、この構成でも以下のようなトラブルが起きやすくなります。

• ブラウザの戻るボタンで「入力内容が残った状態」に戻ってしまう
• 再読み込みで「また送信されたかも…」と不安になる
• 完了ページがキャッシュされてしまい、誤動作が起こる可能性も

こうしたストレスをスッキリ解消する4つのステップを、初心者にもわかりやすく解説します！

この方法で解決したいこと！

• 完了ページから戻ったときに入力内容が残らないようにしたい
• フォームの再読み込みによる送信の重複や不安を防ぎたい
• 古い情報が残ってユーザーが混乱しないようにしたい

これで安心！キャッシュと履歴のクリア方法

完了ページのキャッシュを無効化（PHP）

function add_cache_control_for_thanks_page() {
  if ( is_page('thanks') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_thanks_page');

⭐️効果

• ページがキャッシュされず、送信後に「完了ページ」が再表示されにくくなる
• 間違って再送信されるリスクを減らせる

入力ページでもキャッシュを無効化（PHP）

function add_cache_control_for_contact_page() {
  if ( is_page('contact') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_contact_page');

⭐️効果

• 「完了ページ → 戻る」の流れでも、入力内容が残らなくなる
• 過去の情報が残らず、混乱や誤送信を防げる

完了ページで「戻るボタン」を無効化（JS）

add_action('wp_footer', function () {
  if (is_page('thanks')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        history.replaceState(null, null, location.href);
        window.addEventListener('popstate', function () {
          window.location.href = '/contact/';
        });
      });
    </script>
    <?php
  }
});

⭐️効果

• ブラウザの「戻る操作」で自動的に入力ページへ移動できる
• 完了ページが繰り返し表示されることを防ぐ

入力ページに戻ったらフォームをリセット（JS）

add_action('wp_footer', function () {
  if (is_page('contact')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector('form.wpcf7-form');
        if (form) {
          form.reset();
        }
      });
    </script>
    <?php
  }
});

⭐️効果

• フォームの古い内容を自動で初期化できる
• 再入力を促すことで、ユーザーの不安を解消できる

一発コピペOK！2ステップ構成のまとめコード

function add_cache_control_for_thanks_page() {
  if ( is_page('thanks') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_thanks_page');

function add_cache_control_for_contact_page() {
  if ( is_page('contact') ) {
    echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">' . "\n";
    echo '<meta http-equiv="Pragma" content="no-cache">' . "\n";
    echo '<meta http-equiv="Expires" content="0">' . "\n";
  }
}
add_action('wp_head', 'add_cache_control_for_contact_page');

add_action('wp_footer', function () {
  if (is_page('thanks')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        history.replaceState(null, null, location.href);
        window.addEventListener('popstate', function () {
          window.location.href = '/contact/';
        });
      });
    </script>
    <?php
  }

  if (is_page('contact')) {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector('form.wpcf7-form');
        if (form) {
          form.reset();
        }
      });
    </script>
    <?php
  }
});

このコードを functions.php に追加すると…

• 入力画面がリセットされるので、誤送信の心配なし
• 戻るボタンを押しても、フォーム内容が残らないから安心
• ユーザーも運営もストレスフリー！

まとめ｜Contact Form 7 の送信後トラブルをコードでスッキリ解決！

「Contact Form 7」はとても優秀なフォームプラグインですが、完了ページや確認ページを導入したあとの“送信後トラブル”に悩まされるケースも多いですよね。

今回は、そんなトラブルを解消する、キャッシュ・履歴のコントロール方法と具体的なコードをご紹介しました。functions.php にコードを追加するだけで、Contact Form 7 の使い心地が格段にアップするので、ぜひコピーして活用してみてください！

ちょっとした使い心地の工夫が、ユーザーからの満足度や安心感につながっていきます。あなたのサイトにぴったりなステップ構成を選んで、気持ちよく送れるフォームに改善していきましょう！