ステップ進捗付きフォーム

このパーツの使いどころと実装ポイント

このパーツは、フォームの上部に「入力 → 確認 → 完了」の 3 ステップを表示し、現在地を強調するお問い合わせフォームです。各ステップは番号の丸とラベルの組で、::after 疑似要素の短い横線でつなぎます。現在のステップには is-act クラスが付き、丸の背景がダークネイビーに反転して進行状況がひと目で分かる作りです。入力欄は label で項目名と input を包み、必須項目には required を付けています。

向いている場面

• 確認画面を挟む長めの問い合わせ・申込みフォーム
• 見積もり依頼や資料請求など、入力項目が多いコーポレートサイト
• 予約・登録フローで離脱を防ぎたい場面

カスタマイズと実装の注意

ステップを進めるには is-act クラスを次のステップへ JavaScript で付け替えます。ステップ数は ct-sp__step を増減して調整できます。必須項目には目印を付けるだけでなく、エラー時のメッセージを aria-describedby で結びつけると入力ミスが伝わりやすくなります。label が input を内包しているのでクリック範囲が広く、これは操作性とアクセシビリティの両面で有利です。送信ボタンは見た目だけでなく type="submit" を保ち、Enter キーでも送れる状態を維持してください。