ContactForm7に完了画面をつける

WordPressのお問い合わせプラグインとしてContactForm7があります。めちゃくちゃ便利なのですが、完了後にわかりにくいメッセージが出てくるだけなのがちょっと不満。できれば送信後は完了画面に飛んでほしいところです。

調べるとどうやらそれができる方法があるみたいです。
functions.phpにjavascriptが走るような記述して、送信時にリダイレクトさせるようにするみたいですので、やってみましょう。

実際の処理はfunctions.phpに追記するみたいです。
こんな感じです。

1. サンクスページの実装

add_action( 'wp_footer', 'contact_form7_thanks_page' );
function contact_form7_thanks_page() {
  $thanks = home_url('/contact_comp/');
   echo <<< EOC
     <script>
      document.addEventListener( 'wpcf7mailsent', function() {
        location = '{$thanks}';
      }, false );
     </script>
   EOC;
}

wpcf7mailsentというイベントが発生したら「/contact_comp/」にリダイレクトする、という感じですね。当然ですがこれはjavascriptが生きていないとダメということでしょうね。まぁそんな環境は今どきあまりないので心配はいらないでしょう。

もちろん予め固定ページでサンクスページを作っておく必要はあります。
ちなみにここだと「contact_comp」がそれに当たりますね。

ただ、一つ問題が。
フォームが１つならいいのですが、２つ以上になるとこれではうまくいきませんでした。
たくさんのフォームをつくっても、「contact_comp」に飛んでしまいます。どうすればいいのか？

2. 複数のフォームに対応させる

どうやら条件分岐をすると複数フォームに対応できるようです。
各フォームのIDを拾って、それを元に分岐させるみたいですね。
IDは、postIDを使います。設定画面のURLが「admin.php?page=wpcf7&post=20&action=edit」の用になっていると思いますが、この「post=20」の部分です。「20」がIDです。

コードはこんな感じ。

add_action( 'wp_footer', 'contact_form7_thanks_page' );
function contact_form7_thanks_page() {
  $contact = home_url('/contact_comp/');
  $entry = home_url('/entry_comp/');
   echo <<< EOC
     <script>
      document.addEventListener( 'wpcf7mailsent', function( event ) {
        if ( '10' == event.detail.contactFormId ) {
          location = '{$contact}';
        } else if ( '20' == event.detail.contactFormId ) {
          location = '{$entry}';
        }
      }, false );
     </script>
   EOC;
}

それぞれのリダイレクト先のURLを指定し、eventの「contactFormId」を拾ってから、予め調べておいたpostIDと照らし合わせる感じです。

今回は以上です！