コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法
2018年11月21日2019年1月16日

ちょっとタイトルがわかりづらくなってしまいました。。。

今回は少し前に書いた、”コンタクトフォーム7にサンクスページを追加する方法”の続きになります。こちらの記事では、送信後に別に用意したサンクスページにジャンプさせてみました。今回は、複数のお問い合わせフォームを使用していて、それぞれのフォームに合わせたサンクスページに移動させたい場合のカスタマイズ方法です。

お見積りフォーム⇒「お見積のご依頼ありがとうございました!

お問い合わせフォーム⇒「お問い合わせありがとうございました!

みたいな感じで、フォームに合わせて違うページに遷移させてみましょう。

送信後にページ遷移させる基本的なコード

以前の記事のコピーですが、基本的なコードはこんな感じです。

上のコードの6行目のURLをサンクスページのURLに書き換えて、functions.phpに貼り付ければ基本的な設定はOKです。

今回は、このコードを書き換えて、お問い合わせフォームがどのタイプなのかを判定して振り分けしてみます。

サンクスページとフォームの準備

サンクスページに使用するページの作成

固定ページでも投稿ページでも構いません。リンクさせるページを作成しておきます。

フォームIDを調べる

フォームIDは、コンタクトフォーム7の表示用のショートコード内に記載されています。フォームの一覧画面でも表示されていますので簡単に確認できます。このIDを利用してサンクスページを振り分けます。調べておきましょう。

コンタクトフォーム7のフォームIDを調べる

 

フォームIDを判定してフォームごとに指定のサンクスページへ遷移させるコード

基本的にコピペでOKですが、下のコードの6行目~9行目はサイトの実際の情報に合わせて書き換えて下さい。使用中のテーマのfunctions.phpに貼り付けます。

書き換え方法

6行目を例に説明すると、50がフォームID、その後のURLが対応させるサンクスページのURLです。

実際のコンタクトフォームのIDが48で、サンクスページのURLがhttp://example.com/arigatoなら下のように書き換えます。

上のコードでは、張り切って4パターンのサンクスページを登録してありますが、2パターンでよければ8行目の9行目は削除して下さい。

逆に足りなければ10パターンでも20パターンでも追加できますので、行をコピーしてIDとURLを書き換えましょう。

デフォルトのサンクスメッセージの消し方

ページ遷移するまでの一瞬のタイムラグの間に、コンタクトフォーム7のデフォルトのサンクスメッセージが見える事があります。不具合感が漂うので、気になる場合は消してしまいましょう。

上はCSSなのでfunctions.phpではなく、テーマのカスタマイザーの追加CSS*に貼り付けましょう。

* 初心者の方向けに追加CSSとしましたが、テーマがカスタマイザーに対応していない場合や「追加CSS」が無い場合は、style.cssなどに書いてももちろんOKです。

ちょっと雑に!importantとか使っちゃってますが、これでエラーメッセージ等の場合は表示して、正常に送信された場合のサンクスメッセージだけ消すことができます。

これでサンクスページに移動する前にチラッと見えるのが防げますね。

最後に

いい感じにサンクスページの振り分けができましたか?

ページの投稿タイプや投稿IDを利用して、PHPで振り分ける事も可能です。ですが、ページのサイドバーやフッター内など、たくさんのページで使い回すフォームの場合、正確に振り分けるのが大変になります。フォームIDを上手に利用すると、サイト全体の共通部分で使用しても、簡単にサンクスページを振り分けられますね。

参考サイト

コンタクトフォーム7ではフォームIDの他にも、イベントハンドラーで使用できるプロパティがあるようです。気になる方は下のリンクからどうぞ。

DOM イベント | Contact Form 7 [日本語]

関連のある記事

コンタクトフォーム7でreCAPTCHA V3を導入する方法

コンタクトフォーム7でreCAPTCHA V3を導入する方法

記事を読む

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

記事を読む

コンタクトフォーム7にサンクスページを追加する方法

コンタクトフォーム7にサンクスページを追加する方法

記事を読む

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

記事を読む

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages