Get Submit Form From HTML, CSS, JavaScript Program

Sigh up & Submit Form

HTML

<!DOCTYPE html>

<head>

<title>Multi Step Signup & Submit Form </title>

</head>

<body>

<header>Signup Form</header>

</div>

</div>

<p>Contact</p>

</div>

</div>

<p>Birth</p>

</div>

</div>

<p>Submit</p>

</div>

</div>

<div class="title">Basic Info:</div>

<div class="label">First Name</div>

</div>

</div>

</div>

<div class="title">Contact Info:</div>

<div class="label">Email Address</div>

</div>

<div class="label">Phone Number</div>

</div>

<button class="prev-1 prev">Previous</button>

</div>

<div class="title">Date of Birth:</div>

</div>

<div class="label">Gender</div>

<option>Female</option>

<option>Other</option>

</select>

</div>

<button class="prev-2 prev">Previous</button>

</div>

<div class="title">Login Details:</div>

<div class="label">Username</div>

</div>

<div class="label">Password</div>

</div>

<button class="prev-3 prev">Previous</button>

<button class="submit">Submit</button>

</div>

</form>

</div>

</body>

</html>

CSS

{

margin: 0;

padding: 0;

outline: none;

font-family: 'Freehand521 BT';

}

body{

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

overflow: hidden;

background: url(https://cdn.pixabay.com/photo/2016/12/06/01/26/colour-1885352_960_720.jpg), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);

}

::selection{

color: #fff;

background: #d43f8d;

}

.container{

width: 330px;

background: #f33;

text-align: center;

border-radius: 5px;

padding: 50px 35px 10px 35px;

}

.container header{

font-size: 35px;

font-weight: 600;

margin: 0 0 30px 0;

}

.container .form-outer{

width: 100%;

overflow: hidden;

}

.container .form-outer form{

display: flex;

width: 400%;

}

.form-outer form .page{

width: 25%;

transition: margin-left 0.3s ease-in-out;

}

.form-outer form .page .title{

text-align: left;

font-size: 25px;

font-weight: 500;

}

.form-outer form .page .field{

width: 330px;

height: 45px;

margin: 45px 0;

display: flex;

position: relative;

}

form .page .field .label{

position: absolute;

top: -30px;

font-weight: 500;

}

form .page .field input{

height: 100%;

width: 100%;

border: 1px solid lightgrey;

border-radius: 5px;

padding-left: 15px;

font-size: 18px;

}

form .page .field select{

width: 100%;

padding-left: 10px;

font-size: 17px;

font-weight: 500;

}

form .page .field button{

width: 100%;

height: calc(100% + 5px);

border: none;

background: #aa652f;

margin-top: -20px;

border-radius: 5px;

color: #fff;

cursor: pointer;

font-size: 18px;

font-weight: 500;

letter-spacing: 1px;

text-transform: uppercase;

transition: 0.5s ease;

}

form .page .field button:hover{

background: #c00;

}

form .page .btns button{

margin-top: -20px!important;

}

form .page .btns button.prev{

margin-right: 3px;

font-size: 17px;

}

form .page .btns button.next{

margin-left: 3px;

}

.container .progress-bar{

display: flex;

margin: 40px 0;

user-select: none;

}

.container .progress-bar .step{

text-align: center;

width: 100%;

position: relative;

}

.container .progress-bar .step p{

font-weight: 500;

font-size: 18px;

color: #000;

margin-bottom: 8px;

}

.progress-bar .step .bullet{

height: 25px;

width: 25px;

border: 2px solid #000;

display: inline-block;

border-radius: 50%;

position: relative;

transition: 0.2s;

font-weight: 500;

font-size: 17px;

line-height: 25px;

}

.progress-bar .step .bullet.active{

border-color: #d43f8d;

background: #f4ea15;

}

.progress-bar .step .bullet span{

position: absolute;

left: 50%;

transform: translateX(-50%);

}

.progress-bar .step .bullet.active span{

display: none;

}

.progress-bar .step .bullet:before,

.progress-bar .step .bullet:after{

position: absolute;

content: '';

bottom: 11px;

right: -51px;

height: 3px;

width: 44px;

background: #fd2626;

}

.progress-bar .step .bullet.active:after{

background: #d43f8d;

transform: scaleX(0);

transform-origin: left;

animation: animate 0.3s linear forwards;

}

@keyframes animate {

100%{

transform: scaleX(1);

}

.progress-bar .step:last-child .bullet:before,

.progress-bar .step:last-child .bullet:after{

display: none;

}

.progress-bar .step p.active{

color: #fff;

transition: 0.2s linear;

}

.progress-bar .step .check{

position: absolute;

left: 50%;

top: 70%;

font-size: 15px;

transform: translate(-50%, -50%);

display: none;

}

.progress-bar .step .check.active{

display: block;

color: #fff;

}

JavaScript

const slidePage = document.querySelector(".slide-page");

const nextBtnFirst = document.querySelector(".firstNext");

const prevBtnSec = document.querySelector(".prev-1");

const nextBtnSec = document.querySelector(".next-1");

const prevBtnThird = document.querySelector(".prev-2");

const nextBtnThird = document.querySelector(".next-2");

const prevBtnFourth = document.querySelector(".prev-3");

const submitBtn = document.querySelector(".submit");

const progressText = document.querySelectorAll(".step p");

const progressCheck = document.querySelectorAll(".step .check");

const bullet = document.querySelectorAll(".step .bullet");

let current = 1;

nextBtnFirst.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "-25%";

bullet[current - 1].classList.add("active");

progressCheck[current - 1].classList.add("active");

progressText[current - 1].classList.add("active");

current += 1;

});

nextBtnSec.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "-50%";

bullet[current - 1].classList.add("active");

progressCheck[current - 1].classList.add("active");

progressText[current - 1].classList.add("active");

current += 1;

});

nextBtnThird.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "-75%";

bullet[current - 1].classList.add("active");

progressCheck[current - 1].classList.add("active");

progressText[current - 1].classList.add("active");

current += 1;

});

submitBtn.addEventListener("click", function(){

bullet[current - 1].classList.add("active");

progressCheck[current - 1].classList.add("active");

progressText[current - 1].classList.add("active");

current += 1;

setTimeout(function(){

alert("Your Form Successfully Signed up");

location.reload();

},800);

});

prevBtnSec.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "0%";

bullet[current - 2].classList.remove("active");

progressCheck[current - 2].classList.remove("active");

progressText[current - 2].classList.remove("active");

current -= 1;

});

prevBtnThird.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "-25%";

bullet[current - 2].classList.remove("active");

progressCheck[current - 2].classList.remove("active");

progressText[current - 2].classList.remove("active");

current -= 1;

});

prevBtnFourth.addEventListener("click", function(event){

event.preventDefault();

slidePage.style.marginLeft = "-50%";

bullet[current - 2].classList.remove("active");

progressCheck[current - 2].classList.remove("active");

progressText[current - 2].classList.remove("active");

current -= 1;

});

OUTPUT

Ticker

You May Get A Lots of Programming From Maa Blogger

Get Submit Form From HTML, CSS, JavaScript Program

Post a Comment

48 Comments

About Me

Total Pageviews

Report Abuse

Followers

Glowing Inputs Login & Signup Form Create This Source Code

Search Programs

Translate

Ad Space

Popular Posts