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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォーム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

目次へ