Contact Form 7 でサンクスページを設定する方法！複数フォームにも対応

Contact Form 7 でお問い合わせフォームを作成したが、サンクスページの設定方法が分からない。

この悩みを抱えている方は多いのではないでしょうか。

残念ながら、Contact Form 7 には、サンクスページを表示する機能が備わっていないため、プラグインの機能だけでどうにかなる問題ではないんですよね。

今回は、「他にプラグイン不要」で「コピペで簡単」にサンクスページを実装できる方法をご紹介しますので、ぜひお試しください。

ただし、サンクスページを表示するためには、Contact Form 7で作成したフォームを設置して送信できる状態にしておく必要があります。

まだフォームの設定・設置がお済みでない場合は、以下を参考に設定してください。

Contact Form 7 にはサンクスページ設定機能が無い

冒頭でもお伝えしましたが、Contact Form 7 には、サンクスページを作成・表示する機能が備わっておりません。（実装されていないのは、Contact Form 7 の開発者の意向によるものです）

何もカスタマイズしなければ、お問い合わせフォーム送信後に「ありがとうございます〜」といったメッセージが表示されるだけです。

このようにメッセージを表示するのではなく、フォーム送信後に特定のサンクスページを表示するには、自分自身でカスタマイズする必要があります。

それではどうやって実装するのか？

次にその方法を具体的に解説します。

Contact Form 7 でサンクスページを設定する手順

これからご紹介するのは、「お問い合わせフォームを送信した後に、サンクスページにリダイレクトさせる」方法になります。

Contact Form 7 の公式に紹介されている方法ですので、安心してお使いいただけます。

具体的な手順は、以下の3ステップです。順番にみていきましょう。

1. サンクスページの作成
2. フォームにリダイレクト処理を追加
3. フォーム送信して確認

今回サンプル作成に使っているテーマは、「Twenty Twenty-Four」です。

固定ページで「サンクスページ」を作成する

最初にお問い合わせフォーム送信後の「サンクスページ」を用意します。サンクスページは、独立したページになるので「固定ページ」を使って作成するのがオススメです。

「固定ページを追加」を押して、新たに固定ページを作成し、以下を順番に設定してください。

1. タイトル	サンクスページのタイトルを入力 タイトルは感謝を示すフレーズが多い。 例）お問い合わせいただきありがとうございます！
2. 本文	送信後に伝えたい内容を入力 フォーム送信後に安心感を与えられるような内容が一般的。 何かアクションを促したいなら、CTAなどを設置するのも良いですね。 例）ご入力いただいた内容を確認のうえ、 1〜2営業日以内に担当者よりご連絡いたします。 自動返信メールをお送りしておりますのでご確認ください。
3. スラッグ	サンクスページのURLの末尾を決める 特に指定は無いが、サンクスページが複数存在する場合は注意。 例）/thanks/
4. 公開	「公開」を押して公開！

これでサンクスページを作成できました。

作成したサンクスページにアクセスすると以下のような見た目になります。このままでも十分使えそうですね。

次は、お問い合わせフォーム送信後に、上記のサンクスページにリダイレクトされるよう設定します。

サンクスページは、お問い合わせしたユーザーだけが閲覧するページになるので、検索結果に表示する必要がありません。お使いのテーマやSEOプラグインが対応していれば、このページだけnoindexにしておくと良いでしょう。
WordPressのおすすめSEO対策プラグインはこちら

フォームにリダイレクト処理を追加

リダイレクト処理は、Contact Form 7 のフォーム側に追加します。

管理画面のサイドメニューの「お問い合わせ」から、サンクスページを設定したいフォームの編集画面を開いてください。（以下のような画面です。）

このフォームHTMLの最下部にリダイレクトさせるためのコードを記入してください。

実際に挿入するコードは以下になります。ただし、「http://example.com/」の部分は、さきほど作成したサンクスページのURLに変更してください。

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

例えば、「https://cone-c-slide.com/see-sla/thanks/」というページにリダイレクトさせたいなら、以下のように書きます。（これは実際に存在しないページです。）

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://cone-c-slide.com/see-sla/thanks/';
}, false );
</script>

このJavaScriptは、お問い合わせフォームの送信が完了したら、特定のURLにリダイレクトするよって感じの処理になりますので、これで準備OKです。

フォーム送信して確認

ここまでできれば、サンクスページの準備OKです。

実際にお問い合わせフォームを送信してみると、以下のようにサンクスページにリダイレクトされるようになりました。

サンクスページの設定は、意外と簡単でしたよね。

他にもプラグインを使ってサンクスページを設定する方法もありますが、この方法が最も簡単で、公式にも紹介されているのでオススメです。

Contact form 7 送信後にサンクスページに飛ばない時は？

今回ご紹介した手順通りに設定してもサンクスページに飛ばない場合は以下をお試しください。

• サンクスページのURLが正しいか
• リダイレクト処理（JavaScript）の記述が正しいか
• テーマ・プラグインと干渉していないか

サンクスページのURLが正しいか

まずは、リダイレクト処理に記入しているサンクスページのURLが正しいかどうか確認しましょう。該当する場所は以下になります。

正しいかどうかは、ここに入力しているURLをブラウザバーにコピペして正常にページが表示されるかどうかで確認しましょう。

また、URLが「HTTPS」かどうかも注意すべきポイントです。「https://」部分が「http://（s無し）」になっていると、混在コンテンツとして扱われる可能性があります。こちらも忘れずにご確認ください。

リダイレクト処理（JavaScript）の記述が正しいか

リダイレクト処理のために追記したJavaScriptに少しでもミスがあれば、動作しなくなります。

例えば、「’（シングルクオーテーション）」や「;（セミコロン）」が、1つ消えるだけで、動かなくなる可能性があるんですね。

そこで、動作しない場合は、再度以下をコピペしてフォーム送信してみてください。http://example.com/にリダイレクトすれば、JavaScriptは正常に動作していると判断できます。

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

上記でも動作しない場合は、次に説明するテーマやプラグインと干渉している可能性がありますので、確認してください。

テーマ・プラグインと干渉していないか

Contact form 7 以外のプラグインを利用している場合は、干渉して正常に動作しない可能性がありますので、一度他のプラグインを無効化して正常に動作するか確認しましょう。

特に「Autoptimize」や「WP Rocket」などのページスピード高速化系プラグインには注意が必要です。このようなプラグインを利用すると、JavaScriptコードを圧縮したり、記述をまとめて結合するなどの改変を加えることがあります。

この処理によって、リダイレクト処理として追記したJavaScriptの記述が正常に動作しなくなる可能性があるわけですね。

また、テーマにも同様のコード圧縮系の機能が備わっていることがあるので、リダイレクトが動作しない場合は、こちらもセットで確認しましょう。

複数のフォームにサンクスページを設定するには？

複数のフォームがあって、それぞれサンクスページを設定する場合も同じ手順で可能です。

例えば、お問い合わせフォームと資料ダウンロードフォームがあって、別々のサンクスページに飛ばしたい場合は、以下のような流れになります。

お問い合わせ	1. お問い合わせフォーム作成 2. お問い合わせ用サンクスページ作成（contact-thanksなど） 3. リダイレクト処理に上記ページのURL
資料ダウンロード	1. 資料ダウンロードフォーム作成 2. 資料ダウンロード用サンクスページ作成（document-thanksなど） 3. リダイレクト処理に上記ページのURL

フォームの数だけ、サンクスページを用意するというイメージです。ただし、サンクスページのスラッグが重複しないよう注意してください。

1ページに複数のフォームが存在する場合は？

実は、今回ご紹介した方法だと、1ページにフォームが2つ以上ある場合に正常に動作しなくなります。

例えば、1つのページに「お問い合わせフォーム」と「資料ダウンロードフォーム」の2つが存在していて、それぞれ別のサンクスページに飛ばしたいケースです。

こちらは、リダイレクト用コードの中身を変更することで対処可能です。

フォームの最下部に追加したJavaScriptの中身を以下に変更して、「フォームID」と「http://example.com/」の部分を変更してください。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  if('フォームID' == event.detail.contactFormId){
    location = 'http://example.com/';
  }
}, false );

フォームIDが書かれている場所は、フォーム編集画面のURLです。「post=◯」と書かれたパラメータがあるので、◯部分の数字を入力してください。

上記の場合は、フォームIDが「41」になります。実際に書いてみると以下になります。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  if('41' == event.detail.contactFormId){
    location = 'http://example.com/';
  }
}, false );

これでフォームIDが「41」の場合のみ、「http://example.com/」にリダイレクトする処理が発生するようになります。

まとめ

今回は、Contact Form 7 でフォーム送信後にサンクスページにリダイレクトさせる方法についてご紹介しました。以下の3ステップで実装できるので、思ったよりも簡単だったのではないでしょうか。

1. サンクスページの作成
2. フォームにリダイレクト処理を追加
3. フォーム送信して確認

サンクスページを作成した後は、自動返信メールが正しく設定できているかも確認しましょう。こちらも3ステップで設定できますので、以下をご覧ください。

また、資料ダウンロードが目的のフォームであれば、サンクスページでなくとも、自動返信メールにPDFを添付する方法でも実現可能です。

以下に、Contact Form 7 で資料ダウンロードフォームを設置する方法を解説してます。ぜひこちらも参考にしてください。