Contact Form7でサンクスページを設置する方法

送信完了画面はサンクスページを別に作るのがおすすめです。

CSSやJavaScriptを使って同じ画面内でお問い合わせ完了の表示をする方法もありますが、送信完了後に縦のスクロール位置がずれるなどのデメリットがあります。

またサンクスページを作ることにより、お問い合わせフォームでの離脱率を確認するのにも役立ちます。

この記事ではContact Form7でサンクスページを作成する方法を解説します。

サンクスページを作成する

まずは固定ページでサンクスページを作成します。

送信ボタンを押したらサンクスページに移動するようにする

functions.phpに以下を記載します。

// CF7 送信後にサンクスページに移動する
add_action('wp_footer', 'redirect_to_thanks_page');
function redirect_to_thanks_page()
{
    $homeUrl = home_url();
    echo <<< EOD
    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            location = '{$homeUrl}/thanks/';
        }, false );
    </script>
    EOD;
}

location = '{$homeUrl}/thanks/';のthanksの部分は、サンクスページのURLが異なる場合変更して下さい。

送信完了のメッセージを非表示にする

cssに以下の記載を追加します。
これでデフォルトの送信完了の表示が非表示になります。

// 送信完了メッセージの削除
.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}

まとめ

Contact Form7でサンクスページを設置する方法を解説しました。

少しでも参考になれば幸いです。