.jpeg)
Animated Jquery Multi-Step Form
This is the simple animated multistep form.
Demo
<a class=”button center” href”https://animated-jquery-multi-step-form.netlify.app/”> Demo</a>
The project
use fontawsome for icons
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
Html
<div class="container main-form">
<header>Your Logo Here</header>
<form id="form">
<div class="form-control">
<div class="input-field">
<span class="requireds">*</span>
<label>Enter Blah</label>
<input type="text" id="first_input" required>
<!-- <small class="errors slide-right">Error message</small> -->
<p id="first_input_error" class="errors slide-right">Please fill the input</p>
</div>
<div class="input-field">
<span class="requireds">*</span>
<label>Enter Blah</label>
<input class="pswrd" type="password" id="second_input" required>
<p id="second_input_error" class="errors slide-right">Please fill the input</p>
</div>
<div class="input-field">
<span class="requireds">*</span>
<label>Your Date of Birth</label> <br />
<div class="date-of-birth">
<div class="months">
<select id="month" required onchange="birthDay()">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="days">
<select id="day" required onchange="birthDay()">
<option value="">Date</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="years">
<input type="text" id="year" class="year-input" placeholder="Year" required
onchange="birthDay()">
</div>
<br />
</div>
<p id="dateofbirth" class="errors slide-right">Please fill the input</p>
</div>
<div class="sundow">
<input type="checkbox">
<label>After Sundow</label>
</div>
<div class="button">
<div class="inner"></div>
<button class="submitBtn">Search</button>
</div>
</form>
</div>
</div>
<br />
<div class="container searching scale-up-top">
<header>Your Logo Here</header>
<div class="loading-btn">
<div class="loadin-btn-text">
<span class="text">Loading</span>
</div>
</div>
</div>
Javascript
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
var sunDown = document.querySelector('.sundow')
sunDown.style.visibility = "hidden"
const loadingBtn = document.querySelector(".loading-btn");
const loadingBtnText = document.querySelector(".loading-btn-text");
function birthDay() {
var changeMonth = document.querySelector('#month').value
var changeDay = document.querySelector('#day').value
var changeYear = document.querySelector('#year').value
if (changeMonth !== "" && changeDay !== "" && changeYear !== "") {
sunDown.style.visibility = "visible"
}
}
const form = document.getElementById('form')
const firstInput = document.getElementById('first_input');
const secondInput = document.getElementById('second_input');
const monthInput = document.getElementById('month');
const dayInput = document.getElementById('day');
const yearInput = document.getElementById('year');
const searching = document.querySelector('.searching');
const mainForm = document.querySelector('.main-form');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
console.log("form submitted")
});
function checkInputs() {
// trim to remove the whitespaces
const firstInputValue = firstInput.value;
const secondInputValue = secondInput.value;
const monthInputValue = monthInput.value;
const dayInputValue = dayInput.value;
const yearInputValue = yearInput.value;
if (firstInputValue === '') {
setErrorFor(firstInput, 'Please fill the input');
}
if (secondInputValue === '') {
setErrorFor(secondInput, 'Please fill the input');
}
if (monthInputValue === '') {
setErrorFor(monthInput, 'Please fill the input');
}
if (dayInputValue === '') {
setErrorFor(dayInput, 'Password2 cannot be blank');
}
if (yearInputValue === '') {
setErrorFor(yearInput, 'Password2 cannot be blank');
}
if (firstInputValue !== '' && secondInputValue !== '' && monthInputValue !== '' && dayInputValue !== '' && yearInputValue !== '') {
mainForm.style.display = "none"
searching.style.display = "block"
loadingBtn.classList.add("progress");
loadingBtnText.innerText = "Uploading...";
setTimeout(() => {
loadingBtn.classList.remove("progress"); //remove progress after 6s
loadingBtnText.innerText = "Uploaded";
}, 6000); //1000ms = 1s (6000 = 6s)
}
}
function setErrorFor(input, message) {
const errorMessage = document.getElementsByClassName('errors')
errorMessag.innerText = message;
errorMessag.style.display = "block"
}
</script>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
text-align: center;
font-family: sans-serif;
justify-content: center;
/* background-color: #e3e3e3; */
background-color: white;
}
.searching{
display: none;
}
.container{
color: white;
position: relative;
width: 400px;
background-color: darkslategrey;
/* background: #2d533bd4; */
/* background-color: grey; */
padding: 60px 30px;
transform: translateZ(1px);
-webkit-transform: translateZ(1px);
transition: background 0.3s;
z-index: 50;
background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 13%) 1px, rgba(255, 255, 255, 0.03) 2px, rgb(255 255 255 / 18%) 3px, rgb(255 255 255 / 13%) 4px), -webkit-linear-gradient(125deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 70%, rgb(255 255 255 / 3%) 90%);
/* -webkit-backface-visibility: hidden; */
backface-visibility: hidden;
}
header{
font-size: 40px;
margin-bottom: 60px;
font-family: 'Montserrat', sans-serif;
}
form .button{
margin: 40px 0;
position: relative;
height: 50px;
width: 100%;
text-align: left;
}
.input-field{
margin: 60px 0;
height: 50px;
width: 100%;
text-align: left;
}
.input-field input,select{
height: 100%;
width: 100%;
padding-left: 15px;
font-size: 19px;
transition: .4s;
border: none !important;
outline: none;
margin-top: 5px;
}
input:focus{
border: none !important;
outline: none;
}
/* .input-field label, span.show{
position: absolute;
top: 50%;
transform: translateY(-50%);
} */
.input-field label{
/* left: 15px; */
pointer-events: none;
color: whitesmoke;
font-size: 18px;
transition: .4s;
}
span.show{
right: 20px;
color: #111;
font-size: 14px;
font-weight: bold;
cursor: pointer;
user-select: none;
visibility: hidden;
font-family: 'Open Sans', sans-serif;
}
/* input:valid ~ span.show{
visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
transform: translateY(-35px);
background: #ede8e800;
font-size: 18px;
color: rgb(44 38 38);
} */
.requireds{
color: red;
}
form .button{
margin-top: 30px;
overflow: hidden;
z-index: 111;
}
.button .inner{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
z-index: -1;
transition: all .4s;
background: -webkit-linear-gradient(right,#00dbde,#6c8a8a,#00dbde,#00dbde8a);
}
/* .first_input_error ,.second_input_error{
display: none;
} */
.button:hover .inner{
left: 0;
}
.button button{
width: 100%;
height: 100%;
border: none;
background: none;
outline: none;
color: white;
font-size: 20px;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
.container .auth{
margin: 35px 0 20px 0;
font-size: 19px;
color: grey;
}
.links{
display: flex;
cursor: pointer;
}
small {
visibility: hidden;
}
.errors{
margin: 5px 0;
}
#first_input_error,#second_input_error,#dateofbirth{
display: none;
}
.date-of-birth{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
}
select#month,select#day{
height: 100%;
width: 100%;
padding: 8px 3px;
font-size: 19px;
transition: .4s;
border: none !important;
outline: none;
}
.months{
margin-right: 10px;
flex-basis: 50%;
}
.days{
margin-right: 10px;
flex-basis: 30%;
}
.years{
flex-basis: 20%;
}
.loading-btn{
position: relative;
height: 55px;
max-width: 300px;
width: 100%;
background: darkslategrey;
border-radius: 6px;
cursor: pointer;
transition: all .4s;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
overflow: hidden;
}
.loading-btn:hover .loadin-btn-text{
left: 0;
}
.loading-btn::before{
content: "";
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
background: -webkit-linear-gradient(right,#00dbde,#6c8a8a,#00dbde,#00dbde8a);
border-radius: 6px;
}
.loading-btn.progress::before{
animation: progress 6s ease-in-out forwards;
}
.loading-btn .loadin-btn-text{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.loading-btn .loadin-btn-text span{
position: relative;
color: #fff;
font-size: 26px;
}
.loading-btn .loadin-btn-text span{
font-size: 20px;
font-weight: 400;
margin-left: 8px;
}
/* Animation */
.slide-right {
-webkit-animation: slide-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-up-top {
-webkit-animation: scale-up-top 0.4s ease-in both;
animation: scale-up-top 0.4s ease-in both;
}
/**
* ----------------------------------------
* animation slide-right
* ----------------------------------------
*/
@keyframes progress {
0%{
left: -100%;
}
10%{
left: -97%;
}
20%{
left: -92%;
}
30%{
left: -82%;
}
30%{
left: -62%;
}
40%{
left: -38%;
}
50%{
left: -18%;
}
60%{
left: -14%;
}
80%{
left: -7%;
}
90%{
left: -3%;
}
100%{
left: 0%;
}
}
@-webkit-keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
}
@-webkit-keyframes scale-up-top {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
}
Tech Stack
HTML,CSS,JS and jQuery
