Today we will look at some of the best Designed Forms in this blog.
And with the best form Design Readymade Coding you will find today in this blog you just need to copy the code and paste it in your File.
Table of Contents
Top best Login and Sign Up Form Design.
1.Sign in with Social Network Form
Sign in with Social Network Form in live Example with coding
only CSS code use and create Sign up Form.
Step 1:- Create index.html File.
<html>
<head>
<!-- Copyright - 2021 © My Programing All rights reserved. -->
<!-------https://www.myprograming.com/----------------->
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Signup Form Design Tutorial </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="login-box">
<div class="left-box">
<h1> Sign Up</h1>
<input type="text" name="username" placeholder="Username"/>
<input type="text" name="email" placeholder="Email"/>
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="password2" placeholder="Retype password"/>
<input type="submit" name="signup-button" value="Sign Up"/>
</div>
<div class="right-box">
<span class="signinwith">Sign in with<br/>Social Network </span>
<button class="social facebook">Log in with Facebook</button>
<button class="social twitter">Log in with Twitter</button>
<button class="social google">Log in with Google+</button>
</div>
<div class="or">OR</div>
</div>
</body>
</html>Step 2:- Create style.css File.
*
{
margin: 0;
padding: 0;
background: #efefef;
font-size: 16px;
color: #777;
font-family: sans-serif;
font-weight: 300;
}
#login-box
{
position: relative;
margin: 5% auto;
height: 400px;
width: 600px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.left-box
{
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 40px;
width: 300px;
height: 400px;
}
h1
{
margin: 0 0 20px 0;
font-weight: 300;
font-size: 28px;
}
input[type="text"],
input[type="password"]
{
display: block;
box-sizing: border-box;
margin-bottom: 20px;
padding: 4px;
width: 220px;
height: 32px;
border: none;
outline: none;
border-bottom: 1px solid #aaa;
font-family: sans-serif;
font-weight: 400;
font-size: 15px;
transition: 0.2s ease;
}
input[type="submit"]
{
margin-bottom: 28px;
width: 120px;
height: 32px;
background: #f44336;
border: none;
border-radius: 2px;
color: #fff;
font-family: sans-serif;
font-weight: 500;
text-transform: uppercase;
transition: 0.2s ease;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="submit"]:focus
{
background: #ff5722;
transition: 0.2s ease;
}
.right-box
{
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
width: 300px;
height: 400px;
background-image: url(http://www.myprograming.com/wp-content/uploads/2021/09/form-1-background.jpg);
background-size: cover;
background-position: center;
}
.or
{
position: absolute;
top: 180px;
left: 280px;
width: 40px;
height: 40px;
background: #efefef;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
line-height: 40px;
text-align: center;
}
.right-box .signinwith
{
display: block;
margin-bottom: 40px;
font-size: 28px;
color: #fff;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
button.social
{
margin-bottom: 20px;
width: 220px;
height: 36px;
border: none;
border-radius: 2px;
color: #fff;
font-family: sans-serif;
font-weight: 500;
transition: 0.2s ease;
cursor: pointer;
}
.facebook
{
background: #32508e;
}
.twitter
{
background: #55acee;
}
.google
{
background: #dd4b39;
}
Note:- Insert the link of the style.css file in the index.html file.
2.Login Form With Password Show and Hide.
Create the best login form using this simple CSS.
Step 1:- Create index.html File.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Copyright - 2021 © My Programing All rights reserved. -->
<!-------https://www.myprograming.com/----------------->
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animated Login Form</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container">
<header>Login Form</header>
<form>
<div class="input-field">
<input type="text" required>
<label>Email or Username</label>
</div>
<div class="input-field">
<input class="pswrd" type="password" required>
<span class="show">SHOW</span>
<label>Password</label>
</div>
<div class="button">
<div class="inner"></div>
<button>LOGIN</button>
</div>
</form>
<div class="auth">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-square"><span>Facebook</span></i>
</div>
<div class="google">
<i class="fab fa-google-plus-square"><span>Google</span></i>
</div>
</div>
<div class="signup">
Not a member? <a href="#">Signup now</a>
</div>
</div>
<script>
var input = document.querySelector('.pswrd');
var show = document.querySelector('.show');
show.addEventListener('click', active);
function active(){
if(input.type === "password"){
input.type = "text";
show.style.color = "#1DA1F2";
show.textContent = "HIDE";
}else{
input.type = "password";
show.textContent = "SHOW";
show.style.color = "#111";
}
}
</script>
</body>
</html>
Step 2:- Create style.css File.
@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
margin: 0;
padding: 0;
border-radius: 5px;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
text-align: center;
font-family: sans-serif;
justify-content: center;
background: url(http://www.myprograming.com/wp-content/uploads/2021/09/form-2-background.jpg);
background-size: cover;
background-position: center;
}
.container{
position: relative;
width: 400px;
background: white;
padding: 60px 40px;
}
header{
font-size: 40px;
margin-bottom: 60px;
font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
margin: 25px 0;
position: relative;
height: 50px;
width: 100%;
}
.input-field input{
height: 100%;
width: 100%;
border: 1px solid silver;
padding-left: 15px;
outline: none;
font-size: 19px;
transition: .4s;
}
input:focus{
border: 1px solid #1DA1F2;
}
.input-field label, span.show{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.input-field label{
left: 15px;
pointer-events: none;
color: grey;
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(-33px);
background: white;
font-size: 16px;
color: #1DA1F2;
}
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,#fc00ff,#00dbde,#fc00ff);
}
.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;
}
.facebook, .google{
height: 40px;
width: 100%;
border: 1px solid silver;
border-radius: 3px;
margin: 0 10px;
transition: .4s;
}
.facebook:hover{
border: 1px solid #4267B2;
}
.google:hover{
border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
color: #4267B2;
}
.google i, .google span{
color: #dd4b39;
}
.links i{
font-size: 23px;
line-height: 40px;
margin-left: -90px;
}
.links span{
position: absolute;
font-size: 17px;
font-weight: bold;
padding-left: 8px;
font-family: 'Open Sans', sans-serif;
}
.signup{
margin-top: 50px;
font-family: 'Noto Sans', sans-serif;
}
.signup a{
color: #3498db;
text-decoration: none;
}
.signup a:hover{
text-decoration: underline;
}
3.Login Form With Animated
Step 1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Copyright - 2021 © My Programing All rights reserved. -->
<!-------https://www.myprograming.com/----------------->
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animated Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</head>
<body>
<img class="wave" src="http://www.myprograming.com/wp-content/uploads/2021/09/form-3-background.png">
<div class="container">
<div class="img">
<img src="http://www.myprograming.com/wp-content/uploads/2021/09/form-3.png">
</div>
<div class="login-content">
<form action="index.html">
<img src="http://www.myprograming.com/wp-content/uploads/2021/09/avatar.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<a href="#">Forgot Password?</a>
<input type="submit" class="btn" value="Login">
</form>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>Step 2:- Create style.css File.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.wave{
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap :7rem;
padding: 0 2rem;
}
.img{
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img{
width: 500px;
}
form{
width: 360px;
}
.login-content img{
height: 100px;
}
.login-content h2{
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: .3s;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i{
color: #38d39f;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass{
margin-bottom: 4px;
}
a{
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #38d39f;
}
.btn{
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover{
background-position: right;
}
@media screen and (max-width: 1050px){
.container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
form{
width: 290px;
}
.login-content h2{
font-size: 2.4rem;
margin: 8px 0;
}
.img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
.container{
grid-template-columns: 1fr;
}
.img{
display: none;
}
.wave{
display: none;
}
.login-content{
justify-content: center;
}
}Step 3:- Create main.js File.
const inputs = document.querySelectorAll(".input");
function addcl(){
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl(){
let parent = this.parentNode.parentNode;
if(this.value == ""){
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
Note:- Insert the link of style.css and main.js file in index.html file.
