メールフォームの送信完了画面を設置して問い合わせ件数をアナリティクスで測定しましょう

2020.11.022024.04.23

この記事は約6分で読めます。

ワードプレスでメジャーな送信フォームのプラグインはコンタクトフォーム７です。とても優秀なプラグインで重宝しているのですが、送信完了画面が用意されていないのが残念です。ページ遷移をさせたくないという作者の意向のようです。
しかし、送信完了後に「送信完了」の画面に遷移させて、その送信完了ページをアナリティクスで測定するという方法を取りたいサイト管理者も多いはずです。そこで、コンタクトフォーム７に少しカスタマイズして、送信完了画面に遷移させる方法を設定してみました。

このページの目次

ContactForm7
1. コンタクトフォーム７で送信完了画面に遷移させる方法
送信完了画面を設定
1. 送信完了画面にはメタリフレッシュを入れておく
2. 送信完了ページがワードプレスの固定ページの場合はJavaScriptの挿入

ContactForm7

コンタクトフォーム７で送信完了画面に遷移させる方法

ワードプレス（WordPress）の管理画面から、コンタクトフォーム７（ContactForm7）の「フォーム」に数行ほど追記するだけでOKです。

上記の例では以下のように追記しました。

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘/thanks.html‘;
}, false );
</script>

この場合、送信完了画面は「/thanks.html」に遷移します。この部分を書き換えればいろいろと応用できますね。

送信完了画面を設定

送信完了画面は、テキストエディタなどで作成するのがよいです。ヘッダ部分にはアナリティクスのトラッキングコードを入れておきましょう。

テスト的に設置したのは「北陸の蕎麦食べ歩き」です。

thanks.htmlのソースは以下のようにしました。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>北陸の蕎麦食べ歩きにお問い合わせありがとうございます | 蕎麦の食べ歩き北陸</title>

<style type=”text/css”>
<!–
td { font-size: 14px; }
a { color: #0033CC; }
a:hover { color: #CC0000; }
–>
</style>

<script src=”//kitchen.juicer.cc/?color=**********=” async></script>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon”>

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-********-1″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-********-1’);
</script>

</head>
<body bgcolor=”#FFFFFF”>
<P align=”center”>
<br />
<br />
送信完了しました。<br />
ありがとうございました。<br>
<br />
<br />
<a href=”./” target=”_top”>
<img
src=”post1.gif” alt=”ホームページのトップページへ” border=”0″><br />
ホームページのトップページへ</a><br />
</p>
</body>
</html>