ウェブサイトやアプリケーションでユーザーから情報を収集する際、長いフォームはユーザーを圧倒させ、入力を途中で放棄させてしまう可能性があります。
そんなときに役立つのが「ウィザード形式」のフォームです。このブログ記事では、ウィザード形式の簡単な実装方法を紹介します。
ちなみにウィザード形式とは下記のような
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィザード形式のフォーム</title>
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="style.css">
<style>
#wizard-container {
width: 300px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
position: relative;
overflow: hidden;
transition: height 0.3s ease;
}
#wizard {
position: relative;
}
.step {
width: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 100%;
transition: left 0.3s ease, opacity 0.3s ease;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
}
.step.active {
position: relative;
left: 0;
opacity: 1;
visibility: visible;
}
.step.prev {
left: -100%;
opacity: 0;
visibility: hidden;
}
input[type="text"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
border-color: #007bff;
}
.button-container {
display: flex;
justify-content: space-between;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
font-size: 14px;
}
button:disabled {
background-color: #ccc;
}
button:hover:not(:disabled) {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="wizard-container">
<div id="wizard">
<div class="step active">
<h2>ステップ 1</h2>
<!-- ステップ1の入力フィールド -->
<input type="text" id="step1-input" placeholder="ステップ1の入力">
<div class="button-container">
<span></span>
<!-- 次へボタン -->
<button class="next">次へ</button>
</div>
</div>
<div class="step">
<h2>ステップ 2</h2>
<!-- ステップ2の入力フィールド -->
<input type="text" id="step2-input" placeholder="ステップ2の入力">
<div class="button-container">
<!-- 前へボタン -->
<button class="prev">前へ</button>
<!-- 次へボタン -->
<button class="next">次へ</button>
</div>
</div>
<div class="step">
<h2>ステップ 3</h2>
<!-- ステップ3の入力フィールド -->
<input type="text" id="step3-input" placeholder="ステップ3の入力">
<div class="button-container">
<!-- 前へボタン -->
<button class="prev">前へ</button>
<!-- 次へボタン -->
<button class="next">次へ</button>
</div>
</div>
<div class="step">
<h2>ステップ 4</h2>
<!-- ステップ4の入力フィールド -->
<input type="text" id="step4-input" placeholder="ステップ4の入力">
<div class="button-container">
<!-- 前へボタン -->
<button class="prev">前へ</button>
<!-- 送信ボタン -->
<button id="submit">送信</button>
</div>
</div>
</div>
</div>
<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var currentStep = 0; // 現在のステップを示すインデックス
var steps = $(".step"); // すべてのステップ要素を取得
var wizardContainer = $("#wizard-container"); // ウィザードのコンテナ要素を取得
// 指定されたステップを表示し、他のステップを非表示にする関数
function showStep(step) {
steps.removeClass("active prev"); // すべてのステップから "active" と "prev" クラスを削除
steps.each(function(index) {
if (index < step) {
// 現在のステップより前のステップ
$(this).css({ left: '-100%', opacity: 0, visibility: 'hidden', position: 'absolute' });
} else if (index === step) {
// 現在のステップ
$(this).css({ left: '0', opacity: 1, visibility: 'visible', position: 'relative' }).addClass("active");
wizardContainer.css("height", $(this).outerHeight()); // ウィザードコンテナの高さを現在のステップに合わせる
} else {
// 現在のステップより後のステップ
$(this).css({ left: '100%', opacity: 0, visibility: 'hidden', position: 'absolute' });
}
});
}
// 次へボタンのクリックイベントハンドラー
$(".next").click(function() {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep); // 次のステップを表示
}
});
// 前へボタンのクリックイベントハンドラー
$(".prev").click(function() {
if (currentStep > 0) {
currentStep--;
showStep(currentStep); // 前のステップを表示
}
});
// 送信ボタンのクリックイベントハンドラー
$("#submit").click(function() {
alert("フォームを送信しました！"); // フォーム送信時のアラート
});
showStep(currentStep); // 初期ステップの表示
});
</script>
</body>
</html>まとめ
ウィザード形式のフォームは、ユーザーから情報を収集する際に非常に有用なツールです。小さなステップに分割することで、ユーザーの負担を軽減し、入力の完了率を向上させることができます。今回紹介した実装方法を参考にして、ぜひあなたのウェブサイトやアプリケーションに取り入れてみてください。