コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法
ちょっとタイトルがわかりづらくなってしまいました。。。
今回は少し前に書いた、”コンタクトフォーム7にサンクスページを追加する方法”の続きになります。こちらの記事では、送信後に別に用意したサンクスページにジャンプさせてみました。今回は、複数のお問い合わせフォームを使用していて、それぞれのフォームに合わせたサンクスページに移動させたい場合のカスタマイズ方法です。
お見積りフォーム⇒「お見積のご依頼ありがとうございました！」
お問い合わせフォーム⇒「お問い合わせありがとうございました！」
みたいな感じで、フォームに合わせて違うページに遷移させてみましょう。
～ 目次 ～
送信後にページ遷移させる基本的なコード
以前の記事のコピーですが、基本的なコードはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'wp_footer', 'add_origin_thanks_page' ); function add_origin_thanks_page() { echo <<< EOC <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://whitewood-hp.com/web-tips'; }, false ); </script> EOC; } |
上のコードの6行目のURLをサンクスページのURLに書き換えて、functions.phpに貼り付ければ基本的な設定はOKです。
今回は、このコードを書き換えて、お問い合わせフォームがどのタイプなのかをフォームIDで判定して振り分けしてみます。
サンクスページとフォームの準備
サンクスページに使用するページの作成
固定ページでも投稿ページでも構いません。リンクさせるページを作成しておきます。
フォームIDを調べる
フォームIDは、コンタクトフォーム7の表示用のショートコード内に記載されています。フォームの一覧画面でも表示されていますので簡単に確認できます。このIDを利用してサンクスページを振り分けます。調べておきましょう。
フォームIDを判定してフォームごとに指定のサンクスページへ遷移させるコード
基本的にコピペでOKですが、下のコードの6行目～9行目はサイトの実際の情報に合わせて書き換えて下さい。使用中のテーマのfunctions.phpに貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action( 'wp_footer', 'add_origin_thanks_page' ); function add_origin_thanks_page() { echo <<< EOC <script> var thanksPage = { 50: 'http://example.com/thankspage1', 88: 'http://example.com/thankspage2', 100: 'http://example.com/thankspage3', 109: 'http://example.com/thankspage4', }; document.addEventListener( 'wpcf7mailsent', function( event ) { location = thanksPage[event.detail.contactFormId]; }, false ); </script> EOC; } |
書き換え方法
6行目を例に説明すると、50がフォームID、その後のURLが対応させるサンクスページのURLです。
|
1 |
50: 'http://example.com/thankspage1', |
実際のコンタクトフォームのIDが48で、サンクスページのURLがhttp://example.com/arigatoなら下のように書き換えます。
|
1 |
48: 'http://example.com/arigato', |
上のコードでは、張り切って4パターンのサンクスページを登録してありますが、2パターンでよければ8行目～9行目は削除して下さい。
逆に足りなければ10パターンでも20パターンでも追加できますので、行をコピーしてIDとURLを書き換えましょう。
デフォルトのサンクスメッセージの消し方
ページ遷移するまでの一瞬のタイムラグの間に、コンタクトフォーム7のデフォルトのサンクスメッセージが見える事があります。不具合感が漂うので、気になる場合は消してしまいましょう。
|
1 2 3 |
.wpcf7-mail-sent-ok{ display:none!important; } |
上はCSSなのでfunctions.phpではなく、テーマのカスタマイザーの追加CSS*に貼り付けましょう。
* 初心者の方向けに追加CSSとしましたが、テーマがカスタマイザーに対応していない場合や「追加CSS」が無い場合は、style.cssなどに書いてももちろんOKです。
ちょっと雑に!importantとか使っちゃってますが、これでエラーメッセージ等の場合は表示して、正常に送信された場合のサンクスメッセージだけ消すことができます。
これでサンクスページに移動する前にチラッと見えるのが防げますね。
最後に
いい感じにサンクスページの振り分けができましたか？
ページの投稿タイプや投稿IDを利用して、PHPで振り分ける事も可能です。ですが、ページのサイドバーやフッター内など、たくさんのページで使い回すフォームの場合、正確に振り分けるのが大変になります。フォームIDを上手に利用すると、サイト全体の共通部分で使用しても、簡単にサンクスページを振り分けられますね。
参考サイト
コンタクトフォーム7ではフォームIDの他にも、イベントハンドラーで使用できるプロパティがあるようです。気になる方は下のリンクからどうぞ。
DOM イベント | Contact Form 7 [日本語]
