In this tutorial, we’ll walk through the process of creating a multi-step form using HTML, CSS, and JavaScript. Multi-step forms are useful when you have lengthy or complex forms, as they break down the information into manageable sections, improving the user experience.
By the end of this tutorial, you’ll have a fully functional multi-step form that you can integrate into your website.
Step 1: Setting up the HTML Structure
The first step is to create the basic HTML structure for our form. We’ll use fieldsets to represent each step of the form and an unordered list to display a progress bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-step Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<a href="https://geektechify.com" class="submit action-button" target="_top">Submit</a>
</fieldset>
</form>
<script src="script.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</body>
</html>Step 2: Styling the Form with CSS
Now, let’s style our form using CSS to make it visually appealing and user-friendly. We’ll add styles for the form container, fieldsets, input fields, buttons, and the progress bar. All you have to create a style.css file in the same folder and add the following css code in that file.
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
background-color: black;
padding: 20px;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px;
margin: 10px 5px;
text-decoration: none;
font-size: 14px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}Step 3: Adding Functionality with JavaScript
Lastly, we’ll add JavaScript to handle the navigation between form steps and update the progress bar accordingly. All you have to create a script.js file in the same folder and add the following Javascript code in that file.
$(document).ready(function() {
var current_fs, next_fs, previous_fs; // fieldsets
var left, opacity, scale; // fieldset properties which we will animate
var animating = false; // flag to prevent quick multi-click glitches
$(".next").click(function(){
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
// Activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
// Show the next fieldset
next_fs.show();
// Hide the current fieldset with animation
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
// As the opacity of current_fs reduces to 0 - stored in "now"
// 1. Scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
// 2. Bring next_fs from the right(50%)
left = (now * 50) + "%";
// 3. Increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale(' + scale + ')', 'position': 'absolute'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
// De-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
// Show the previous fieldset
previous_fs.show();
// Hide the current fieldset with animation
current_fs.animate({opacity: 0}, {
step: function(now, mx
) {
// As the opacity of current_fs reduces to 0 - stored in "now"
// 1. Scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
// 2. Move current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
// 3. Increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale(' + scale + ')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
});Step 4: Wrapping up
Congratulations! You’ve successfully created a multi-step form using HTML, CSS, and JavaScript. This form will enhance user experience by breaking down complex forms into manageable sections. Feel free to customize the form further to suit your website’s design and requirements.
By following this step-by-step guide, you’ve learned how to:
- Structure HTML for a multi-step form
- Style the form using CSS for a visually appealing layout
- Add functionality with JavaScript to navigate between form steps and update the progress bar
Now, you can integrate this multi-step form into your website to collect user information efficiently. Happy coding!
I do not even understand how I ended up here, but I assumed this publish used to be great