今回は、Contact Form 7 を利用している問い合わせフォームで、送信完了後に送信完了ページに遷移させる方法をご紹介します。
プラグイン：Contactform7を利用する事で、簡単にお問い合わせフォームを作成する事が出来ます。
その分、
- 入力項目を確認するためのページ
- お問い合わせ完了ページへの遷移
- 確認用メールアドレスの入力とチェック
などが、Contactform7だけでは出来なくなっています。
そこで、javascriptを利用して信完了ページに遷移させる方法をご紹介します。
Contactform7を使って問い合わせフォームを作る方法に関しては、以下を参考にしてください。
目次
送信完了ページを作成するメリットと具体的な利用方法
問い合わせをしてくれたユーザは、
- 「問い合わせをする」というアクションを1度行っているため、さらにその次のアクションへのハードルも下がっている
- もっと知りたいという意識がある。
といった状況にあります。
そのため、送信完了ページにて、
- セミナーの案内
- Lineへの登録
など、お問い合わせしてくれたユーザに合わせたコンテンツを提供する事で、参加や登録を促す事が出来ます。
また、多くの方は、
- お客様に自動返信メールを送る
- お問い合わせへの返信をする
などを行うかと思います。
そうした際に、お客さまのメールの設定によっては、送信したメールが迷惑メールに含まれてしまう可能性があります。
そこで、送信完了ページにて
- 自動返信を送っているから確認してほしい
- もし届いていなかったら、迷惑メールを確認してほしい
- 迷惑メールからの解除方法
を伝える事で、「送ったけど返信がない」といったトラブルを回避する事が出来ます。
送信完了後に送信完了ページに遷移させるための手順
以下手順にて実施します。
- 送信完了ページを作成する
- コードを追加する
手順1：送信完了ページを作成する
まずは、固定ページにて送信完了ページを作成します。
左メニュー[固定ページ]-[新規追加]をクリック
タイトル、パーマリンク、内容を入力の上、公開
手順2：コードを追加する
左メニュー[お問い合わせ]をクリックし、遷移させるフォームをクリック
フォームの下に、以下コードを追加して、[保存]をクリック
「http://example.com/」を先程作成した、送信完了ページのURLに変更してください。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>設定イメージ
補足：送信完了時のメッセージが気になる場合には
送信を行い、送信完了ページに遷移するまでの時間で、以下の文言が表示されます。
違和感があり変更したい場合には、以下手順で変更する事が出来ます。
左メニュー[お問い合わせ]をクリックし、遷移させるフォームをクリック
[メッセージ]タブをクリックし、[メッセージが正常に送信された]場合のメッセージを変更します。
まとめ
今回は、Contact Form 7 を利用している問い合わせフォームで、送信完了後に送信完了ページに遷移させる方法をご紹介させて頂きました。
送信完了ページを利用する事で、
- 次のアクションを促す
- トラブルを事前に回避する
などを行う事が出来ます。
しかし、上記でご紹介したような
- セミナーへの案内
- Lineへの登録
- 迷惑メールの解除の方法
など、全てを送信完了ページに盛り込んでしまうと、見づらく、伝わらないページになってしまいます。
そのため、お問合わせをしたユーザの状況や過去に起きたトラブル状況などに合わせて設定をしてください。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。