Contact Form7でサンクスページを作る【Cocoonで作動しない原因】

Googleアナリティクスでコンバージョンを計測するために、WordPressプラグイン『ContactForm7』でサンクスページを設定したい方のための記事です。

手順は、以下のたった3つです。

では、やっていきましょう！

Contact Form7でサンクスページを作る

まずは、表示させるサンクスページを作成します。

頻繁に更新するものでもないので固定ページにしましょう。

スラッグを、「thanks」などわかりやすいものに設定して、公開後、URLをコピーしておいてください。

ちなみに、当ブログでは、こんな感じにしました。

サンキューページを作ったら、次はContactForm7にスクリプトタグを貼ります。

ContactForm7の「フォーム」の最下部に、以下のコードを貼ってください。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'サンクスページURL';
}, false );
</script>

サンクスページURLに、①で作った固定ページのURLを入れます。

Contact Form7ではデフォルトだと、フォーム送信後はページ遷移せず、「メール送信しました。お問い合わせありがとうございました」というメッセージが返されます。

ページ遷移する前に、このメッセージがチラリと見えてしまうので、メッセージを「送信中」に変えます。

ContactForm7のタブから「メッセージ」を選択し、最上部の「メッセージが正常に送信された」の項目を

「送信中…」とします。

以上で、終了です。

問い合わせページからサンクスページまでの流れが、以下のようになっていればOKです。

実は本設定をする際、うまく画面遷移せず、かなり格闘しました^^;

原因からいうと、javascriptまわりの設定にあったようです。

当ブログで使用しているCocoonでは、高速化のための「JavaScriptの縮小化」設定があり、チェックを入れている状態では画面遷移しませんでした。

サンクスページに遷移しない方は、まずJavaScript関連の設定を見直してみてくださいね。