Contact Form 7でサンクスページへリダイレクトする方法【Cocoon対応】

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

event.detail.contactFormId を使えば、フォームごとにリダイレクト先を変えることが可能です。 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 );

要約

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

はじめに

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

こんにちは、クーラットです。

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

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

情報

Contact Form 7 の基本的な導入方法についてはContact Form 7 の導入＆カスタマイズ手順で解説しています。

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

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

固定ページを新規作成

WordPress 管理画面 → 固定ページ → 固定ページを追加

タイトルとスラッグを設定

タイトル例：「お問い合わせありがとうございました」
パーマリンク（スラッグ）：thanks などに設定

ContactForm7 サンクスページを用意しよう — 固定ページでサンクスページを作成

見た目を整える 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>

ContactForm7 サンクスページ表示確認 — サンクスページの表示を確認

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

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

固定ページを編集

お問い合わせフォームを設置している固定ページを編集します。

カスタム 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 に変更してください！

ContactForm7 カスタム HTML リダイレクトjs追加 — カスタムHTMLブロックにリダイレクト用コードを貼り付け

モチベル

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

クーラット

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

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

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

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

ContactForm7 枠だけが表示される — 完了メッセージを空にしても枠だけ表示される

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

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

ContactForm7 カスタムCSSに追加 — CSSで成功時の枠を非表示に設定

ContactForm7 枠が表示されない — CSS適用後は枠が表示されなくなった

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

よくある質問（Q&A）

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

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

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

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

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
);

Qリダイレクトせずに、ページ内でメッセージだけ表示する方法はありますか？

Contact Form 7 のデフォルト動作がそれです。今回のようなリダイレクトをせず、完了メッセージだけ表示するだけなら JavaScript の追加は不要です。