Contact Form 7でサンクスページを設定する方法｜プラグインなしで簡単リダイレクト！

Contact Form 7は、WordPressでフォームを設置する際に最もよく使われている無料プラグインのひとつです。
しかし、初期設定のままでは「送信完了後のサンクスページ（送信完了画面）」が表示されず、フォーム下部に小さくメッセージが表示されるだけの仕様となっています。

このままだと、

「送信できたか分からない…」
「コンバージョンを計測したいのにできない…」
「送信完了後にユーザーを次の導線に誘導できない…」

といった課題が生じがちです。

そこでこの記事では、Contact Form 7にサンクスページを設定するべき理由をわかりやすく解説したうえで、プラグインを使わずにリダイレクト設定する2つの方法も紹介します。
フォームをより便利に、効果的に活用したい方はぜひ参考にしてみてください。

Contact Form 7にサンクスページが必要な理由
プラグインなしでサンクスページを設定する2つの方法
1. 方法①：JavaScriptでフォーム送信後にリダイレクトする
  1. 【手順1】サンクスページ（固定ページ）を作成する
  2. 【手順2】フォームにJavaScriptを追加する
2. 方法②：functions.phpにカスタムスクリプトを記述する【中級者向け】
サンクスページが表示されない時の原因と対処法
複数フォームで異なるサンクスページを使いたいときは？
1. JavaScriptによる個別リダイレクトの実装方法
2. 注意点：functions.phpには書かない方が安全
まとめ：Contact Form 7にサンクスページを設定してユーザー体験を向上しよう

Contact Form 7にサンクスページが必要な理由

WordPressの代表的なフォームプラグイン「Contact Form 7」には、送信完了後に自動で遷移する「サンクスページ（送信完了ページ）」がデフォルトでは用意されていません。
フォーム下部に「ありがとうございます。メッセージは送信されました。」と表示されるだけで、別ページへのリダイレクトは発生しません。

一見、これだけでも十分な機能に思えますが、サンクスページを設定することで得られるメリットは非常に大きいのです。
以下に、Contact Form 7にサンクスページが必要な3つの理由をご紹介します。

送信が完了したことがユーザーにわかりやすい

フォームの送信ボタンを押したあと、画面の一部に小さな完了メッセージが表示されるだけでは、ユーザーにとって分かりづらいです。
特に、モバイル表示ではフォーム自体が長くなりがちで、メッセージが画面外に表示されてしまい、送信されたかどうか不安になるケースがあります。

サンクスページを用意することで、画面全体が切り替わるため、「送信が完了した」ことが視覚的に明確になり、ユーザーに安心感を与えられます。
これはユーザビリティ（使いやすさ）の観点から非常に重要です。

重複送信を防げる

サンクスページがないと、ユーザーが「送信されたのかどうか分からない」と不安に思い、送信ボタンを何度もクリックしてしまうことがあります。
その結果、同じ内容の問い合わせが複数届いてしまい、運営側が困ります。

一方、明確にサンクスページに遷移することで、ユーザーも「送信が完了した」と確信でき、無駄な再送信を防ぐことができます。
サンクスページは送信ミスや運用負担の軽減にもつながります。

効果測定ができるようになる（コンバージョン計測）

サンクスページを設定する最大のメリットの一つが、Googleアナリティクスなどを活用したコンバージョン（成果）計測が可能になる点です。

フォーム送信完了後に遷移するURL（サンクスページ）を目標URLとして設定することで、以下のようなマーケティング施策に活用できます。

「どの記事からお問い合わせが来たのか？」
「どの広告からの流入がCVに繋がったのか？」
「どのページ構成が成果に繋がっているのか？」

このようなデータドリブンなサイト運営を行うには、サンクスページの導入が欠かせません。
ユーザビリティとマーケティング両面でのメリットがあるので、具体的なサンクスページの設定方法をプラグインを使わずに行う手順を紹介していきます。

プラグインなしでサンクスページを設定する2つの方法

Contact Form 7でサンクスページを設定する方法としては、プラグインを使うやり方もありますが、できるだけシンプルに済ませたい方や、プラグインを増やしたくない方には「コードを使ったリダイレクト設定」がおすすめです。
ここでは、Contact Form 7の標準機能とJavaScriptを使った2通りの方法をご紹介します。

方法①：JavaScriptでフォーム送信後にリダイレクトする

もっとも簡単なのが、フォームの「追加設定」欄にJavaScriptを記述する方法です。

【手順1】サンクスページ（固定ページ）を作成する

WordPressの固定ページで、「送信ありがとうございました」などのタイトルと本文を持つサンクスページを作成しておきます。
URLは後で使うので控えておきましょう。

例）https://example.com/thanks/

【手順2】フォームにJavaScriptを追加する

WordPress管理画面で［お問い合わせ］→［該当フォーム］を開き、「フォーム」タブの下部に以下のスクリプトを貼り付けます（※ <script>～</script> はそのまま記述OKです）。

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

ポイント

https://example.com/thanks/ の部分を、先ほど作成したサンクスページのURLに変更してください。
<script>〜</script> タグは、フォームエリア内の最後にそのまま書いても動作します。
フォームが複数ある場合は、それぞれに同じ記述を追加する必要があります。

方法②：functions.phpにカスタムスクリプトを記述する【中級者向け】

より柔軟に対応したい場合は、テーマのfunctions.phpにリダイレクト処理を記述する方法もあります。
ただし、PHPの知識が必要なため、初心者にはJavaScriptの方がおすすめです。

以下はfunctions.phpに追記するコード例です。

function my_custom_wpcf7_redirect() {
    ?>
    <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        location.href = 'https://example.com/thanks/';
    }, false );
    </script>
    <?php
}
add_action( 'wp_footer', 'my_custom_wpcf7_redirect' );

この方法なら全フォームに共通でサンクスページへ遷移させることができ、複数のフォームがあるサイトでは便利です。
ただし、カスタマイズの影響を受けるテーマ更新時には注意が必要です。

サンクスページが表示されない時の原因と対処法

Contact Form 7で設定したサンクスページにうまく遷移しないことがあります。
特に「リダイレクトの設定をしたのに完了画面に切り替わらない」というケースは、初心者が最もつまずきやすいポイントです。
ここでは、よくある原因とその対処法をわかりやすく解説します。

原因①：JavaScriptが読み込まれていない

JavaScriptでリダイレクトを行う方法では、JavaScriptが正しく読み込まれていないとリダイレクトが動作しません。
特に以下のような状況では要注意です。

サイト全体でJavaScriptを無効化している
キャッシュ系のプラグイン（例：AutoptimizeやW3 Total Cache）によってスクリプトが結合・圧縮されている
テーマや他のプラグインがJSの実行をブロックしている

対処法

一時的にキャッシュ系プラグインを無効にして動作確認を行う
ブラウザの開発者ツール（Console）でJavaScriptエラーが出ていないか確認する
別のテーマ（Twenty Twentyシリーズなど）で試してみる

原因②：記述ミスやURL間違い

コードの記述ミスやURLの間違いも非常によくある原因です。
特にコピペの際に以下のようなミスが起こりがちです。

'（シングルクォーテーション）を全角で入力してしまう
セミコロン（;）を抜かしている
URLの「/」や「https」を間違えている

対処法

コードは必ずプレーンテキスト（メモ帳など）に一度貼り、整形してから使用する
URLは手入力せず、実際の公開ページからコピーして貼り付ける
JavaScriptの文法エラーがないか、以下のような正しい形式か再確認する

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

原因③：フォームの送信エラーやバリデーション未通過

Contact Form 7は、入力エラーやreCAPTCHAによるブロックが発生した場合、送信完了イベント（wpcf7mailsent）が発火しません。
そのため、リダイレクトのコードがあってもサンクスページに遷移しないのです。

対処法

フォームが正常に送信できているか、ダミーでテストして確認する
必須項目が未入力になっていないか再確認する
スパム対策としてreCAPTCHAを使っている場合は、動作を一度無効化してテストしてみる

複数フォームで異なるサンクスページを使いたいときは？

サイトに複数の問い合わせフォームがある場合、それぞれに異なるサンクスページを設定したいというケースも多いでしょう。
たとえば

「お問い合わせフォーム」送信後は → /thanks-contact/
「資料請求フォーム」送信後は → /thanks-download/
「採用エントリーフォーム」送信後は → /thanks-recruit/

このようにフォームの種類ごとに異なる完了画面を見せることで、ユーザーの行動を整理し、目的に合ったフォローや効果測定が可能になります。

JavaScriptによる個別リダイレクトの実装方法

フォームごとにリダイレクト先を変えるには、それぞれのフォーム編集画面でJavaScriptを個別に記述します。
たとえば、お問い合わせフォームに設定する場合は以下のようなコードをフォーム編集画面の一番下に追記します。

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

資料請求フォームでは、URLだけ変更してこのようにします。

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

ポイントは、各フォームに直接スクリプトを記述すること。
Contact Form 7は送信完了時に JavaScript イベント wpcf7mailsent をトリガーするので、それぞれのフォームに異なるURLを指定すればOKです。

注意点：functions.phpには書かない方が安全

「JavaScriptの記述はfunctions.phpにまとめたほうがいいのでは？」と思われるかもしれませんが、functions.phpに共通のリダイレクト処理を記載すると、すべてのフォームが同じURLに飛んでしまうため注意が必要です。

どうしても共通ファイルで管理したい場合は、event.detail.contactFormId というContact Form 7が持つフォームIDを使って、分岐させることも可能です。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if (event.detail.contactFormId == '123') {
    location.href = 'https://yourdomain.com/thanks-contact/';
  } else if (event.detail.contactFormId == '456') {
    location.href = 'https://yourdomain.com/thanks-download/';
  }
}, false );
</script>

※各フォームのIDは、管理画面のショートコード

エラー: コンタクトフォームが見つかりません。

の id="123" 部分で確認できます。

このように、フォームごとに異なる完了ページを設定することで、ユーザー体験がより丁寧になり、マーケティング施策の精度も高まります。
手間は少しかかりますが、特にCV（コンバージョン）を重視したいサイトではおすすめのカスタマイズです。