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

Contact Form7でサンクスページを作る【Cocoonで作動しない原因】
tochiblog執筆者情報

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

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

  1. サンクスページを作る
  2. Contact Form7にタグを貼る(コピペコード紹介)
  3. Contact Form7のメッセージを変更する

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

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

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

手順①:サンクスページの作成

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

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

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

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

tochiblog問い合わせ完了画面

②Contact Form7にタグを貼る(コピペコード紹介)

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

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

ContactForm7フォーム最下部にペースト
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'サンクスページURL';
}, false );
</script>

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

③デフォルトの「送信完了」メッセージを変更する

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

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

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

「送信中…」とします。

ContactFormのメッセージを変更する

以上で、終了です。

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

サンクスページに遷移しない…うまくいかない場合は

サンクスページに遷移しない…うまくいかない場合は

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

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

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

JavaScriptまわりの設定を見直す

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