メール送信フォームを設置できるWordPressプラグイン「Contact Form 7」で、メール送信後に完了画面（サンクスページ）に移動させる方法をご紹介します。
※ ContactForm7の最新バージョン5.4からJavaScriptが大幅に変更されたため、この記事で解説する方法ではurl推移が正常に動作しなくなっています。
サンクスページ（完了画面）に飛ばない時は、Redirection for Contact Form 7などのプラグインを使ってください（以下記事を参照）。
Contact Form 7 はメールを送信すると「あなたのメッセージは送信されました」と表示されますが、このメッセージは送信ボタンの下に表示されて見えにくいので、送信完了がわからない場合があります。
メール送信後にメッセージを表示させるのではなく、完了画面（サンクスページ）に移動させると、メールの送信完了がわかりやすくなります。
なお、以前の主流だった on_sent_ok タグを使う方法は、現在では非推奨なのでご注意を。
以下は確認画面と完了画面を追加する方法です。こちらもご参照ください。
送信完了ページ（サンクスページ）を作成する
Contact Form 7 で作成したお問い合わせフォームは、送信ボタンを押しても「あなたのメッセージは送信されました」というメッセージが表示されるだけです。
このメッセージ表示の代わりに、「お問い合わせありがとうございます」といったメッセージが表示されるサンクスページを作って、そちらに移動するようにします。
送信完了時に表示されるサンクスページは、固定ページで作成します。送信完了したことがわかればいいので、内容はシンプルなもので構いません。
メールを送信すると、こんな感じでメッセージが表示されます。このページは内容がないので「noindex」にして、検索エンジンにインデックスされないようにしています。
GoogleやYahooでリスティング広告等を運用されている方は、サンクスページを到達目標に設定して、コンバージョン計測に使うことができます。
送信完了後サンクスページにリダイレクト
サンクスページへのリダイレクトは、Contact Form 7 のカスタムDOMイベントを使って、JavaScript を実行することで行います。
テーマファイルのヘッダー(header.php)に以下のコードを設置してください。設置場所は＜/head＞タグの手前です。もしくはフッター（footer.php）でもOKです。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://hogehoge.com/thankspage/';
}, false );
</script>コード内「location」部分のURL「https://hogehoge.com/thankspage/」は、各自で作成したサンクスページのURLに変更してください。
Contact Form 7 のコンバージョン計測はサンクスページ不要
先ほど「サンクスページをコンバージョン計測に使うことができます」と書きましたが、Contact Form 7 のコンバージョン計測は、サンクスページがなくても計測が可能です。
以前はサンクスページでコンバージョンを計測することが一般的でしたが、以下のページを見るとサンクスページへのリダイレクト使用は推奨しないと明言しています。
コンバージョン計測目的のリダイレクトは「時代遅れの無意味な慣習」だそうで・・・
サンクスページへのリダイレクトと同じく、Contact Form 7 のカスタムDOMイベントを使って、フォームの送信をGoogleアナリティクスでトラッキングします。
以下のページにフォームの送信をイベントとしてトラッキングする方法が記載されています。
その他、Contact Form 7 の使い方や設定等は、以下のドキュメントを参考にしてください。
ContactForm7 の reCAPTCHA設定方法です。最新バージョンの5.1からは、reCAPTCHA v3 APIを使うようになっています。
ContactForm7の使い方やカスタマイズ方法を紹介しています。よかったらこちらもどうぞ・・・
