【Contact Form7】送信後に指定URLにリダイレクトさせる方法【コピペOK】

ハシビィくん

Contact Form7で送信後にサンクスページに遷移できるようにしたいっすけど、プラグイン内に設定項目がないっす！

カピーさん

今回紹介するコードをコピペすると実装できるからサクッと紹介していくぞ！

人気プラグイン『Contact Form7』ですが、標準ではサンクスページへの遷移機能を有していません。ですが、簡単なコードを追記するだけで送信後にサンクスページに切り替わるようにできますので、ぜひ参考にしてみてください。

Contact Form7でリダイレクト設定する方法

『Contact Form7』の設定でリダイレクトさせたい問い合わせフォームを開いてください。

以下のコードをフォームの1番下にコピペするだけでOKです。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://example.com/';
}, false );
</script>

https://example.com/部分はリダイレクトさせたいURLに書き換えてください。

サンクスページへの遷移が失敗する理由

サンクスページへの遷移設定したのに、送信ボタンを押してもサンクスページに遷移しないケースがあります。その場合は、以下の2つが考えられます。

コードが誤っている

『Contact Form7』のリダイレクト用の追記コードが誤っているパターンです。文字が欠けていたり、URLを書き換える際に「'・;」を消してしまっていることが多いので注意してください。

URLの設定が間違っている

リダイレクト先となるURLの設定が誤っているとエラーとなったり、意図しないページへの遷移となってしまいます。アドレスバーなどからURLをコピペするのがミスを防げるのでおすすめです。

公式からトラッキングするためには不必要と宣言

今回紹介している別URLにリダイレクトさせる主目的として、Google Analyticsでフォーム送信をトラッキングするために「サンクスページ」へのリダイレクトを設定したいと言うケースが見受けられます。

ですが、トラッキングさせるためにリダイレクト（別ページ）を用意する必要はありません。詳しい内容は下記記事を参考にしていただければと思います。

Contact Form 7

フォーム送信を Google Analytics でトラッキングする サイトのトラフィックを Google Analytics で監視しているなら、同様にフォーム送信も追跡したいと…

実際問題トラッキングさせるためであれば、不要だと思います。ユーザー側にしてみれば、不必要にページが切り替わっているとも言えます。

『Contact Form7』は標準では送信が成功時のメッセージを表示可能になっています。ユーザーに送信の成功を伝えたいが目的の場合は不要な可能性もあります。

まとめ：送信後に指定URLにリダイレクトさせる方法

『Contact Form7』でサンクスページを設定することで、ユーザビリティの向上などメリットが多く期待できます。

昨今ですと、サンクスページで自社コンテンツのオウンドメディアの宣伝をするケースも出てきたりと、活用の幅が広がってきています。

応用を効かせると、お問い合わせページ内の選択内容によってサンクスページを切り替えるなども可能です。この方法は専門知識が必要になりますので、ご所望の場合はお問い合わせいただければと思います。