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

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

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

コンタクトフォーム7の「フォーム」に数行ほど追記するだけでOKです。

sousinkanryoucontactfrom7.jpg

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

<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=+sLrCfmGKx0=" 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-1080502-19');
</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>

当面、これで様子を見てみます。
実際には、トップページへのリンクだけでなく、注意事項を挿入したり、30秒後に特定のページにリダイレクトがかかるようにメタリフレッシュの設定したりするなどの工夫をするのがいいと思います。

メタリフレッシュは

<meta http-equiv="refresh" content="30;URL=/">

のようにヘッダ内に挿入すれば稼働します。

このエントリーをはてなブックマークに追加 遠田幹雄のLINE@アカウントを友だち追加  



この記事を書いた人

中小企業診断士:遠田幹雄の顔写真遠田 幹雄(とおだ みきお)
 
経営コンサルティング企業の株式会社ドモドモコーポレーション代表取締役。石川県かほく市に本社があり金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントです。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係るコンサルティング活動を展開しています。民民での直接契約を中心としていますが、商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣中小企業基盤整備機構の経営窓口相談に対応したりもしています。
保有資格:中小企業診断士、情報処理技術者
 
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介していますので興味ある方はご覧ください。


この記事のURL「https://dm2.co.jp/2020/11/contactform7thankshtml.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2020/11/contactform7thankshtml.html」をQRコードで表示「https://dm2.co.jp/2020/11/contactform7thankshtml.html」
パソコンで表示されたページをスマホでも見たい場合は、このQRコードをスマホのカメラ(QRコードが読めるリーダー)で読むとページが表示されます。