ContactForm7でDOMイベントで送信完了画面へリダイレクト(移動)させる方法

Contactform7 リダイレクト 2017年

今日もブログをご覧くださいましてありがとうございます。

同じウェブ屋のNくんからLINEで質問があって、「Contact Form 7」のDOMイベントを使った新しいリダイレクト方法を教えて!!ってきたので、ありがたくネタにさせていただきます。

「Contact Form 7」は非常に優秀なお問い合わせフォーム制作プラグインですが、送信ボタンを押しても送信完了のメッセージが出るだけで、送信完了画面に遷移しません。

なので送信完了画面をつけるためには、少々細工をしなければいけませんでした。

今までは「on_sent_ok」という命令をContactform7のその他の設定画面で入力することで、実装してきましたが、その方法は2017年末で廃止されるということで、新しい方法が公開されましたので説明します。

結論から言うと、JavaScriptをそのままページ内に書き込み、CSSを追記するだけで完了します。

以前のリダイレクト方法「on_sent_ok」を使う方法

ContactForm7 確認画面 リダイレクト 旧方法

以前の方法は、ContactForm7のForm編集画面にて、

on_sent_ok:"location=’http://example.com/thanks/’;"

で、URLにリダイレクト先のページを指定(上記のURLの場合、「http://example.com/thanks/」)してあげるだけでよかったのですが「廃止予定の設定が使われている。」と出力されます。

2017年に「on_sent_ok」を使った方法は非推奨となり、廃止されるということなので、新しいDOMイベントを使った方法でリダイレクトさせる必要があります。

今回はその新しいDOMイベントを使った方法を解説します。

新しい送信完了画面へのリダイレクト方法

新しいDOMイベントを使った送信完了画面のリダイレクトの方法は以下のの手順で設定を行います。

全く新しいお問合わせページを作る場合は以下の方法でリダイレクトが設定できます。

送信完了ページ、お問合わせページを公開する

まずは固定ページを新規追加をクリックして送信完了ページとお問合わせページを公開します。

現在、送信完了ページがお問合わせページがある場合新しく公開する必要はありませんので、この工程は無視して下さい。

弊社の場合、このような送信完了画面を作りました。

スラッグはお問合わせページは「contact」、送信完了ページは「thankyou」というスラッグを割り当てました。

Google Analyticsで効果測定する場合、「thankyou」ページをトラッキングするのが一番効率的です。

「thankyou」ページはプラグインやテーマの機能で自動的にサイトマップに表示されないようにしたり、noindexにしたりもしてあげれば完璧です!

ContactForm7プラグインをインストールする

説明は不要かもしれませんがまずは「Contact Form 7」をインストールします、

管理画面 → プラグイン → 新規追加 → 「Contact Form 7」で検索し、「今すぐインストール」 → 「有効化」を押して有効化を完了させておきます。

お問合わせフォームを作る

ContactForm7プラグインをインストールしたら、左側に「お問合わせ」というメニューが追加されますので、「お問合わせ」 → 「新規追加」でフォームを新しく追加します。

もう既にフォームがあって、そのフォームを使う場合は場合はこの行程は無視して下さい。

デフォルトのフォームでも構いません。

お問い合わせフォームの編集画面が出ました。

タイトルに入力し、名前をつけて保存します。

ショートコードをコピーし、お問い合わせページにペーストします。

ContactForm7 ショートコード

ここまではページ移動しない普通のContactForm7の使い方と同じです。

こちらのページからお問い合わせを行ってもページ内で送信完了と表示されます。

ページリダイレクト用のDOMイベントコードを使う

公式サイトで用意されたこちらのコードを使います。

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

「location=’https://example.com/thankyou/’」の部分は遷移させたいページのフルパスを入れてあげればOKです。

適宜入れ替えてあげて下さい。

弊社ではthankyouページに移動するようにしています。

このコードを先程のショートコードの前にコピペします。

WordPressの編集画面のビジュアルモードではうまく行きませんので、必ずテキストモードで編集して下さい。

テンプレート内に埋め込んでと書いてありましたが特殊な状況でない限り、下記の書き方で大丈夫です。

フォームとの間に変なスペースが出てくる場合、改行が挟まれていることがありますので、改行は消しておいたほうが良いでしょう。

ContactForm javaScript リダイレクト

「Contact Form 7」の以前の「on_sent_ok」でリダイレクトしている場合は、ContactForm7のフォームその他の設定を削除してあげましょう。

ContactForm7 その他の設定

お問い合わせフォームのテストを行い、画面が遷移することを確認します。

きちんとthankyouページにリダイレクトします。

送信後のメッセージを非表示にするためにCSSの編集をおこなう

で、リダイレクトするのですが、一瞬、

「あなたのメッセージは送信されました。ありがとうございました。」

と言う送信後のメッセージが表示されてからリダイレクトします。

わかっていれば気にならないのですが、お問い合わせした人は気になると思いますので、このメッセージをCSSで非表示にします。

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

このCSSを追記します。

基本的にはWordPressテーマのstyle.cssに追記するのですが、最近のWordPressのテーマには外観 → カスタマイズ → 追加CSS に貼り付けてあげることでも可能です。

テーマやら環境によって最適な方法を選んであげて下さい。

ContactForm7 送信完了メッセージ 非表示

非表示になりました。

まとめ

「Contact Form 7」はとても柔軟なプラグインですので、こういうDOMイベントを使った事も自由に出来たりします。

本当にありがたいですね。

プラグイン作者はリダイレクトページが不要だと言っていますが、個人的にはマーケティングをやっている以上、ページ遷移して、こちらからのメッセージや、お問い合わせ後の流れなどを伝えたほうが顧客の満足度が高いと考えています。

つまり、今後のコンバージョンが上がるということですね。

一度、お問い合わページにて問い合わせをすることで、心理的なハードルも下がっているので、DOMイベントを使ったリダイレクト後のページでさらにアクションを促すこともできるんじゃないでしょうか。

きちんと設定を行うことで、エンドユーザーとのつながりがしっかりしたものになります。

こういう作業をEFO(Entry Form Optimization:エントリーフォーム最適化)っていうんですが、よそのフォームばっかりやってたんで、うちのそのまんまになってるコンタクトフォームも、そろそろやり替えないといけないなーと思う今日このごろです。

投稿者プロフィール

古田 健
古田 健

WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。

ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。