Contact Form 7 で完了画面(サンクスページ)に移動させる方法

スポンサーリンク
スポンサーリンク

contactform7 サンクスページ

メール送信フォームを設置できるWordPressプラグイン「Contact Form 7」で、メール送信後に完了画面(サンクスページ)へ移動させる方法をご紹介します。

Contact Form 7 はメールを送信すると「あなたのメッセージは送信されました」と表示されますが、このメッセージは送信ボタンの下に表示されて見えにくく、送信が完了したかどうかわからない場合があります。

そんな時は、メール送信後にメッセージ表示ではなく、完了画面(サンクスページ)に移動させるとメールの送信完了がわかりやすくなります。

なお、以前の主流だった on_sent_ok タグを使う方法は、現在では非推奨なのでご注意を。

以下は確認画面と完了画面を追加する方法です。こちらもご参照ください。

Contact Form 7 に確認画面と完了画面を追加する
Contact Form 7 に確認画面と完了画面を追加する方法をご紹介します。Contact Form 7 は問い合わせフォームを簡単に設置できる定番プラグインですが、メールフォームに入力した内容を確認するための機能や、完了画面(サンクスページ)に移行する機能がないので、確認画面や完了画面を別途で追加する必要があります。
スポンサーリンク

送信完了ページ(サンクスページ)を作成する

Contact Form 7 で作成したお問い合わせフォームは、送信ボタンを押しても「あなたのメッセージは送信されました」というメッセージが表示されるだけです。

Contact Form 7 送信完了メッセージ

このメッセージ表示の代わりに、「お問い合わせありがとうございます」といったメッセージが表示されるサンクスページを作って、そちらに移動するようにします。

送信完了時に表示されるサンクスページを固定ページで作成します。内容はシンプルなもので構いません。

contactform7 サンクスページ

メールを送信すると、こんな感じでメッセージが表示されます。このページは内容がないので「noindex」にして、検索エンジンにインデックスされないようにしています。

contactform7 サンクスページ

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 のコンバージョン計測は、サンクスページがなくても計測が可能です。

以前はサンクスページでコンバージョンを計測することが一般的でしたが、以下のページを見るとサンクスページへのリダイレクト使用は推奨しないと明言しています。

コンバージョン計測目的のリダイレクトは「時代遅れの無意味な慣習」だそうで・・・

送信後に異なる URL にリダイレクトさせるには
まず、これから書こうとしている内容は 99.99% のユーザーにとって必要のないものであり、実際、使用を推奨し…

サンクスページへのリダイレクトと同じく、Contact Form 7 のカスタムDOMイベントを使って、フォームの送信をGoogleアナリティクスでトラッキングします。

以下のページにフォームの送信をイベントとしてトラッキングする方法が記載されています。

フォーム送信を Google Analytics でトラッキングする
もし Google Analytics を使ってサイトのトラフィックを確認しているなら、きっとコンタクトフォー…

その他、Contact Form 7 の使い方や設定等は、以下のドキュメントを参考にしてください。

使い方
はじめに Contact Form 7 の基本的な使い方 管理画面 タグの使い方 フォームのテンプレートを編集…

ContactForm7 の reCAPTCHA設定方法です。最新バージョンの5.1からは、reCAPTCHA v3 APIを使うようになっています。

ContactForm7にreCAPTCHA v3を設定する
WordPressプラグイン「ContactForm7」で、reCAPTCHAの最新バージョン「reCAPTCHA v3」を設定してみました。最新のContactForm7 バージョン5.1からは、reCAPTCHA v3 APIを使うようになっています。

その他、ContactForm7の関連記事です。よかったらこちらもどうぞ・・・

問い合わせフォーム作成プラグイン Contact Form 7の使い方
WordPressサイトの問い合わせフォーム設置プラグイン「Contact Form 7」をご紹介します。Contact Form 7は簡単な初期設定とショートコードを追加するだけで、問い合わせフォームが設置できる定番プラグインです。
タイトルとURLをコピーしました