Contact Form 7 送信完了画面とサンクスページ

送信完了メッセージ

初期状態では送信完了後、フォームの下に送信完了のメッセージが表示されます。
こちらの表示をフォームより上部に表示させるには、フォームの設定画面で
[response] というコードを表示させたい場所に入れることで可能です。

送信完了すると、formタグのclassにsentが付与されます。
そこで以下cssを追加すると非表示になります。

form.sent {
　　display:none;
}

サンクスページは必要ない場合は上記方法で多少のカスタマイズが可能です。

公式ではサンクスページは不要とありますが、Yahooのコンバージョンを入れるために等
どうしてもサンクスページが必要な場合があります。

サンクスページの追加はいたって簡単です。
以下のJavaScriptを追加すれば大丈夫です。
フォーム設定画面の一番下に入れても大丈夫ですし、head内、function.phpでもOKです。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'サンクスページのURL';
}, false );
</script>

上記JavaScriptを設定したにも関わらず、サンクスページにリダイレクトしない場合は
以下を確認してみてください。

WordPressのテンプレートのheader.phpに<?php wp_head;?>、footer.phpに<?php wp_footer;?>を
必ず閉じタグの前に入れる必要があります。
WordPressには必要なタグなので、記載忘れがないか確認してみてください。

実は私がはまってしまったのが、Wordpress標準のjQueryを無効にして最新のjQueryを
呼び込んでいたため、サンクスページのリダイレクトのJavaScriptが動きませんでした。

もし最新のjQueryを使いたい場合は<?php wp_head(); ?>より上部に記載すると併用可能だそうです。