Contact Form 7で流入元を確認する方法｜申し込み元ページとfrom識別子をメールに入れる手順｜　WordPress

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=sku

from識別子を追加するときは、次のようにします。

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投稿別に申し込みを確認できるようになると、どの導線が成果につながっているかが見えやすくなります。