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

スポンサーリンク
ビッグバナー728

contactform7 サンクスページ

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

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

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

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

スポンサーリンク

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

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 にリダイレクトさせるには

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

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

参考記事 フォーム送信を Google Analytics でトラッキングする

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

Contact Form 7 ドキュメント Contact Form 7 の使い方

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

関連記事 WordPressの問い合わせフォーム作成プラグイン Contact Form 7の使い方

関連記事 Contact Form 7 で確認画面を表示するプラグイン Contact Form 7 add confirm

関連記事 ContactForm7のスパムメール対策 reCAPTCHA設定方法

スポンサーリンク
PC用
PC用

フォローする