【WP】Contact Form 7 でサンクスページを作成する
こんにちは。小野です。
今回は、WordPressのフォーム作成プラグイン「Contact Form 7」を使用する際に、
サンクスページ（お問い合わせ完了ページ）を作成する方法を書いていきます。
Contact Form 7 について
Contact Form 7 はWordPressのサイトにお問い合わせフォームを設置できるプラグインです。
日本語で使用でき、採用されているサイトも多いのではと思います。
しかし、このプラグインはデフォルトでサンクスページは提供されていません。
Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。
https://ja.wordpress.org/plugins/contact-form-7/
サンクスページの作り方
1. ページを作成する
通常の固定ページで作成します。
サンクスページはインデックスされないようにしておきましょう。
2.リダイレクトの実装
サンクスページへのリダイレクトはwpcf7mailsentイベントを使って実装します。
document.addEventListener('wpcf7mailsent', function(event) {
location = 'http://example.com/thanks/';
}, false);複数のフォームへの対応
複数のフォームに対して異なるリダイレクト先を設定するには、以下のようなJSで実装できます。
document.addEventListener('wpcf7mailsent', function(event) {
var redirects = {
'123': 'http://example.com/thanks1/',
'456': 'http://example.com/thanks2/'
// その他のフォームIDとURLを追加
};
if (redirects[event.detail.contactFormId]) {
location = redirects[event.detail.contactFormId];
} else {
location = 'http://example.com/default/'; // デフォルトのリダイレクト先
}
}, false);まとめ
サンクスページの作成は、ユーザーエクスペリエンスの向上やコンバージョントラッキングに役立つかもしれません。
古い情報ではon_sent_okフックを使用する方法がありましたが、現在は廃止されているので注意してください。
ちなみに、トラッキングのためだけなら無理にサンクスページを作成する必要はないので、サイトの要件に合わせて検討してみてください。