マルチステップフォーム Multi-Step Form
複数のステップに分割されたフォーム。長いフォームを段階的に入力させる。
ライブデモ
1 基本情報
2 連絡先
3 確認
基本情報
連絡先
確認
入力内容を確認して送信してください。
ソースコード
<div class="demo-multistep">
<div class="demo-multistep-progress">
<div class="demo-multistep-step active" data-step="0">
<span class="demo-multistep-num">1</span>
<span class="demo-multistep-stepname">基本情報</span>
</div>
<div class="demo-multistep-line"></div>
<div class="demo-multistep-step" data-step="1">
<span class="demo-multistep-num">2</span>
<span class="demo-multistep-stepname">連絡先</span>
</div>
<div class="demo-multistep-line"></div>
<div class="demo-multistep-step" data-step="2">
<span class="demo-multistep-num">3</span>
<span class="demo-multistep-stepname">確認</span>
</div>
</div>
<div class="demo-multistep-panels">
<div class="demo-multistep-panel active" data-panel="0">
<h3 class="demo-multistep-title">基本情報</h3>
<div class="demo-multistep-field">
<label>名前</label>
<input type="text" placeholder="山田太郎" />
</div>
<div class="demo-multistep-field">
<label>メールアドレス</label>
<input type="email" placeholder="example@mail.com" />
</div>
</div>
<div class="demo-multistep-panel" data-panel="1">
<h3 class="demo-multistep-title">連絡先</h3>
<div class="demo-multistep-field">
<label>電話番号</label>
<input type="tel" placeholder="090-1234-5678" />
</div>
<div class="demo-multistep-field">
<label>住所</label>
<input type="text" placeholder="東京都渋谷区..." />
</div>
</div>
<div class="demo-multistep-panel" data-panel="2">
<h3 class="demo-multistep-title">確認</h3>
<p class="demo-multistep-confirm">入力内容を確認して送信してください。</p>
</div>
</div>
<div class="demo-multistep-actions">
<button class="demo-multistep-prev" disabled>戻る</button>
<button class="demo-multistep-next">次へ</button>
</div>
</div>.demo-multistep { max-width: 400px; }
.demo-multistep-progress { display: flex; align-items: center; margin-bottom: 24px; }
.demo-multistep-step {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.demo-multistep-num {
width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600; background: #e5e7eb; color: #9ca3af;
transition: background 0.3s, color 0.3s;
}
.demo-multistep-step.active .demo-multistep-num,
.demo-multistep-step.done .demo-multistep-num { background: var(--ui-primary); color: #fff; }
.demo-multistep-stepname { font-size: 11px; color: #9ca3af; white-space: nowrap; transition: color 0.3s; }
.demo-multistep-step.active .demo-multistep-stepname { color: var(--ui-primary); font-weight: 600; }
.demo-multistep-step.done .demo-multistep-stepname { color: #333; }
.demo-multistep-line {
flex: 1; height: 2px; background: #e5e7eb; margin: 0 8px; margin-bottom: 18px;
transition: background 0.3s;
}
.demo-multistep-line.done { background: var(--ui-primary); }
.demo-multistep-panel { display: none; animation: demo-multistep-fadein 0.3s ease; }
.demo-multistep-panel.active { display: block; }
@keyframes demo-multistep-fadein { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.demo-multistep-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 16px; }
.demo-multistep-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.demo-multistep-field label { font-size: 13px; font-weight: 500; color: #555; }
.demo-multistep-field input {
padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 8px; font-size: 14px;
outline: none; transition: border-color 0.2s;
}
.demo-multistep-field input:focus {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-multistep-confirm { font-size: 14px; color: #555; }
.demo-multistep-actions { display: flex; justify-content: space-between; margin-top: 20px; }
.demo-multistep-prev, .demo-multistep-next {
padding: 10px 24px; border: none; border-radius: 8px; font-size: 14px;
font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.demo-multistep-prev { background: #e5e7eb; color: #333; }
.demo-multistep-prev:hover { background: #d1d5db; }
.demo-multistep-prev:disabled { opacity: 0.4; cursor: not-allowed; }
.demo-multistep-next { background: var(--ui-primary); color: #fff; }
.demo-multistep-next:hover { opacity: 0.9; }(function(){
var current = 0;
var total = 3;
var steps = document.querySelectorAll('.demo-multistep-step');
var lines = document.querySelectorAll('.demo-multistep-line');
var panels = document.querySelectorAll('.demo-multistep-panel');
var prevBtn = document.querySelector('.demo-multistep-prev');
var nextBtn = document.querySelector('.demo-multistep-next');
function update() {
steps.forEach(function(s, i) {
s.classList.toggle('active', i === current);
s.classList.toggle('done', i < current);
});
lines.forEach(function(l, i) { l.classList.toggle('done', i < current); });
panels.forEach(function(p, i) { p.classList.toggle('active', i === current); });
prevBtn.disabled = current === 0;
nextBtn.textContent = current === total - 1 ? '送信' : '次へ';
}
nextBtn.addEventListener('click', function() {
if (current < total - 1) { current++; update(); }
else { nextBtn.textContent = '送信済み!'; nextBtn.disabled = true; }
});
prevBtn.addEventListener('click', function() {
if (current > 0) { current--; update(); }
});
update();
})();AIプロンプト
Basic
マルチステップフォームをHTML/CSS/JSで作ってください。3ステップのフォームで「次へ」「戻る」ボタンで遷移します。
Custom
以下の仕様でマルチステップフォームを実装してください。 - 3ステップ構成（基本情報 → 連絡先 → 確認） - ステップインジケーター（現在位置と進捗を表示） - プライマリカラー: #2563eb - ステップ間のスライドアニメーション - 各ステップのバリデーション（必須項目チェック） - 「戻る」ボタンで前のステップに戻れる - 最後のステップで確認画面を表示
Advanced
アクセシビリティ対応のマルチステップフォームを実装してください。 - aria-current="step" で現在のステップを明示 - ステップ変更時にフォーカスをパネルの先頭に移動 - role="progressbar" による進捗状態の通知 - 各ステップのバリデーションエラーを aria-live で通知 - ブラウザバック対応（History API連携） - フォームデータの永続化（sessionStorage） - 離脱防止（beforeunload イベント） - レスポンシブ対応（モバイルではステップ名を省略）