フォーム特化LP
リフォーム・診断系の問い合わせ獲得LP。EFO（入力フォーム最適化）を全面的に実装したデモ。
【実装概要】
KVにEFOを施した3ステップフォーム（物件情報→顧客情報→日時確認）を搭載。
郵便番号3桁入力で次セルへ自動フォーカス移動・zipcloud APIで住所自動補完・電話番号ハイフン自動補完・リアルタイムバリデーションを実装。
KV左側には他社比較テーブルを設置し差別化ポイントを視覚化。
セクション見出しに装飾デザインを採用し全体の訴求力を高めています。
【実装キーワード】
3ステップフォーム／zipcloud API／リアルタイムバリデーション／郵便番号自動フォーカス／44pxタップ領域／GTM/GA4計測／他社比較テーブル
対応できる案件
3ステップフォーム（EFO実装）
→ 物件情報→顧客情報→日時確認の3ステップ構成。currentStepで状態管理し、ステップバーとプログレスバーをリアルタイム更新。各ステップのバリデーション通過時のみ次へ進む設計。
郵便番号：3桁入力→自動フォーカス移動＋API住所補完
→ zip1（3桁）入力完了でzip2に自動フォーカス移動。zip2（4桁）入力完了で非同期でAPIコールコールして住所自動補完。補完後は住所フィールドにフォーカス移動して番地入力を促す。
リアルタイムバリデーション
→ blur時にエラー表示・input時に条件充足でリアルタイム解除。電話番号：全角→半角変換＋ハイフン自動補完。メール：正規表現チェック。エラー時は軽微なアニメーションで注意喚起。
EFO設計（タップ領域・inputmode・autocomplete）
→ 全入力フィールドにmin-height:48pxのタップ領域を確保。inputmode="numeric"/"tel"/"email"でSPキーボードを最適化。autocomplete属性で入力補助。font-size:15px以上でiOSのズーム防止。
サンクスページ遷移（GTM計測連動）
→ 送信後にフォームを非表示にしてサンクスコンテンツを表示。GTMのgenerate_leadイベント発火コメントを明示。固定ページ化した場合のGA4 CV計測起点としても機能。
エラー表示設計（どこが間違いか明示）
→ まとめてエラーを出すのではなく、どの項目が間違っているかを個別に表示しています。
入力補助JS（郵便番号・電話番号）
→ 全角で入力しても自動で半角に変換、ハイフンも自動で入るので入力の手間を減らしています。
サンクスページ＋次アクション導線
→ 固定ページ化してGA4のCV計測起点にするとともに、自動返信メールの設定もセットで対応しています。
ステップフォーム（段階入力）
→ 一画面に全部並べると離脱しやすいので、3ステップに分けて入力のハードルを下げています。
フォーム管理
CF7でステップフォームを実装。送信後のリダイレクト先（サンクスページ）とGTM連動を設定。入力項目の追加・削除が管理画面から対応可能
KVコピー
ACFでキャッチコピー・サブキャッチ・3点チェック・CTAテキストを管理。LP改善時のコピーテストが容易
実績数値
ACFで診断件数・満足度・リピート率を管理。定期的な数値更新をコード修正なしで対応
お客様の声
CPT「voice」で写真・地域・年代・コメント・結果を管理。追加・削除・並び替えが容易
FAQ
ACFリピーターでQ&Aを管理。顧客からよくある質問が出たら管理画面から即時追加可能