Multi Step Responsive Sign Up HTML5 Form
We will be using CSS Grids, Gradients and ES6 Classes to build our form. Visit this link for live demo. Scroll down for code
#1 - HTML
<section class="full-width-container flexCenter ">
<div id="signup" class="responsive-container">
<div class="forms-container">
<div class="forms-heading">
<h1> SIGNUP </h1>
<p>Create account </p>
</div>
<div class="tab">
<div class="tablinks" data-form-id="type1">
<span>1</span>
</div>
<div class="tablinks" data-form-id="type2">
<span>2</span>
</div>
<div class="tablinks" data-form-id="type3">
<span>3</span>
</div>
</div>
<form class="tabcontent" id="type1">
<div class="form-description">
Enter your email to get started
</div>
<div class="form-element">
<label for="type1email">Email</label>
<p class="errors"></p>
<input name="email" type="email" id="type1email" />
</div>
<button type="submit">NEXT</button>
</form>
<form class="tabcontent" id="type2">
<div class="form-description">
Verify your email
</div>
<div class="form-element">
<label for="type2email">Email</label>
<p class="errors"></p>
<input name="email" type="email" id="type2email" />
</div>
<div class="form-element">
<label for="vcode">Verification Code</label>
<p class="errors"></p>
<input name="verificationCode" type="number" id="vcode" />
</div>
<button type="submit">VERIFY</button>
</form>
<form class="tabcontent" id="type3">
<div class="form-description">
Set password to your account.
</div>
<div class="form-element">
<label for="type3email">Email</label>
<p class="errors"></p>
<input name="email" type="email" id="type3email" />
</div>
<div class="form-element">
<label class="passwordsToggler" for="pwd">Password </label>
<p class="errors"></p>
<input name="password" type="password" id="pwd" />
</div>
<button type="submit">DONE</button>
</form>
<div class="form-links">
<a target="_blanc" href="https://www.thewebblinders.in/programming"> Already registered ? login here </a>
</div>
</div>
</div>
</section>#2 - CSS
body{
margin:0 auto;
background-image: linear-gradient(to right, black, black 50%, white 50%, white);
}
section.full-width-container {
margin: 0 auto 0 auto;
width: 100%;
}
.flexCenter {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
div.responsive-container {
width: 500px;
margin: 0 auto 0 auto;
}
.forms-container {
margin: 1em auto 1em auto;
width: 90%;
position: relative;
overflow: hidden;
background-color: gold;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.forms-heading {
margin: 0 auto 0 auto;
width: 100%;
padding: 1em 0 0.2em 0;
text-align: center;
font-weight: bolder;
}
.forms-heading h1 {
color: black;
letter-spacing: 0.2em;
}
.forms-heading p {
font-size: 1em;
font-weight: lighter;
color: #000000ad;
}
.tab {
margin: 0 auto 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 2em 0 2em 0;
font-weight: bolder;
}
.tablinks {
outline: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tablinks span {
outline: none;
width: 3.5em;
height: 3.5em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 50%;
background: none;
border: 1px solid black;
color: black;
transition: all linear 0.2s;
}
.tablinks.active span {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
color: gold;
background: black;
transform: scale(1.2, 1.2);
}
form {
margin: 0 auto 0 auto;
width: 90%;
animation-name: form-active;
animation-duration: 0.2s;
transition: all 0.2s linear;
}
@keyframes form-active {
from {
transform: scale(0.6);
}
to {
transform: scale(1);
}
}
form .form-description {
margin: 0 auto 2em auto;
padding: 0.5em 0 0.5em 0;
text-align: center;
color: black;
font-weight: bolder;
font-size: 1.2em;
}
form .form-element {
margin: 0.5em auto 0.5em auto;
width: 90%;
font-size: 1.2em;
}
.form-element label {
display: inline-block;
margin: 0em auto 0em auto;
width: 100%;
}
.form-element input {
margin: 0em auto 0.5em auto;
width: 100%;
outline: none;
border: none;
padding: 0.5em 0 0.5em 0.5em;
transform: all 0.2s linear;
font-size: 1.2em;
background: none;
border-bottom: 1px solid black;
outline: none;
}
.form-element .errors {
display: none;
}
.form-element .errors.active {
display: block;
padding: 0;
color: red;
font-size: 0.8em;
margin: 0;
font-weight: lighter;
transition: all 0.2s linear;
}
form button {
outline: none;
margin: 2em auto 2em auto;
text-align: center;
padding: 1.5em 0 1.5em 0;
display: block;
border: none;
cursor: pointer;
width: 80%;
color: white;
font-size: 1em;
letter-spacing: 0.2em;
font-weight: bolder;
transition: all linear 0.09s;
background: black;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.form-links {
width: 100%;
overflow: hidden;
margin: 0 auto 0 auto;
text-align: center;
padding: 1em 0 1em 0;
}
.form-links a {
display: block;
color: black;
text-decoration: underline;
}
@media (max-width:1020px) {
div.responsive-container {
width: 98%;
}
}#3- JavaScript
class formsDisplay {
clickTab() {
let tablinks = document.querySelectorAll("div.tablinks");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].onclick = (e) => {
let formId = tablinks[i].getAttribute('data-form-id');
this.openForm(formId);
}
}
}
openForm(formId) {
let tabcontent = document.querySelectorAll("form.tabcontent");
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(formId).style.display = "block";
let tablinks = document.querySelectorAll("div.tablinks");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.querySelector(`[data-form-id=${formId}]`).classList.add("active");
}
init() {
this.clickTab();
this.openForm("type1")
}
}
var fd = new formsDisplay();
fd.init(); Visit this link for live demo.
ALTERNATE TITLES