フォーム計測の仕組みをつくる2（Confactform7）
前回（フォーム計測の仕組みをつくる）で、
フォームの「開始・完了・エラー」を計測できると色々見えてくる、という話を書きました。
今回はそれを WordPressのContact Form 7（CF7）で実際にやってみた 記録です。
結論から言うと、CF7はGTMと相性が抜群でした。
公式でJavaScriptイベントを発火してくれるので、コードを書く量がかなり少ないです。
目次
Contact Form 7 が発火してくれるイベント
CF7はフォームの状態に応じて、以下のイベントを自動で出してくれるようですね。
| イベント名 | タイミング | 使い道 |
|---|---|---|
wpcf7mailsent | 送信完了時 | form_submit |
wpcf7invalid | 入力エラー | form_error |
wpcf7failed | サーバー送信失敗 | form_error |
これをGTMが拾えるように、dataLayer.push()を使ってデータを送るだけです。
実際にやった設定
1. 入力開始（form_start）
ここはCF7に専用イベントがないので、
GTMで「要素のフォーカス」トリガーを設定。
セレクタでフォームの最初のフィールドを指定します。
#contact-form input:first-childイベント名は form_start。
これで「フォームを開いて実際に入力を始めた人」がカウントできます。
2. 送信完了（form_submit）
ここがCF7の真骨頂。
以下のようにJavaScriptを1行追加するだけでOKです。
<script>
document.addEventListener('wpcf7mailsent', function(event) {
dataLayer.push({
'event': 'form_submit',
'formId': event.detail.contactFormId
});
}, false);
</script>これでフォーム送信が完了すると、form_submit イベントがGTMに飛び、GA4でも記録されます。
3. エラー発生（form_error）
入力エラー（バリデーションNG）や送信失敗も取れます。
どちらも form_error として扱いました。
<script>
document.addEventListener('wpcf7invalid', function() {
dataLayer.push({'event': 'form_error'});
}, false);
document.addEventListener('wpcf7failed', function() {
dataLayer.push({'event': 'form_error'});
}, false);
</script>GA4での確認
GTMでこれらのイベントを受け取ったら、
GA4の「イベント一覧」に form_start, form_submit, form_error が並びます。
その中で、form_submit を「コンバージョンイベント」に指定。
ファネル探索を使うと、前回と同じように「開始 → 送信 → エラー」の流れを可視化できます。
やってみて気づいたこと
1. 送信成功の検知がめちゃくちゃ安定してる
普通のAjaxフォームだと、「成功メッセージが出た瞬間を監視」みたいにちょっと不安定なんですが、
CF7の wpcf7mailsent は確実に1回だけ発火してくれます。
これだけでも導入する価値あり。
2. エラーが思ったより多かった
wpcf7invalid を入れてみたら、
意外と「電話番号フォーマット」「メールアドレス必須」で止まっている人が多かったです。
確認してみたら、入力補助（プレースホルダや入力例）がなかった…。
こういう発見ができるのが面白い。
3. formIdを入れておくと後々便利
event.detail.contactFormId を一緒に送っておくと、
複数のフォームを使っている場合でも、どのフォームが送られたか識別できます。
後で分析する時に助かります。
まとめ
CF7 × GTM × GA4 の組み合わせは、設定がとてもシンプル。
しかも、公式のイベントが使えるのでミスも少ないです。
入れてみて思ったのは、
「送信された」だけじゃなく「送れなかった人」まで見えるようになった こと。
フォーム改善の方向が見えやすくなりました。
次は、自作フォーム（Laravel）で同じような計測を仕込んでみます。
CF7のようなイベントがない場合、どうやって検知するか？を試してみようと思います。
今回は以上です！