ふとContact Form 7にサンクスページが欲しくなりました。検索してみてサンクスページに飛ぶよう設定したもののページに飛ぶことはなく。
3時間格闘した結果ようやく遷移するようになったので備忘録として残しておきます。
結論：AJAXでの非同期送信ができていなかった
当サイトでは、コンタクトフォームのAJAX送信ができず、サンクスページに遷移しませんでした。
具体的には送信ボタンを押すと、一度リロードされて送信が完了するという状態でした。また再読み後、urlに謎の文字列が付与されていました
https://example.com/contact#wpcf7-111-o11
解決策は公式ページにも記載されていました。JavaScriptに関する問題が考えられそうです。
- JavaScript のファイルがロードされていない
- 他の JavaScript とのコンフリクト
- HTML の構造が正しくない
当サイトではレンダリングブロック対策として数年前に以下のコードを追加していました。現在はほかの方法で最適化していますし、すべてのコードにasynを指定しているため相性問題が起きそうなコードは不要でした。
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}結果このコードを取り除くことでajax通信ができるようになりました。上のようなコードや、最適化プラグインを使っている場合、まずはそちらをチェックすることをお勧めします。
F12キーを押してエラーをチェックしておくべきでした。
サンクスページに飛ぶ記述
サンクスページに飛ばす方法は簡単です。
以下のコードをカスタムhtmlで投稿(固定ページ)に追加するか、コンタクトフォームに埋め込みます。
赤字で示した部分をサンクスページとして指定するURLに書き換えてください。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks-page-url/';
}, false );
</script>
