Hidden Inputsを活用したWebフォームで

こんにちは！今回は、ランディングページ（LP）でよく使用される「hidden inputs」を活用したWebフォーム実装について、実践的な観点から解説していきます。

なぜhidden inputsが必要なのか？

Webフォームを実装する際、ユーザーに直接入力してもらう項目（名前、メールアドレスなど）以外にも、様々な付加情報を収集する必要があります。例えば：

  • 広告効果測定のためのUTMパラメータ
  • ユーザー追跡用のクライアントID
  • Google広告のトラッキング情報（Xclid）
  • 初回流入ページ情報

これらの情報は、マーケティング分析や顧客対応に重要ですが、ユーザーに入力を求める必要はありません。そこで活用されるのが「hidden inputs」です。

Webフォームデータの流れ：概要 ブラウザ visible inputs: □ 名前 □ メール hidden inputs: ・utm_source ・クライアントID サーバー 1. データ受信 2. バリデーション 3. データ加工 4. 保存/転送 POST送信 ※ hidden inputsはユーザーには見えませんが、 　フォーム送信時に重要なデータを送ることができます

実装の基本的な流れ

Step 1: フォームにhidden inputsを設置

<form action="process.php" method="post">
    <!-- 通常の入力フィールド -->
    <input type="text" name="name" placeholder="お名前">
    <input type="email" name="email" placeholder="メールアドレス">
    
    <!-- hidden inputs -->
    <input type="hidden" name="utm_source" value="<?php echo $utm_source; ?>">
    <input type="hidden" name="utm_medium" value="<?php echo $utm_medium; ?>">
    <input type="hidden" name="client_id" value="<?php echo $client_id; ?>">
</form>

Step 2: サーバーサイド（PHP）での処理

// データ受信
$formData = $_POST;

// バリデーションと加工
$processedData = validateAndProcess($formData);

// 必要に応じてデータを振り分け
saveToDatabase($processedData);
prepareForRPA($processedData);
システム連携の詳細フロー Step 1: ユーザー入力 フォーム入力 + hidden情報 Step 2: PHP処理 データ検証と加工 Step 3: データ振り分け CRM・DB保存・RPA処理 主なhidden項目： ・utm_source（広告ソース） ・utm_medium（広告メディア） ・utm_campaign（キャンペーン名） ・クライアントID（訪問者識別） ・Xclid（Google広告トラッキング） ・初回流入ページ情報

一般的なWeb問い合わせフォームのバックエンド処理パターン

フォーム送信処理の主な流れ 1. フォームデータ受信 UTMパラメータ/電話番号など 2. バリデーション 電話番号/メール形式チェック 3. メール送信 PHPMailerによる送信 4. 自動電話発信 時間帯に応じた発信制御 5. SMS送信 夜間帯の自動SMS送信 6. 顧客情報登録 APIによるデータ連携

< 拡張的な 4 5 6 の処理フロー例 >

問い合わせ自動対応システムの基本フロー 営業時間判定 営業時間内 営業時間外 営業時間内の処理 1. 自動発信処理 ・コールシステム連携 ・発信制御処理 2. 顧客情報登録 ・基本情報の登録 ・トラッキング情報連携 営業時間外の処理 1. メッセージ自動送信 ・自動返信処理 ・案内文送信 2. 顧客情報登録 ・次営業日の対応予約 ・システム間連携 外部システム連携（コール管理・メッセージ配信・顧客管理・自動化ツール）

< 顧客管理システムからRPAへの連携部分 >

RPAシステム連携フロー フォームデータ ・基本情報 ・UTMパラメータ ・トラッキング情報 JSON変換処理 ・データ構造化 ・形式統一 ・エンコード処理 RPA連携 ・自動データ転記 ・システム間連携 ・処理結果確認 JSON構造例： { “TO_RPA”: { “contact_info”: { basic_data }, “tracking_info”: { utm_params }, “system_info”: { client_data }, “timestamp”: { date_time } } }

メール経由ですることもあります、、

実装のメリット

  1. データの確実な収集
    • JavaScriptに依存せず、確実にデータを送信可能
    • ブラウザの互換性が高い
  2. 運用の効率化
    • RPAとの連携が容易
    • データベースへの直接保存が可能
  3. 分析の精度向上
    • 広告効果測定の正確性が向上
    • ユーザージャーニーの詳細な把握が可能

Hidden Input実装のメリット 技術面のメリット • JavaScriptなしでも動作 • ブラウザ互換性が高い • 実装がシンプル • データの信頼性が高い 運用面のメリット • 保守が容易 • RPAとの連携が簡単 • データ収集の自動化 • 改修コストが低い ビジネス面のメリット • 広告効果の正確な測定 • 顧客行動の詳細な把握 • マーケティング精度向上 • コスト対効果の可視化 具体的な活用例： 1. 広告運用での活用 　- 広告ソースごとのコンバージョン率計測 　- キャンペーンの効果測定 2. カスタマーサポート 　- 問い合わせ経路の把握 　- ユーザー行動の理解 3. システム連携 　- CRMシステムとの連携 　- 社内システムへのデータ転送

4. 実装時の注意点

  1. セキュリティ対策
    • 送信データの適切なバリデーション
    • XSS対策の実施
  2. データ管理
    • 必要最小限の情報のみ収集
    • プライバシーポリシーへの明記
  3. 保守性
    • 適切なドキュメント作成
    • コードの可読性維持

まとめ

hidden inputsを活用したフォーム実装は、LPにおける標準的な手法として広く採用されています。適切に実装することで、マーケティング効果の測定や顧客管理の効率化に大きく貢献します。

実装の際は、セキュリティとプライバシーに十分配慮しつつ、将来の拡張性も考慮した設計を心がけましょう。

※ 本記事で紹介した実装方法は、多くの企業のWebマーケティングで実践されている一般的なアプローチです。