Today we will make a complete sign-up form which includes options like name, email, phone number, country, city and post code. In which we will use HTML, CSS or Javascript.
Step 01 :- Create a file and name it index.html.
HTML Code :-
<link rel="stylesheet" href="style.css">
<section>
<div class="container">
<form>
<div class="step step-1 active">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="first-name" />
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="last-name" />
</div>
<div class="form-group">
<label for="nickName">Nick Name</label>
<input type="text" id="nickName" name="nick-name" />
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" />
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" id="phone" name="phone-number" />
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<div class="form-group">
<label for="country">country</label>
<input type="text" id="country" name="country" />
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" />
</div>
<div class="form-group">
<label for="postCode">Post Code</label>
<input type="text" id="postCode" name="post-code" />
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Submit</button>
</div>
</form>
</div>
</section>
<script src="script.js"></script>
Step 02 :- Create a file and name it style.css.
CSS Code :-
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat";
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.container {
max-width: 400px;
width: 90%;
padding: 20px;
box-shadow: 0px 0px 20px #00000020;
border-radius: 8px;
background-color: white;
}
.step {
display: none;
}
.step.active {
display: block;
}
.form-group {
width: 100%;
margin-top: 20px;
}
.form-group input {
width: 100%;
border: 1.5px solid rgba(128, 128, 128, 0.418);
padding: 5px;
font-size: 18px;
margin-top: 5px;
border-radius: 4px;
}
button.next-btn,
button.previous-btn,
button.submit-btn {
float: right;
margin-top: 20px;
padding: 10px 30px;
border: none;
outline: none;
background-color: rgb(180, 220, 255);
font-family: "Montserrat";
font-size: 18px;
cursor: pointer; /* text-align: right; */
}
button.previous-btn {
float: left;
}
button.submit-btn {
background-color: aquamarine;
}
Step 03 :- Create another file and named it script.js.
Javascript Code :-
const steps = Array.from(document.querySelectorAll("form .step"));
const nextBtn = document.querySelectorAll("form .next-btn");
const prevBtn = document.querySelectorAll("form .previous-btn");
const form = document.querySelector("form");
nextBtn.forEach((button) => {
button.addEventListener("click", () => {
changeStep("next");
});
});
prevBtn.forEach((button) => {
button.addEventListener("click", () => {
changeStep("prev");
});
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
function changeStep(btn) {
let index = 0;
const active = document.querySelector(".active");
index = steps.indexOf(active);
steps[index].classList.remove("active");
if (btn === "next") {
index++;
} else if (btn === "prev") {
index--;
}
steps[index].classList.add("active");
}
OutPut :-
