【Contact Form 7の送信完了ページ設定方法】送信完了後に別ページへリダイレクトさせる。

ウェブサイトを作る際に必ずと言っていいほど必要になるのがメールフォームですね。

ワードプレスを使っているととても便利なプラグインがあります。

多くの人が使っていると思われる有名なメールフォームが【Contact Form 7】です。

どんな時に送信後に別ページに飛ばす必要があるの？

とても便利な【Contact Form 7】ですが、特徴としてメール送信が完了した際、フォーム下に送信完了メッセージが出るのみになります。

UIを考えるとこれで良いケースもあるのですが、メール送信をコンバージョンとしたい場合、ちょっとだけ問題が発生するケースがあります。

コンバージョントラッキングを設置したいとき

メールフォームからメール問い合わせや会員登録などの送信をコンバージョンとしたとき、トラッキングをフォームの送信ボタン（Submit）に設定すると、送信ボタンをクリックした回数がトラッキングされるため、送信できなかったケース（必須項目などが未記入）でもコンバージョンとしての扱いになってしまいます。

ちゃんと送信できたケース（コンバージョンしたとき）のみトラッキングを集計したい場合は、送信完了した際に【送信完了ページ】へ自動的に飛ぶように設定し、【送信完了ページ】をトラッキングするという方法が考えられます。

この方法であれば直接送信完了ページのURLを入力されない限りは、ほぼ正確なコンバージョントラッキングが可能になると思います。

問い合わせをしてくれたユーザーへ特定のページを表示したいとき

例えば会員登録やお問い合わせをしてくれたユーザーは、少なくともウェブサイトのコンテンツに興味を持っていただけているユーザーの可能性が高いです。

そこで送信完了後に特定の情報（資料ダウンロード、メルマガ登録、関連サービスへのリンク）を送信完了ページに表示することで、よりユーザーに有益な情報を提示することができます。

送信完了後に別ページへ自動的に飛ばす方法

まず送信完了ページを作成する必要があります。

固定ページに送信完了ページを作成しましょう。

送信完了ページは上記をふまえて自由に作成して問題ありません。

次に【Contact Form 7】のフォーム画面の一番下に下記コードを追記します。

<script>
　document.addEventListener( 'wpcf7mailsent', function( event ) {
  　location = 'https://送信完了ページのURL';
　}, false );
</script>

【送信完了ページのURL】部分に先ほど作った固定ページのURLを入れます。

これで送信完了後に上記URLへリダイレクトされるような形になります。

ちょっとした注意点

無事送信ができた場合、【Contact Form 7】の仕様で送信完了メッセージ（初期値では『ありがとうございます。メッセージは送信されました。』のテキスト）が表示されてしまいます。

これではリダイレクトされる前に離脱されてしまったり、ユーザーが混乱する可能性がありますので、メッセージタブの『メッセージが正常に送信された』欄を【送信中です。しばらくお待ちください。】などのメッセージへ変更すると丁寧で良いと思います。

個人的にコンバージョントラッキング時に使うことがあるのでメモしておきます。