🦶🏼Multi Step Form With Progress | HTML CSS & JavaScript
Markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi Step Form with Progressbar</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<form action="#" class="form">
<h1 class="text-center">SignUp Form</h1>
<!-- Progressbar-->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step active" data-title="Name"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="ID"></div>
<div class="progress-step" data-title="Password"></div>
</div>
<!-- steps-->
<div class="form-step active">
<div class="input-group">
<label for="username">First Name</label>
<input type="text" name="username" id="username">
</div>
<div class="input-group">
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname">
</div>
<div class="">
<a href="#" class="btn btn-next with-50 ml-auto">Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone">
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="btns-group">
<a href="#" class="btn btn-pre">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="dob">Date of Birth</label>
<input type="date" name="dob" id="dob">
</div>
<div class="input-group">
<label for="id">National ID</label>
<input type="number" name="id" id="id">
</div>
<div class="btns-group">
<a href="#" class="btn btn-pre">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="input-group">
<label for="ConfirmPassword">Confirm Password</label>
<input type="password" name="ConfirmPassword" id="ConfirmPassword">
</div>
<div class="btns-group">
<a href="#" class="btn btn-pre">Previous</a>
<input type="submit" value="Submit" class="btn">
</div>
</div>
</form>
</body>
</html>
Top comments (0)