Customizable and Responsive Form Layout
You will see a HTML Form which is not only Responsive but only Customizable.This is done using CSS Grids.
This is the form we are talking about,click on CHANGE FORM LAYOUT or resize your browser window to see it in action and remember the layout changes from two column layout to one column layout and vice versa only on devices with width > 1024 ,you can change this behavior as per your requirements.
Let's see the HTML for our form
<form class="form-layout" action="" id="f1" onsubmit="return false;">
<div class="form-heading">
<span data-form-id="f1" class="toggleFormLayout">? CHANGE FORM LAYOUT</span>
<h1>CUSTOMIZABLE RESPONSIVE FORM</h1>
</div>
<div class="form-body">
<div class="form-left">
<div class="form-field">
<div class="input-container">
<label for="a1">First Name</label>
<input name="firstName" type="text" id="a1" />
</div>
</div>
<div class="form-field">
<div class="input-container">
<label for="a2">Last Name</label>
<input name="lastName" type="text" id="a2" />
</div>
</div>
<div class="form-field">
<div class="input-container">
<label for="a3">Mobile Number</label>
<input name="lastName" type="text" id="a3" />
</div>
</div>
</div>
<div class="form-right">
<div class="form-field">
<div class="input-container">
<label for="a4">Date of Birth</label>
<input name="userName" type="date" id="a4" />
</div>
</div>
<div class="form-field">
<div class="input-container">
<label for="a5">Password</label>
<input name="userName" type="password" id="a5" />
</div>
</div>
</div>
</div>
<div class="form-status">
<!--YOU CAN USE IT SHOW FORM STATUS-->
</div>
<div class="form-button">
<button type="submit">SUBMIT</button>
</div>
</form>
We are using CSS grids for our form as shown below.
form.form-layout div.form-heading {
grid-area: form-heading;
}
form.form-layout div.form-body {
grid-area: form-body;
}
form.form-layout div.form-status {
grid-area: form-status;
}
form.form-layout div.form-button {
grid-area: form-button;
}
form.form-layout div.form-body div.form-left {
grid-area: form-left;
}
form.form-layout div.form-body div.form-right {
grid-area: form-right;
}
form.form-layout {
background: white;
display: grid;
over-flow: hidden;
max-width: 1000px;
width: 100%;
margin: 1em auto 1em auto;
grid-template-areas: 'form-heading' 'form-body' 'form-status' 'form-button';
box-shadow: inset 0 0 5px #000000ad;
transition: all 1s ease;
}
form.form-layout div.form-body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas: 'form-left form-right';
width: 100%;
margin: 0 auto 0 auto;
}
/*
customizable layout
*/
form.form-layout.onecolumn {
max-width: 600px;
transition: all 1s ease;
}
form.form-layout.onecolumn div.form-body {
grid-template-columns: 1fr;
grid-template-areas: 'form-left' 'form-right';
}
/*
INTERNAL FORM ELEMENTS PLACEMENT
*/
form.form-layout div.form-heading span.toggleFormLayout {
display: inline-block;
background: black;
color: white;
padding: 1em;
font-size: 0.8em;
cursor: pointer;
letter-spacing: 0.2em;
}
form.form-layout div.form-heading h1 {
width: 90%;
text-align: center;
color: black;
padding: 1em 0 1em;
margin: 0em auto 0em auto;
letter-spacing: 0.2em;
font-size: 1.2em;
font-weight: bolder;
}
form.form-layout div.form-field {
width: 90%;
margin: 2em auto 2em auto;
padding: 0.5em 0 2em;
box-shadow: inset 0 0 5px #000000ad;
}
/*
INPUT STYLES
*/
div.form-field div.input-container {
margin: 0 auto 0 auto;
width: 100%;
text-align: center;
}
div.form-field div.input-container label {
display: block;
margin: 0 auto 0 auto;
padding: 1.5em 0 1em;
width: 100%;
font-size: 1.2em;
font-weight: bolder;
}
div.form-field div.input-container input {
margin: 0 auto 0 auto;
display: block;
width: 90%;
text-align: center;
border: none;
padding: 1em 0 1em;
color: #000000ad;
border-bottom: 1px solid #000000ad;
outline: none;
}
/*
Form submit button
*/
form.form-layout div.form-button {
text-align: center;
}
form.form-layout div.form-button button {
display: inline-block;
margin: 1em;
padding: 1em;
font-weight: bolder;
cursor: pointer;
font-size: 1.2em;
letter-spacing: 0.2em;
background: black;
color: white;
text-decoration: none;
outline: none;
border: none;
}
@media (max-width:1020px) {
form.form-layout {
width: 98%;
grid-template-areas: 'form-heading' 'form-body' 'form-status' 'form-button';
}
form.form-layout div.form-body {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas: 'form-left' 'form-right';
}
}
And using JavaScript , we will add the class onecolumn to the form, which takes care of customization.
function formLayoutToggler() {
try {
let tfl = document.querySelectorAll("span.toggleFormLayout");
for (let j = 0; j < tfl.length; j++) {
tfl[j].onclick = function(e) {
let id = e.target.getAttribute('data-form-id');
let form = document.querySelector(`form#${id}`);
if (form.classList.contains("onecolumn")) {
form.classList.remove("onecolumn");
return;
}
form.classList.add("onecolumn");
};
}
} catch (err) {
console.log(err);
}
}
formLayoutToggler();