WordPressでContact Form 7を使って申し込みフォームを作っていると、ある程度運用が進んだ段階で、次のような疑問が出てきます。
「この申し込みは、どの記事から来たのだろう？」
「どのページを読んだ人が、フォームを送信してくれたのだろう？」
「記事別に反応を見たいけれど、Contact Form 7のメールには申し込みページの情報しか入らない」
Contact Form 7では、フォーム送信時に名前・メールアドレス・コメントなどをメールで受け取れます。
しかし、標準設定のままだと、どの記事から申し込みページへ来たのかまでは分かりにくいことがあります。
この記事では、Contact Form 7で申し込みの流入元を確認する方法を、初心者向けに手順つきで解説します。
今回は主に、次の2つの方法を紹介します。
- リファラーを使って、直前に見ていたページURLを取得する方法
?from=という識別子を使って、流入元を明示的に判別する方法
難しいアクセス解析ツールを使わなくても、Contact Form 7のhidden項目と少しのJavaScriptを使えば、申し込みメールに「どこから来たか」を入れることができます。
Contact Form 7で「どこから申し込みが来たか」を確認したい
Contact Form 7で申し込みフォームを運用していると、最初は「フォームが送信されること」自体が目的になります。
たとえば、次のような項目を受け取れれば、まずは十分に見えます。
お名前
メールアドレス
コメントしかし、ブログや記事から申し込みページへ誘導している場合、次に知りたくなるのが流入元です。
たとえば、次のような流れです。
SKUの記事を読む
↓
無料申し込みページへ移動
↓
Contact Form 7で申し込み
↓
管理者にメールが届くこのとき管理者としては、メールを見たときに、
この人はSKUの記事から来たと分かると、とても便利です。
記事別に申し込みが分かれば、次のような判断ができます。
どの記事が申し込みにつながっているか
どのCTAボタンが反応しているか
どの記事を強化すべきか
どの導線が弱いかつまり、単に問い合わせを受け取るだけでなく、記事ごとの成果を確認できるようになるということです。
申し込みページの情報だけでは不十分な理由
ここで初心者が混乱しやすいのが、Contact Form 7のフォームと申し込みページの違いです。
Contact Form 7のフォームとは、WordPress管理画面の、
お問い合わせ
↓
コンタクトフォームで作るフォーム本体のことです。
たとえば、フォーム編集画面には次のような内容があります。
<label> お名前
[text* your-name autocomplete:name placeholder "例）山田 太郎"] </label>
<label> メールアドレス
[email* your-email autocomplete:email placeholder "例）info@example.com"] </label>
<label> コメント（任意）
[textarea your-message placeholder "ご質問やご要望があればご記入ください。"] </label>
[submit "無料で申し込む"]これは、入力欄や送信ボタンを定義しているフォーム本体です。
一方で、申し込みページとは、WordPressの固定ページや投稿ページとして作ったページのことです。
たとえば、
https://example.com/free-download/のようなページです。
この申し込みページの本文内に、Contact Form 7のショートコードを貼ることで、ページ上にフォームが表示されます。
[contact-form-7 id="1234" title="無料申し込みフォーム"]つまり、関係はこうです。
Contact Form 7のフォーム
＝入力欄・送信ボタンの部品
申し込みページ
＝そのフォームを表示しているページたとえるなら、
フォーム ＝ 申込用紙
申し込みページ ＝ 申込用紙を置いている受付カウンターです。
Contact Form 7には、[_url] などの便利なメールタグがあります。
ただし、これをメール本文に入れた場合、多くのケースではフォームが設置されている申し込みページのURLが入ります。
知りたいのは、申し込みページのURLではなく、
その前に読んでいた記事です。
そのため、標準のメールタグだけでは目的に合わないことがあります。
流入元を確認するにはhidden項目を使う
Contact Form 7で流入元をメールに入れるには、hidden項目を使います。
hidden項目とは、画面には表示されないけれど、フォーム送信時に一緒に送信される項目です。
通常の入力欄は、ユーザーが画面上で入力します。
お名前
メールアドレス
コメント一方、hidden項目はユーザーには見えません。
その代わり、JavaScriptなどで値を入れておくことで、フォーム送信時に裏側で一緒に送れます。
今回使うhidden項目は、たとえば次のようなものです。
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]
[hidden from_param id:from_param]それぞれの役割は次の通りです。
referer_page
→ 直前に見ていたページURLを入れる
referer_slug
→ 直前に見ていたページURLから取り出した最後の部分を入れる
from_param
→ URLに付けた ?from= の値を入れるこの3つを使うことで、申し込みメールに流入元情報を追加できます。
方法1｜リファラーで申し込み元ページURLを取得する
まずは、リファラーを使う方法です。
リファラーとは、簡単に言うと直前に見ていたページの情報です。
たとえば、ユーザーが次のように移動したとします。
https://example.com/sku-meaning/
↓
https://example.com/free-download/この場合、申し込みページ側から見ると、直前に見ていたページは、
https://example.com/sku-meaning/です。
JavaScriptでは、これを次のように取得できます。
document.referrerこの document.referrer を使うと、直前ページのURLを取得できます。
ただし、リファラーは必ず取得できるとは限りません。
直接申し込みページを開いた場合や、ブラウザ・セキュリティ設定・SNSアプリなどの影響で空になる場合もあります。
それでも、通常の記事内リンクから申し込みページへ移動するケースでは、実務上かなり役立ちます。
Contact Form 7にhidden項目を追加する
まず、Contact Form 7のフォーム編集画面を開きます。
現在のフォームが次のようになっているとします。
<label> お名前
[text* your-name autocomplete:name placeholder "例）山田 太郎"] </label>
<label> メールアドレス
[email* your-email autocomplete:email placeholder "例）info@example.com"] </label>
<label> コメント（任意）
[textarea your-message placeholder "ご質問やご要望があればご記入ください。"] </label>
[submit "無料で申し込む"]ここに、hidden項目を追加します。
まずはリファラーだけを使うなら、次の2行を追加します。
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]追加後は、次のようになります。
<label> お名前
[text* your-name autocomplete:name placeholder "例）山田 太郎"] </label>
<label> メールアドレス
[email* your-email autocomplete:email placeholder "例）info@example.com"] </label>
<label> コメント（任意）
[textarea your-message placeholder "ご質問やご要望があればご記入ください。"] </label>
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]
[submit "無料で申し込む"]hidden項目は画面に表示されないので、送信ボタンの直前あたりに入れておけば問題ありません。
ここで大事なのは、id:referer_page や id:referer_slug を付けていることです。
あとでJavaScriptからこの項目を探して値を入れるため、idが必要になります。
メール本文に申し込み元情報を入れる
次に、Contact Form 7の「メール」タブを開きます。
メール本文の下の方に、次のような情報を追加します。
━━━━━━━━━━━━━━━━━━
【申込元情報】
申込元ページURL：[referer_page]
申込元ページ識別子：[referer_slug]
申し込みページURL：[_url]
━━━━━━━━━━━━━━━━━━これで、フォーム送信時にhidden項目へ値が入っていれば、メール本文に表示されます。
ここでのポイントは、[referer_page] や [referer_slug] は、先ほどフォームに追加したhidden項目の名前と一致させることです。
たとえば、フォーム側が、
[hidden referer_page id:referer_page]なら、メール側では、
[referer_page]と書きます。
フォーム側が、
[hidden referer_slug id:referer_slug]なら、メール側では、
[referer_slug]と書きます。
名前が1文字でも違うと、メールに値が入りません。
申し込みページにJavaScriptを追加する
ここが、初心者にとって一番迷いやすいところです。
JavaScriptを入れる場所は、Contact Form 7のフォーム編集画面ではありません。
JavaScriptを入れるのは、そのフォームを表示している申し込みページです。
WordPress管理画面で、申し込みページを編集します。
たとえば、
固定ページ
↓
無料申し込みページ
↓
編集のように進みます。
そのページの中にContact Form 7のフォームが貼られているはずです。
ショートコードなら、次のようなものです。
[contact-form-7 id="1234" title="無料申し込みフォーム"]このフォームの下あたりに、カスタムHTMLブロックを追加します。
そして、次のコードを貼ります。
<script>
document.addEventListener('DOMContentLoaded', function () {
var refUrlField = document.getElementById('referer_page');
var refSlugField = document.getElementById('referer_slug');
var ref = document.referrer || '';
if (refUrlField) {
refUrlField.value = ref;
}
if (refSlugField && ref) {
try {
var refUrl = new URL(ref);
var parts = refUrl.pathname.split('/').filter(Boolean);
var slug = parts.length ? parts[parts.length - 1] : '';
refSlugField.value = slug;
} catch (e) {
refSlugField.value = '';
}
}
});
</script>このコードでは、まず直前ページURLを取得しています。
var ref = document.referrer || '';次に、そのURLをhidden項目に入れています。
refUrlField.value = ref;さらに、URLの最後の部分を取り出して、識別子として入れています。
たとえば、直前ページが次のURLだった場合、
https://example.com/sku-meaning/最後の部分は、
sku-meaningです。
この値が、
[referer_slug]としてメールに入ります。
方法2｜?from=識別子で流入元を明示する
次に、?from= を使う方法です。
これは、記事側のリンクにあらかじめ目印を付けておく方法です。
たとえば、申し込みページのURLが次のようなものだとします。
https://example.com/free-download/SKUの記事からこの申し込みページへ誘導する場合、リンクを次のようにします。
https://example.com/free-download/?from=sku-meaningこの ?from=sku-meaning の部分が、流入元を判別するための識別子です。
分解すると、次のようになります。
?from=sku-meaning? → ここからURLパラメータが始まる
from → パラメータ名
= → 値を入れる記号
sku-meaning → 識別子つまり、
from = sku-meaningという情報を、申し込みページのURLに付けているわけです。
この値は、記事スラッグに限りません。
たとえば、次のような識別子も使えます。
?from=sku-meaning
?from=sku-meaning-h2cta
?from=x-post-202605
?from=stepmini-banner
?from=footer-cta
?from=campaign-a大事なのは、あとでメールを見たときに、どこから来た申し込みか分かる名前にすることです。
from識別子をContact Form 7で受け取る
?from= の値をメールに入れるには、Contact Form 7側にhidden項目を追加します。
フォーム編集画面に、次の1行を追加します。
[hidden from_param id:from_param]リファラー用の項目も一緒に使うなら、フォームは次のようになります。
<label> お名前
[text* your-name autocomplete:name placeholder "例）山田 太郎"] </label>
<label> メールアドレス
[email* your-email autocomplete:email placeholder "例）info@example.com"] </label>
<label> コメント（任意）
[textarea your-message placeholder "ご質問やご要望があればご記入ください。"] </label>
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]
[hidden from_param id:from_param]
[submit "無料で申し込む"]次に、メール本文にfrom識別子を追加します。
━━━━━━━━━━━━━━━━━━
【申込元情報】
申込元ページURL：[referer_page]
申込元ページ識別子：[referer_slug]
from識別子：[from_param]
申し込みページURL：[_url]
━━━━━━━━━━━━━━━━━━from識別子を取得するJavaScript
次に、申し込みページ側にJavaScriptを追加します。
?from= の値だけを取得するなら、コードは次のようになります。
<script>
document.addEventListener('DOMContentLoaded', function () {
var fromParamField = document.getElementById('from_param');
if (fromParamField) {
var currentUrl = new URL(window.location.href);
var from = currentUrl.searchParams.get('from') || '';
fromParamField.value = from;
}
});
</script>このコードは、現在表示している申し込みページのURLを確認し、
?from=xxxの xxx 部分を取り出して、hidden項目に入れています。
たとえば、申し込みページURLが次のような場合、
https://example.com/free-download/?from=sku-meaningメールには次のように入ります。
from識別子：sku-meaningリファラーとfrom識別子を両方使う完成版
実務では、リファラーとfrom識別子を両方使うと安心です。
リファラーは自動で直前ページを取得できます。
一方、from識別子は自分で明示的に流入元を指定できます。
両方入れておけば、片方が空でももう片方で判断できる場合があります。
Contact Form 7のフォームには、次の3行を追加します。
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]
[hidden from_param id:from_param]メール本文には、次のように追加します。
━━━━━━━━━━━━━━━━━━
【申込元情報】
申込元ページURL：[referer_page]
申込元ページ識別子：[referer_slug]
from識別子：[from_param]
申し込みページURL：[_url]
━━━━━━━━━━━━━━━━━━申し込みページには、次のJavaScriptを入れます。
<script>
document.addEventListener('DOMContentLoaded', function () {
var refUrlField = document.getElementById('referer_page');
var refSlugField = document.getElementById('referer_slug');
var fromParamField = document.getElementById('from_param');
var ref = document.referrer || '';
if (refUrlField) {
refUrlField.value = ref;
}
if (refSlugField && ref) {
try {
var refUrl = new URL(ref);
var parts = refUrl.pathname.split('/').filter(Boolean);
var slug = parts.length ? parts[parts.length - 1] : '';
refSlugField.value = slug;
} catch (e) {
refSlugField.value = '';
}
}
if (fromParamField) {
var currentUrl = new URL(window.location.href);
var from = currentUrl.searchParams.get('from') || '';
fromParamField.value = from;
}
});
</script>これで、次の情報をメールで受け取れるようになります。
申込元ページURL
申込元ページ識別子
from識別子
申し込みページURL実際にメールでどのようになるか見てみましょう。
記事側リンクにfrom識別子を付ける
from識別子を使う場合は、記事側の申し込みリンクも変更します。
たとえば、通常のリンクが次のようになっているとします。
<a href="https://example.com/free-download/">
無料で申し込む
</a>これを、次のように変更します。
<a href="https://example.com/free-download/?from=sku-meaning">
無料で申し込む
</a>別の記事なら、fromの値を変えます。
<a href="https://example.com/free-download/?from=sku-code-vs-jan">
無料で申し込む
</a>ボタン位置まで区別したい場合は、次のようにしてもよいです。
<a href="https://example.com/free-download/?from=sku-meaning-h2cta">
無料で申し込む
</a>この場合、sku-meaning-h2cta を見れば、
SKU記事のH2付近CTAから来たというように判断できます。
すでにURLに?がある場合の注意点
URLパラメータを付けるときに注意したいのが、? と & の違いです。
URLにまだパラメータがない場合は、?from= を使います。
https://example.com/free-download/?from=sku-meaning一方で、すでにURLに ? がある場合は、2つ目以降のパラメータは & でつなぎます。
たとえば、すでに次のようなURLだった場合、
https://example.com/free-download/?campaign=skufrom識別子を追加するときは、次のようにします。
https://example.com/free-download/?campaign=sku&from=sku-meaningここを間違えて、
https://example.com/free-download/?campaign=sku?from=sku-meaningのようにしてしまうと、正しく取得できない場合があります。
初心者の方は、まずは次のルールだけ覚えておくと分かりやすいです。
最初のパラメータは ?
2つ目以降は &リファラーとfrom識別子はどちらを使えばいい？
初心者の方は、まずリファラー取得だけでも十分です。
リファラーなら、記事側のリンクを1つずつ修正しなくても、直前ページURLを取得できます。
ただし、リファラーには取得できないケースがあります。
直接申し込みページを開いた場合
ブックマークから開いた場合
一部のブラウザやアプリ経由の場合
セキュリティ設定でリファラーが送られない場合一方、?from= は自分でリンクに明示的に付けるため、より確実に管理しやすい方法です。
特に、次のような場合はfrom識別子がおすすめです。
記事別に申し込み数を見たい
ボタン位置ごとに反応を見たい
SNS投稿からの申し込みを分けたい
広告やキャンペーン別に確認したい最初はリファラーだけで始めて、必要になったらfrom識別子を追加する形でも問題ありません。
ただし、最初から少ししっかり管理したい場合は、リファラーとfrom識別子を両方メールに入れておくと安心です。
よくあるトラブルと確認ポイント
最後に、設定してもうまく表示されない場合の確認ポイントを整理します。
メールに何も表示されない
まず、Contact Form 7のフォーム側とメール側で名前が一致しているか確認してください。
フォーム側が、
[hidden referer_page id:referer_page]なら、メール側は、
[referer_page]です。
referer_page と referrer_page のように、スペルが違うと値は入りません。
JavaScriptを入れる場所が違う
JavaScriptは、Contact Form 7のフォーム編集画面ではなく、フォームを表示している申し込みページに入れます。
WordPressの申し込みページ編集画面で、カスタムHTMLブロックを追加し、そこに貼り付けます。
hidden項目を入れ忘れている
JavaScriptだけを入れても、Contact Form 7側にhidden項目がなければ値は送信されません。
必ずフォーム側に次のような項目を入れてください。
[hidden referer_page id:referer_page]
[hidden referer_slug id:referer_slug]
[hidden from_param id:from_param]直接アクセスではリファラーが空になる
申し込みページを直接開いてテストすると、referer_page が空になることがあります。
リファラーの動作を確認したい場合は、必ず次の流れでテストします。
記事ページを開く
↓
記事内リンクから申し込みページへ移動
↓
フォーム送信直接申し込みページを開いて送信しても、直前ページがないため、リファラーは空になります。
from識別子が入らない
from識別子を確認したい場合は、申し込みページURLに ?from= が付いているか確認してください。
https://example.com/free-download/?from=sku-meaningこのようなURLで申し込みページを開いて送信すれば、メールにfrom識別子が入るはずです。
まとめ｜Contact Form 7でも申し込み元は確認できる
Contact Form 7の標準設定だけでは、どの記事から申し込みが来たかを確認しにくい場合があります。
特に、記事から申し込みページへ移動してフォームを送信する流れでは、[_url] だけでは申し込みページのURLしか分からないことがあります。
その場合は、hidden項目とJavaScriptを使うことで、申し込み元ページやfrom識別子をメールに入れることができます。
この記事のポイントは次の通りです。
Contact Form 7のフォームと申し込みページは別物
流入元を取るにはhidden項目を使う
リファラーで直前ページURLを取得できる
?from=識別子を使うと流入元を明示できる
メール本文に申込元情報を入れると記事別の反応を確認しやすい最初から難しい解析ツールを入れなくても、Contact Form 7の設定だけで、申し込み元の確認はある程度できます。
まずはリファラーで申し込み元ページURLを取得し、必要に応じて ?from= 識別子を追加していくとよいでしょう。
記事別・ボタン別・SNS投稿別に申し込みを確認できるようになると、どの導線が成果につながっているかが見えやすくなります。
コメント