【初心者向け】Contact Form 7で送信完了後に自動リダイレクトする方法（WordPress）

WordPressでお問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7（CF7）」。
この記事では、フォーム送信完了後に自動で
「サンクスページ（完了画面）」へリダイレクトさせる方法を、初心者にもわかりやすく解説します。

できること

• フォーム送信後、自動的に「ありがとうございます」ページへ移動
• 特定のフォームIDに応じた個別リダイレクトにも対応

こんな方におすすめ

• 完了ページでトラッキングやコンバージョン計測をしたい
• ユーザーに「送信完了したこと」をしっかり伝えたい
• おしゃれなLPと完了画面を切り分けて表示したい

使用する仕組み：wpcf7mailsent イベント

Contact Form 7では、JavaScriptで「フォーム送信完了」
を検出できるカスタムイベント wpcf7mailsent を提供しています。

実装方法

① フォームIDを確認

WordPress管理画面で以下の手順で数値IDを確認します：

• 左メニュー「お問い合わせ」→「コンタクトフォーム」
• 対象フォームをクリック
• URLの post=XXXX の部分がフォームID（例：123）

例）

https://example.com/wp-admin/admin.php?page=wpcf7&post=123
→ この場合、フォームIDは「123」

② サンクスページのURLを作成

たとえば、以下のような固定ページを作っておきます：

https://example.com/contact/thanks/

このURLに送信後リダイレクトさせます。

③ JavaScriptを設置

WordPressの該当ページ（フォームを設置している固定ページなど）に以下のコードを埋め込んでください：

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wpcf7mailsent', function (event) {
      if (event.detail.contactFormId == 123) { // ← フォームの数値IDを指定
        window.location.href = 'https://example.com/contact/thanks/'; // リダイレクト先
      }
    });
  });
</script>

全フォーム共通でリダイレクトしたい場合

フォームIDで条件分岐せず、すべてのCF7フォームでリダイレクトしたい場合は、
以下のようにシンプルに書けます：

<script>
  document.addEventListener('wpcf7mailsent', function () {
    window.location.href = 'https://example.com/contact/thanks/';
  });
</script>

注意点

項目	内容
フォームIDは数値	event.detail.contactFormId は 文字列ではなく数値 です（例：123）。
サンクスページは事前に用意	リダイレクト先のURLが404だとユーザーが混乱します。
JavaScriptの設置場所	テーマファイルに書くか、固定ページに埋め込んでください。プラグイン「Insert Headers and Footers」なども便利です。

まとめ

Contact Form 7の送信完了後に自動リダイレクトする方法を導入することで、
ユーザー体験が向上し、Google広告やアナリティクスでのCV計測にも役立ちます。

導入はとても簡単なので、ぜひ試してみてください。

Favorite