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

2018年11月21日2021年1月14日

この記事は最終更新から3年以上経過しています。内容が古くなっている可能性があります。

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

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

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

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

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

～目次～

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

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

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;
}

add_action( 'wp_footer', 'add_origin_thanks_page' );

function add_origin_thanks_page() {

echo <<< EOC

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に貼り付けます。

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;
}

add_action( 'wp_footer', 'add_origin_thanks_page' );

function add_origin_thanks_page() {

echo <<< EOC

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です。

    50: 'http://example.com/thankspage1',

1	50: 'http://example.com/thankspage1',

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

    48: 'http://example.com/arigato',

1	48: 'http://example.com/arigato',

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

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

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

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

.wpcf7-mail-sent-ok{
    display:none!important;
}

.wpcf7-mail-sent-ok{

display:none!important;

}

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

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

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

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

最後に

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

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