マルチステップ お問い合わせフォーム
「マルチステップ お問い合わせフォーム」は、入力項目を 3つのステップに分割し、進行状況バーで現在地を示す フォームです。ステップは is-active クラスの付け替えで切り替わり、上部のバーは width をパーセントで動かして進捗を可視化します。最後に入力内容を確認してから送信できるので、誤送信を減らせます。
このパーツの使いどころと実装ポイント
「マルチステップ お問い合わせフォーム」は、入力項目を3つのステップに分割し、進行状況バーで現在地を示すフォームです。ステップは is-active クラスの付け替えで切り替わり、上部のバーは width をパーセントで動かして進捗を可視化します。最後に入力内容を確認してから送信できるので、誤送信を減らせます。
向いている場面
- 項目が多めの法人向け問い合わせ・見積もり依頼
- 予約や申し込みなど、段階的な情報入力が必要なフォーム
- 離脱を抑えたいランディングページのコンバージョン導線
一度に見せる項目を絞ることで「入力が多くて面倒」という心理的な負担を下げられるのがこのパターンの強みです。ステップ数を変える場合は、各ステップの判定とバーの割合計算を合わせて調整します。
実装上の注意
各入力には label を関連付け、必須項目には required を付けてアクセシビリティと入力ミス防止を両立します。ステップ移動はJavaScriptに依存するため、スクリプトが動かない環境への配慮や、戻る操作のしやすさも検討しましょう。確認ステップでは入力値をそのまま表示するので、表示時のエスケープにも注意が必要です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
ステップ数を3から増減できますか
できます。ステップのブロックを増減し、進行状況バーの幅を計算している割合と、次へ進む際のステップ判定を実際の段数に合わせて変更してください。2ステップでも5ステップでも同じ仕組みで動かせます。
送信前に入力内容を確認できますか
できます。最終ステップで入力した内容をまとめて表示し、ユーザーが確認してから送信する流れです。間違いに気づいたら前のステップへ戻って修正できるため、誤送信や入力漏れを減らせます。