Contact Form 7でサンクスページに遷移する方法【複数対応】

Q: サンクスページが表示されず、元のページのままです…

リダイレクト用の JavaScript が正しく動作していない可能性があります。ブラウザのJavaScriptが無効になっていないか、HTMLブロックにコードが正しく貼られているか確認してみてください。

Q: 複数のフォームを使っていて、それぞれ違うサンクスページに遷移させたいです

event.detail.contactFormId を使えば、フォームごとにリダイレクト先を変えることが可能です。

要約

WordPress プラグイン「Contact Form 7」でお問い合わせフォームの送信完了後に、サンクスページ（完了画面）へ自動で遷移させる方法を解説します。
初心者でも簡単に実装できるよう、JavaScript ＋ CSS を固定ページに埋め込む方法を中心に、Cocoon テーマでの設定に特化して紹介します。

はじめに

「お問い合わせありがとうございます！」のサンクスページ、ちゃんと作ってますか？

こんにちは、りょうへいです。

WordPress で Contact Form 7 を導入すると、送信後に「メッセージは送信されました」と表示されるだけでページ遷移はありません。
でもこれ、 送信されたか不安になる UI ですよね。

今回は、 サンクスページ（送信完了画面）に自動で遷移させる方法 を、Cocoon ユーザー向けにわかりやすく解説します！

要約
はじめに
サンクスページを用意しよう
HTML ブロックでリダイレクト＋ CSS を設置
メッセージが一瞬表示される問題を解決
よくある質問（Q&A）
テーマ別の補足
あわせて読みたい
まとめ
関連記事

サンクスページを用意しよう

まずは送信後に遷移させる「サンクスページ」を作成しましょう。

手順：

WordPress 管理画面 → 固定ページ → 固定ページを追加
タイトル例：「お問い合わせありがとうございました」
パーマリンク（スラッグ）： thanks などに設定

見た目を整える HTML

<style>
  .thanks-wrapper {
    max-width: 600px;
    margin: 100px auto;
    padding: 40px 30px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .thanks-wrapper h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .thanks-wrapper p {
    font-size: 16px;
    color: #555;
  }
  .thanks-wrapper a {
    margin-top: 30px;
    display: inline-block;
    padding: 12px 24px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 6px;
  }
</style>
<div class="thanks-wrapper">
  <h1>お問い合わせありがとうございました</h1>
  <p>通常1〜2営業日以内にご返信いたします。</p>
  <a href="/">ホームに戻る</a>
</div>

HTML ブロックでリダイレクト＋ CSS を設置

初心者におすすめなのは、 固定ページ内の HTML ブロックに直接コードを埋め込む方法 です。

手順：

お問い合わせフォームを設置している固定ページを編集
「カスタム HTML」ブロックを追加
以下のコードをコピペして貼り付け

<style>
  /* 成功時だけ完了メッセージ（枠）を非表示にする */
  .wpcf7-form[data-status="sent"] .wpcf7-response-output {
    display: none !important;
  }
</style>

<script>
  document.addEventListener(
    "wpcf7mailsent",
    function (event) {
      location.href = "https://example.com/thanks";
    },
    false
  );
</script>

🔁 https://example.com/thanks は自分のサンクスページ URL に変更してね！

モチベル

HTML ブロックに貼るだけなら簡単だね！

りょうへい

うん、テーマ編集や PHP は触らずに済むから安心だよ

メッセージが一瞬表示される問題を解決

送信完了時、Contact Form 7 は .wpcf7-response-output に「メッセージは送信されました」という文言を表示します。

仮にこの文言を空にしても、 枠だけが表示される現象 が起こります。

解決策：CSS で枠ごと非表示に！

.wpcf7-form[data-status="sent"] .wpcf7-response-output {
  display: none !important;
}

これなら 成功時だけ非表示 になり、エラー時のメッセージはちゃんと表示されます。

よくある質問（Q&A）

Q. サンクスページが表示されず、元のページのままです…

A. リダイレクト用の JavaScript が正しく動作していない可能性があります。ブラウザの JavaScript が無効になっていないか、HTML ブロックにコードが正しく貼られているか確認してみてください。

Q. 複数のフォームを使っていて、それぞれ違うサンクスページに遷移させたいです

A. event.detail.contactFormId を使えば、フォームごとにリダイレクト先を変えることが可能です。

<script>
  document.addEventListener(
    "wpcf7mailsent",
    function (event) {
      const formId = event.detail.contactFormId;
      if (formId === 123) {
        location.href = "/thanks-contact";
      } else if (formId === 456) {
        location.href = "/thanks-request";
      }
    },
    false
  );
</script>