Morioh
Login
Joshua Prem

Joshua Prem

9 months ago

Multi-step Form using HTML, CSS and JavaScript

Creating multi-step forms can be a daunting task, but with the right tools and guidance, it can be a breeze. This comprehensive guide will walk you through the process of building a multi-step form using HTML, CSS, and JavaScript. To create a Multi-step Form using HTML, CSS and JavaScript., follow these step-by-step instructions:



Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.

  • Create an index.html file. The file name must be index and its extension .html
  • Create a style.css file. The file name must be style and its extension .css
  • Create a script.js file. The file name must be script and its extension .js

Full Code:

HTML File

<div class="form">
	<div class="header">
		<h2>Create an account</h2>
		<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
	</div>
	<div class="body">
		<div class="pagination">
			<div class="number active">1</div>
			<div class="bar"></div>
			<div class="number">2</div>
			<div class="bar"></div>
			<div class="number">3</div>
			<div class="bar"></div>
			<div class="number">4</div>
		</div>
		<div class="steps">
			<div class="step">
				<h4>Contact details</h4>
				<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits..</p>
				<div class="grid">
					<div class="col">
						<label for="name">Name</label>
						<input type="text" id="name">
					</div>
					<div class="col">
						<label for="email">Email</label>
						<input type="email" id="email">
					</div>
					<div class="col">
						<label for="phone">Phone number</label>
						<input type="tel" id="phone">
					</div>
					<div class="col">
						<label for="company">Company</label>
						<input type="text" id="company">
					</div>
				</div>
			</div>
			<div class="step">
				<h4>Areas of intrest</h4>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elitCreating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
				<div class="grid">
					<div class="col">
						<div class="checkbox">
							<input type="checkbox" id="intrest-finance">
							<label for="intrest-finance">Finance</label>
						</div>
					</div>
					<div class="col">
						<div class="checkbox">
							<input type="checkbox" id="intrest-maths">
							<label for="intrest-maths">Maths</label>
						</div>
					</div>
					<div class="col">
						<div class="checkbox">
							<input type="checkbox" id="intrest-programming">
							<label for="intrest-programming">Programming</label>
						</div>
					</div>
					<div class="col">
						<div class="checkbox">
							<input type="checkbox" id="intrest-music">
							<label for="intrest-music">Music</label>
						</div>
					</div>
				</div>
			</div>
			<div class="step">
				<h4>Secure your account</h4>
				<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
				<div class="grid">
					<div class="col">
						<label for="password">Password</label>
						<input type="password" id="password">
					</div>
					<div class="col">
						<label for="retype-password">Retype Password</label>
						<input type="password" id="retype-password">
					</div>
				</div>
			</div>
			<div class="step">
				<div class="confirmation">
					<h2>Create my account</h2>
					<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
					<div>
						<button>Submit</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<button class="prev" disabled>Previous</button>
		<button class="next">Next</button>
	</div>
</div>

CSS File: 

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}
body {
	background:#fff;
	font-family:"Roboto",sans-serif;
	height:100vh;
	display:grid;
	place-items:center;
}
.form {
	width:98%;
	max-width:400px;
}
.form .header {
	text-align:center;
	padding:20px;
	display:grid;
	gap:5px;
}
.form .header p {
	color:#555;
}
.form .body {
	box-shadow:0px 5px 5px 2px rgba(0,0,0,0.2);
	border-radius:20px;
	height:320px;
	overflow:hidden;
}
.form .body .pagination {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:15px;
	padding:15px 20px;
}
.form .body .pagination .number {
	width:28px;
	height:28px;
	text-align:center;
	line-height:28px;
	border-radius:50%;
	background:#00aaee;
	color:#fff;
	font-size:15px;
}
.form .body .pagination .bar {
	width:50px;
	height:4px;
	background:#00acee;
	border-radius:5px;
}
.form .body .pagination .active ~ div {
	background:#ddd;
	color:#111;
}
.form .steps {
	width:400%;
	display:flex;
	transition:all 300ms ease-in-out;
}
.form .steps .step {
	width:98vw;
	max-width:400px;
	padding:5px 15px 15px;
	overflow:hidden;
}
.form .steps .step h4 {
	margin-bottom:5px;
}
.form .steps .step p {
	color:#555;
	max-width:90%;
	font-size:15px;
}
.form .steps .step .grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:15px;
	margin-top:20px;
}
.form .steps .step .grid .col label {
	display:block;
	margin-bottom:5px;
	font-weight:500;
	font-size:15px;
}
.form .steps .step .grid .col input {
	width:100%;
	padding:8px;
	border:1px solid #bbb;
	font-size:15px;
	border-radius:8px;
}
.form .steps .step .grid .col .checkbox input {
	display:none;
}
.form .steps .step .grid .col .checkbox label {
	width:100%;
	padding:15px;
	border:1px solid #bbb;
	border-radius:5px;
	margin:0;
	cursor:pointer;
}
.form .steps .step .grid .col .checkbox input:checked + label {
	background:#00aaee;
	color:#fff;
}
.form .steps .step .confirmation {
	display:grid;
	text-align:center;
	place-items:center;
	gap:15px;
}
.form .steps .step .confirmation button {
	background:#00aaee;
	color:#fff;
	padding:10px 20px;
	border:none;
	outline:none;
	font-size:15px;
	border-radius:20px;
	cursor:pointer;
}
.form .footer {
	padding:15px 0px;
	display:flex;
	justify-content:space-between;
}
.form .footer button {
	padding:5px 10px;
	font-size:15px;
	border:1px solid #bbb;
	background:#fff;
	border-radius:5px;
	cursor:pointer;
	outline:none;
}

JavaScript File:

(function(){
	let currentPage = 1;
	const prevBtn = document.querySelector(".form .footer .prev");
	const nextBtn = document.querySelector(".form .footer .next");
	function movePage(){
		prevBtn.disabled = false;
		nextBtn.disabled = false;
		if(currentPage === 1){
			prevBtn.disabled = true;
		} else if(currentPage === 4){
			nextBtn.disabled = true;
		}
		document.querySelector(".form .pagination .active").classList.remove("active");
		document.querySelectorAll(".form .pagination .number")[currentPage-1].classList.add("active");
		const stepNode = document.querySelector(".form .steps .step");
		const width = ((currentPage-1)*stepNode.offsetWidth*-1)+"px";
		stepNode.parentNode.style.marginLeft = width;
	}
	prevBtn.addEventListener("click",function(){
		currentPage -= 1;
		movePage();
	});
	nextBtn.addEventListener("click",function(){
		currentPage += 1;
		movePage();
	});
})();

This guide provides simple steps and code to help you create multi-step forms using HTML, CSS, and JavaScript

Happy Coding !!!

#html #css #javascript 

2.55 GEEK