ContactForm7で送信完了画面に遷移する（プラグインなし）

ContactForm7では、デフォルトで送信完了画面に遷移する機能がありません。

フォーム画面下部に送信完了メッセージが表示されて、送信完了となります。

しかし、案件では、クライアントが送信完了画面の設置を希望することも多くあります。

今回は、contactform7で送信完了画面を設置する方法を解説します。

コード解説

まずはコード全文はこちら。

//functions.phpに以下を追記。
add_action('wp_footer', 'redirect_to_thanks_page');

function redirect_to_thanks_page() {

  //トップページのurlを取得
  $homeUrl = home_url();
  echo <<< EOD
    <script>
      document.addEventListener( 'wpcf7mailsent', function( event ) {

          //"/contact"以下は送信完了ページのurlに書き換える
          location = '{$homeUrl}/contact/complete';
      }, false );
    </script>
  EOD;
}

functions.phpに上記のコードを追記すると、コンタクトフォームによる送信完了時に送信完了ページに遷移します。

10行目の「wpcf7mailsent」はcontactform7公式が用意しているdomイベントです。

公式によれば、『Ajax のフォーム送信が完了し、またメールの送信も行われた場合に発生する。』とのこと。

つまり、①フォームがエラーなく稼働し、②メールもきちんと送られた、場合にのみ稼働するdomイベントです。

このdomイベントを使えば、適切に送信完了画面に遷移ができます。

自作テーマで完了画面に遷移しない場合の対処法

テーマを自作した際に、「送信完了画面への遷移が動かない」というケースがありました。

wordpressではwp_head()とwp_footer()というふたつの関数があり、これを両方読み込んでいないと、先述のコードが動かないようです。

これらの関数は一般的なテーマであれば、wp_head()はheader.phpで、wp_footer()はfooter.phpで読み込まれています。

しかし、自作テーマでは当然自分で適切な箇所にコードを埋め込む必要があります。

具体的な設置箇所や関数の機能については、下記外部サイト様をご参照ください。

wp_head();とwp_footer();とはいったい何なのか

WordPressテーマ開発をやり始めたころ、「header.phpにはwp_head();を、footer.phpには...

meshikui.com

参考

・ContactForm7公式：DOMイベント