This post contains a total of 15+ CSS Form Examples with Source Code. All these Forms ( Login, Checkout, Responsive, Animated , Credit Card, Simple, Interactive ) are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Form Examples
1. By Håvard Brynjulfsen
Made by Håvard Brynjulfsen. SignUp form with Header image. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&display=swap");
*, *:after, *:before {
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
line-height: 1.5;
background-color: #f1f3fb;
padding: 0 2rem;
}
img {
max-width: 100%;
display: block;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
.card {
margin: 2rem auto;
display: flex;
flex-direction: column;
width: 100%;
max-width: 425px;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25);
padding: 0.75rem;
}
.card-image {
border-radius: 8px;
overflow: hidden;
padding-bottom: 65%;
background-image: url("https://assets.codepen.io/285131/coffee_1.jpg");
background-repeat: no-repeat;
background-size: 150%;
background-position: 0 5%;
position: relative;
}
.card-heading {
position: absolute;
left: 10%;
top: 15%;
right: 10%;
font-size: 1.75rem;
font-weight: 700;
color: #735400;
line-height: 1.222;
}
.card-heading small {
display: block;
font-size: 0.75em;
font-weight: 400;
margin-top: 0.25em;
}
.card-form {
padding: 2rem 1rem 0;
}
.input {
display: flex;
flex-direction: column-reverse;
position: relative;
padding-top: 1.5rem;
}
.input + .input {
margin-top: 1.5rem;
}
.input-label {
color: #8597a3;
position: absolute;
top: 1.5rem;
transition: 0.25s ease;
}
.input-field {
border: 0;
z-index: 1;
background-color: transparent;
border-bottom: 2px solid #eee;
font: inherit;
font-size: 1.125rem;
padding: 0.25rem 0;
}
.input-field:focus, .input-field:valid {
outline: 0;
border-bottom-color: #6658d3;
}
.input-field:focus + .input-label, .input-field:valid + .input-label {
color: #6658d3;
transform: translateY(-1.5rem);
}
.action {
margin-top: 2rem;
}
.action-button {
font: inherit;
font-size: 1.25rem;
padding: 1em;
width: 100%;
font-weight: 500;
background-color: #6658d3;
border-radius: 6px;
color: #FFF;
border: 0;
}
.action-button:focus {
outline: 0;
}
.card-info {
padding: 1rem 1rem;
text-align: center;
font-size: 0.875rem;
color: #8597a3;
}
.card-info a {
display: block;
color: #6658d3;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<!-- code here -->
<div class="card">
<div class="card-image">
<h2 class="card-heading">
Get started
<small>Let us create your account</small>
</h2>
</div>
<form class="card-form">
<div class="input">
<input type="text" class="input-field" value="Alexander Parkinson" required/>
<label class="input-label">Full name</label>
</div>
<div class="input">
<input type="text" class="input-field" value="[email protected]" required/>
<label class="input-label">Email</label>
</div>
<div class="input">
<input type="password" class="input-field" required/>
<label class="input-label">Password</label>
</div>
<div class="action">
<button class="action-button">Get started</button>
</div>
</form>
<div class="card-info">
<p>By signing up you are agreeing to our <a href="#">Terms and Conditions</a></p>
</div>
</div>
</div>
</body>
</html>2. By Thibaut
Made by Thibaut. Modal Box Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #879fa6 !important;
}
::-webkit-input-placeholder {
color: #879fa6;
}
:-ms-input-placeholder {
color: #879fa6 !important;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #e4ecef;
}
input, textarea, select, label {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.contact {
position: relative;
margin: 20px auto 30px;
padding: 5px;
width: 320px;
background: #eef5f7;
border: 1px solid #cfd5da;
border-bottom-color: #ccd1d6;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contact-inner {
padding: 25px;
background: white;
border-radius: 2px;
}
.contact:before, .contact:after, .contact-inner:before, .contact-inner:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 1px;
height: 1px;
border: outset transparent;
border-width: 12px 14px 0;
border-top-style: solid;
-webkit-transform: rotate(360deg);
}
.contact:before {
margin-top: 1px;
border-top-color: #d8e1e6;
}
.contact-inner:before {
border-top-color: #ccd1d6;
}
.contact-inner:after {
margin-top: -1px;
border-top-color: #eef5f7;
}
.contact:after {
margin-top: -8px;
border-top-color: white;
}
.contact-input {
overflow: hidden;
margin-bottom: 20px;
padding: 5px;
background: #eef7f9;
border-radius: 2px;
}
.contact-input > input, .contact-input > textarea {
display: block;
width: 100%;
height: 29px;
padding: 0 9px;
color: #4d5a5e;
background: white;
border: 1px solid #cfdfe3;
border-bottom-color: #d2e2e7;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
}
.contact-input > input:focus, .contact-input > textarea:focus {
border-color: #93c2ec;
outline: 0;
-webkit-box-shadow: 0 0 0 8px #e1ecf5;
box-shadow: 0 0 0 8px #e1ecf5;
}
.lt-ie9 .contact-input > input, .lt-ie9 .contact-input > textarea {
line-height: 27px;
}
.contact-input > textarea {
padding: 4px 8px;
height: 90px;
line-height: 20px;
resize: none;
}
.select {
display: block;
position: relative;
overflow: hidden;
background: white;
border: 1px solid #d2e2e7;
border-bottom-color: #c5d4d9;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -moz-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -o-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: linear-gradient(to bottom, #fcfdff, #f2f7f7);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.select:before, .select:after {
content: '';
position: absolute;
right: 11px;
width: 0;
height: 0;
border-left: 3px outset transparent;
border-right: 3px outset transparent;
}
.select:before {
top: 10px;
border-bottom: 3px solid #7f9298;
}
.select:after {
top: 16px;
border-top: 3px solid #7f9298;
}
.select > select {
position: relative;
z-index: 2;
width: 112%;
height: 29px;
line-height: 17px;
padding: 5px 9px;
padding-right: 0;
color: #80989f;
background: transparent;
background: rgba(0, 0, 0, 0);
border: 0;
-webkit-appearance: none;
}
.select > select:focus {
color: #4d5a5e;
outline: 0;
}
.contact-submit {
text-align: right;
}
.contact-submit > input {
display: inline-block;
vertical-align: top;
padding: 0 14px;
height: 29px;
font-weight: bold;
color: #729fb2;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: #deeef4;
border: 1px solid #bed6e3;
border-bottom-color: #accbd9;
border-radius: 15px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -moz-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -o-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: linear-gradient(to bottom, #e6f2f7, #d0e6ee);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
}
.contact-submit > input:active {
color: #6a95a9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #c9dfe9;
border-color: #a3bed0 #b5ccda #b5ccda;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
}
</style>
</head>
<body>
<form action="" class="contact" onsubmit="return false;">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" name="name" placeholder="Your Name…" autofocus>
</p>
<p class="contact-input">
<label for="select" class="select">
<select name="subject" id="select">
<option value="" selected>Choose Subject…</option>
<option value="1">I have a suggestion</option>
<option value="1">I found a bug</option>
<option value="1">Other</option>
</select>
</label>
</p>
<p class="contact-input">
<textarea name="message" placeholder="Your Message…"></textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Message">
</p>
</fieldset>
</form>
</body>
</html>3. By Omar Dsooky
Made by Omar Dsooky. Responsive Login Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
@charset "UTF-8";
body {
background-image: linear-gradient(135deg, #FAB2FF 10%, #1904E5 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Open Sans", sans-serif;
color: #333333;
}
.box-form {
margin: 0 auto;
width: 80%;
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
display: flex;
flex: 1 1 100%;
align-items: stretch;
justify-content: space-between;
box-shadow: 0 0 20px 6px #090b6f85;
}
@media (max-width: 980px) {
.box-form {
flex-flow: wrap;
text-align: center;
align-content: center;
align-items: center;
}
}
.box-form div {
height: auto;
}
.box-form .left {
color: #FFFFFF;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://i.pinimg.com/736x/5d/73/ea/5d73eaabb25e3805de1f8cdea7df4a42--tumblr-backgrounds-iphone-phone-wallpapers-iphone-wallaper-tumblr.jpg");
overflow: hidden;
}
.box-form .left .overlay {
padding: 30px;
width: 100%;
height: 100%;
background: #5961f9ad;
overflow: hidden;
box-sizing: border-box;
}
.box-form .left .overlay h1 {
font-size: 10vmax;
line-height: 1;
font-weight: 900;
margin-top: 40px;
margin-bottom: 20px;
}
.box-form .left .overlay span p {
margin-top: 30px;
font-weight: 900;
}
.box-form .left .overlay span a {
background: #3b5998;
color: #FFFFFF;
margin-top: 10px;
padding: 14px 50px;
border-radius: 100px;
display: inline-block;
box-shadow: 0 3px 6px 1px #042d4657;
}
.box-form .left .overlay span a:last-child {
background: #1dcaff;
margin-left: 30px;
}
.box-form .right {
padding: 40px;
overflow: hidden;
}
@media (max-width: 980px) {
.box-form .right {
width: 100%;
}
}
.box-form .right h5 {
font-size: 6vmax;
line-height: 0;
}
.box-form .right p {
font-size: 14px;
color: #B0B3B9;
}
.box-form .right .inputs {
overflow: hidden;
}
.box-form .right input {
width: 100%;
padding: 10px;
margin-top: 25px;
font-size: 16px;
border: none;
outline: none;
border-bottom: 2px solid #B0B3B9;
}
.box-form .right .remember-me--forget-password {
display: flex;
justify-content: space-between;
align-items: center;
}
.box-form .right .remember-me--forget-password input {
margin: 0;
margin-right: 7px;
width: auto;
}
.box-form .right button {
float: right;
color: #fff;
font-size: 16px;
padding: 12px 35px;
border-radius: 50px;
display: inline-block;
border: 0;
outline: 0;
box-shadow: 0px 4px 20px 0px #49c628a6;
background-image: linear-gradient(135deg, #70F570 10%, #49C628 100%);
}
label {
display: block;
position: relative;
margin-left: 30px;
}
label::before {
content: " ";
position: absolute;
font-family: FontAwesome;
background: transparent;
border: 3px solid #70F570;
border-radius: 4px;
color: transparent;
left: -30px;
transition: all 0.2s linear;
}
label:hover::before {
font-family: FontAwesome;
content: " ";
color: #fff;
cursor: pointer;
background: #70F570;
}
label:hover::before .text-checkbox {
background: #70F570;
}
label span.text-checkbox {
display: inline-block;
height: auto;
position: relative;
cursor: pointer;
transition: all 0.2s linear;
}
label input[type=checkbox] {
display: none;
}
</style>
</head>
<body>
<div class="box-form">
<div class="left">
<div class="overlay">
<h1>Hello World.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur et est sed felis aliquet sollicitudin</p>
<span>
<p>login with social media</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Login with Twitter</a>
</span>
</div>
</div>
<div class="right">
<h5>Login</h5>
<p>Don't have an account? <a href="#">Creat Your Account</a> it takes less than a minute</p>
<div class="inputs">
<input type="text" placeholder="user name">
<br>
<input type="password" placeholder="password">
</div>
<br><br>
<div class="remember-me--forget-password">
<!-- Angular -->
<label>
<input type="checkbox" name="item" checked/>
<span class="text-checkbox">Remember me</span>
</label>
<p>forget password?</p>
</div>
<br>
<button>Login</button>
</div>
</div>
</body>
</html>4. By Ricky Eckhardt
Made by Ricky Eckhardt. Colorful Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Spartan&display=swap");
* {
margin: 0;
padding: 0;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2044837-jpeg.jpg") center center no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-size: 12pt;
font-family: "Spartan";
color: #2A293E;
}
.contact-us {
background: #f8f4e5;
padding: 50px 100px;
border-top: 10px solid #f45702;
}
label, input, textarea {
display: block;
width: 100%;
font-size: 12pt;
line-height: 24pt;
font-family: "Spartan";
}
input {
margin-bottom: 24pt;
}
h3 {
font-weight: normal;
font-size: 10pt;
line-height: 24pt;
font-style: italic;
margin: 0 0 0.5em 0;
}
span {
font-size: 8pt;
}
em {
color: #f45702;
font-weight: bold;
}
input, textarea {
border: none;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px;
background: #f8f4e5;
padding-left: 5px;
outline: none;
}
input:focus, textarea:focus {
border: 1px solid #6bd4b1;
}
textarea {
resize: none;
}
button {
display: block;
float: right;
line-height: 24pt;
padding: 0 20px;
border: none;
background: #f45702;
color: white;
letter-spacing: 2px;
transition: 0.2s all ease-in-out;
border-bottom: 2px solid transparent;
outline: none;
}
button:hover {
background: inherit;
color: #f45702;
border-bottom: 2px solid #f45702;
}
::selection {
background: #ffc7b8;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
border: 1px solid #6bd4b1;
-webkit-text-fill-color: #2A293E;
-webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
transition: background-color 5000s ease-in-out 0s;
}
</style>
</head>
<body>
<div class="contact-us">
<form action="#">
<label for="customerName">NAME <em>*</em></label><input id="customerName" name="customerName" required="" type="text" /><label for="customerEmail">EMAIL <em>*</em></label><input id="customerEmail" name="customerEmail" required="" type="email" /><label for="customerPhone">PHONE</label><input id="customerPhone" name="customerPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" type="tel" /><label for="orderNumber">ORDER NUMBER</label><input id="orderNumber" name="orderNumber" type="text" /><label for="customerNote">YOUR MESSAGE <em>*</em></label><textarea id="customerNote" name="customerNote" required="" rows="4"></textarea>
<h3>
Please provide all the information about your issue you can.
</h3>
<label for="spamProtection">SPAM PROTECTION <em>* </em><span> What day comes before July 11th?</span></label><input id="spamProtection" name="spamProtection" type="text" /><button id="customerOrder">SUBMIT</button>
</form>
</div>
</body>
</html>5. By Miro Karilahti
Made by Miro Karilahti. Simple Login Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #456;
font-family: 'Open Sans', sans-serif;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
/* The triangle form is achieved by a CSS hack */
.login-triangle {
width: 0;
margin-right: auto;
margin-left: auto;
border: 12px solid transparent;
border-bottom-color: #28d;
}
.login-header {
background: #28d;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.login-container {
background: #ebebeb;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}
</style>
</head>
<body>
<div class="login">
<div class="login-triangle"></div>
<h2 class="login-header">Log in</h2>
<form class="login-container">
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>
<p><input type="submit" value="Log in"></p>
</form>
</div>
</body>
</html>
6. By Florin Pop
Made by Florin Pop. Subscribe Form with Minimalistic design. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
:root {
--pink1: #EF73CB;
--pink2: #DC5F89;
}
* {
box-sizing: border-box;
}
body, html {
margin: 0;
}
body {
align-items: center;
background-color: #FEF8FC;
color: #fff;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
justify-content: center;
height: 100vh;
text-align: center;
}
.panel-container {
background-image: linear-gradient(to bottom right, var(--pink1), var(--pink2));
border-radius: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 30px;
margin: 15px;
}
.panel-container h3 {
margin-bottom: 30px;
letter-spacing: 0.5px;
}
.panel-container input, .panel-container button {
border: none;
border-radius: 3px;
display: block;
font-size: 12px;
padding: 7px 10px;
margin: 15px 0;
width: 100%;
}
.panel-container button {
background-image: linear-gradient(to bottom right, var(--pink1), var(--pink2));
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
.panel-container small {
font-size: 0.75em;
line-height: 10px;
opacity: 0.5;
}
.panel-container small:first-of-type {
text-transform: uppercase;
}
footer {
background-color: #222;
color: #fff;
bottom: 0;
position: fixed;
left: 0;
right: 0;
letter-spacing: 1px;
text-align: center;
}
footer p {
font-size: 1em;
margin: 5px 0;
}
footer i {
color: red;
}
footer a {
color: #3C97BF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="panel-container">
<small>
Don't miss out the latest
</small>
<h3>
Weekly FREE UI resources <br />
straight to your inbox
</h3>
<input type="email" placeholder="Email address" />
<button>Stay inspired</button>
<small>
Commitment issues? <br />
Unsubscribe at any time.
</small>
</div>
</body>
</html>7. By Rosa
Made by Rosa. Interactive Checkout form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
color: #333;
background-color: #eee;
}
h1, h2, h3, h4, h5, h6{
font-weight: 200;
}
h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #2fcc71;
max-width: 40%;
margin: 20px auto;
}
/* CONTAINERS */
.container {max-width: 850px; width: 100%; margin: 0 auto;}
.four { width: 32.26%; max-width: 32.26%;}
/* COLUMNS */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-of-type { margin-left: 0; }
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* FORM */
.form .plan input, .form .payment-plan input, .form .payment-type input{
display: none;
}
.form label{
position: relative;
color: #fff;
background-color: #aaa;
font-size: 26px;
text-align: center;
height: 150px;
line-height: 150px;
display: block;
cursor: pointer;
border: 3px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form .plan input:checked + label, .form .payment-plan input:checked + label, .form .payment-type input:checked + label{
border: 3px solid #333;
background-color: #2fcc71;
}
.form .plan input:checked + label:after, form .payment-plan input:checked + label:after, .form .payment-type input:checked + label:after{
content: "\2713";
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100%;
border: 2px solid #333;
background-color: #2fcc71;
z-index: 999;
position: absolute;
top: -10px;
right: -10px;
}
.submit{
padding: 15px 60px;
display: inline-block;
border: none;
margin: 20px 0;
background-color: #2fcc71;
color: #fff;
border: 2px solid #333;
font-size: 18px;
-webkit-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.submit:hover{
cursor: pointer;
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div class="container">
<h1>Checkout Form</h1>
<form class="form cf">
<section class="plan cf">
<h2>Choose a plan:</h2>
<input type="radio" name="radio1" id="free" value="free"><label class="free-label four col" for="free">Free</label>
<input type="radio" name="radio1" id="basic" value="basic" checked><label class="basic-label four col" for="basic">Basic</label>
<input type="radio" name="radio1" id="premium" value="premium"><label class="premium-label four col" for="premium">Premium</label>
</section>
<section class="payment-plan cf">
<h2>Select a payment plan:</h2>
<input type="radio" name="radio2" id="monthly" value="monthly" checked><label class="monthly-label four col" for="monthly">Monthly</label>
<input type="radio" name="radio2" id="yearly" value="yearly"><label class="yearly-label four col" for="yearly">Yearly</label>
</section>
<section class="payment-type cf">
<h2>Select a payment type:</h2>
<input type="radio" name="radio3" id="credit" value="credit"><label class="credit-label four col" for="credit">Credit Card</label>
<input type="radio" name="radio3" id="debit" value="debit"><label class="debit-label four col" for="debit">Debit Card</label>
<input type="radio" name="radio3" id="paypal" value="paypal" checked><label class="paypal-label four col" for="paypal">Paypal</label>
</section>
<input class="submit" type="submit" value="Submit">
</form>
</div>
</body>
</html>8. By Ricky Eckhardt
Made by Ricky Eckhardt. Abstract Sign Up Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Fjalla+One&display=swap");
* {
margin: 0;
padding: 0;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2210775-jpeg.jpg") center center no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
}
.contact-us {
background: #f8f4e5;
padding: 50px 100px;
border: 2px solid black;
box-shadow: 15px 15px 1px #ffa580, 15px 15px 1px 2px black;
}
input {
display: block;
width: 100%;
font-size: 14pt;
line-height: 28pt;
font-family: "Fjalla One";
margin-bottom: 28pt;
border: none;
border-bottom: 5px solid black;
background: #f8f4e5;
min-width: 250px;
padding-left: 5px;
outline: none;
color: black;
}
input:focus {
border-bottom: 5px solid #ffa580;
}
button {
display: block;
margin: 0 auto;
line-height: 28pt;
padding: 0 20px;
background: #ffa580;
letter-spacing: 2px;
transition: 0.2s all ease-in-out;
outline: none;
border: 1px solid black;
box-shadow: 3px 3px 1px 1px #95a4ff, 3px 3px 1px 2px black;
}
button:hover {
background: black;
color: white;
border: 1px solid black;
}
::selection {
background: #ffc8ff;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
border-bottom: 5px solid #95a4ff;
-webkit-text-fill-color: #2A293E;
-webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
transition: background-color 5000s ease-in-out 0s;
}
</style>
</head>
<body>
<div class="contact-us">
<form>
<input placeholder="Name" required="" type="text" /><input name="customerEmail" placeholder="Email" type="email" /><input name="customerPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Phone" type="tel" /><button type="button">SIGN UP</button>
</form>
</div>
</body>
</html>
9. By Michael Fraser
Made by Michael Fraser. Treehouse contact form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Dosis:500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 20px auto;
padding-top: 50px;
width: 90%;
min-width: 280px;
font-family: "Dosis", sans-serif;
font-weight: 700;
font-size: 1.3em;
line-height: 1.8em;
color: #999999;
}
@media (min-width: 768px) {
body {
width: 70%;
font-size: 1.5em;
}
}
@media (min-width: 1000px) {
body {
width: 50%;
}
}
h2 {
margin: 0;
padding-bottom: 20px;
text-align: center;
font-size: 1.8em;
color: #666666;
}
@media (min-width: 600px) {
h2 {
font-size: 2.2em;
margin-left: 60px;
text-align: left;
}
}
fieldset {
width: 100%;
padding: 30px;
background: #f7f7f7;
border-radius: 30px;
border: none;
position: relative;
transition: all 0.5s ease;
}
@media (min-width: 768px) {
fieldset {
margin-left: 30px;
}
fieldset:before {
content: "";
position: absolute;
display: block;
width: 1px;
height: 1px;
border: 30px solid transparent;
border-right: 30px solid #f7f7f7;
left: -60px;
top: 30%;
}
}
label {
color: #787878;
}
input, textarea {
background: none;
background-image: linear-gradient(#fcfcfc 50%, transparent 50%);
background-size: 100% 3.6em;
border: none;
padding: 3px 7px;
border-radius: 3px;
color: #7b7;
/**/
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #bbddbb;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #bbddbb;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #bbddbb;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #bbddbb;
}
input:focus, textarea:focus {
outline: none;
color: #fff;
background: #7b7;
background-image: linear-gradient(#7ebe7e 50%, transparent 50%);
background-size: 100% 3.6em;
}
.ieSwitch input, .ieSwitch textarea {
outline: inherit;
background: white;
}
textarea {
resize: none;
overflow: auto;
}
#name, #email, #textarea {
width: 100%;
transition: all 0.5s ease;
}
@media (min-width: 768px) {
#name, #email {
width: 240px;
}
}
button {
width: 100%;
margin-top: 10px;
padding: 5px 8px;
border: none;
background: none;
font-size: 1.6em;
color: #7b7;
transition: all 0.5s ease;
}
button:focus, button:hover, button:active {
outline: none;
background: #7b7;
color: #fff;
border-radius: 5px;
}
button:active {
background: #f96;
}
@media (min-width: 600px) {
button {
width: auto;
float: right;
margin: 10px;
}
}
</style>
</head>
<body>
<h2>Get in touch</h2>
<form action="#" method="POST" name="contact_form">
<fieldset>
<span class="filler">Hi, My </span>
<label for="name">name</label>
<span class="filler"> is </span>
<input type="text" name="name" id="name" placeholder="(your name here)"/>
<span class="filler"> and my </span>
<label for="email">email address</label>
<span class="filler"> is </span>
<input type="email" name="email" id="email" placeholder="(your email address)" />
<br>
<span class="filler">I'd like to send you a </span>
<label for="textarea">message</label>
<span class="filler"> regarding...</span>
<textarea rows="5" cols="50" name="textarea" id="textarea" placeholder="Enter your message here"></textarea>
</fieldset>
<button type="button" value="Send">Send</button>
</form>
</body>
</html>10. By Ayu
Made by Ayu. Basic Login Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);
body {
background: url(https://dl.dropboxusercontent.com/u/23299152/Wallpapers/wallpaper-22705.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
.login-card {
padding: 40px;
width: 274px;
background-color: #F7F7F7;
margin: 0 auto 10px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.login-card h1 {
font-weight: 100;
text-align: center;
font-size: 2.3em;
}
.login-card input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.login-card input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.login {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.login-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.login-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.login-card a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-card a:hover {
opacity: 1;
}
.login-help {
width: 100%;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="login-card">
<h1>Log-in</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
<a href="#">Register</a> • <a href="#">Forgot Password</a>
</div>
</div>
</body>
</html>11. By PETA KODE
Made by PETA KODE. Newsletter Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
</style>
</head>
<body>
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='#' class='subscribe-form' method='post' onsubmit='#'>
<input name='uri' type='hidden' value='ArlinaDesign'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
</body>
</html>12. By Ryan Mulligan
Made by Ryan Mulligan. Folded Paper Design Login Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
:root {
--space-root: 1rem;
--space-xs: calc(var(--space-root) / 2);
--space-s: calc(var(--space-root) / 1.5);
--space-m: var(--space-root);
--space-l: calc(var(--space-root) * 1.5);
--space-xl: calc(var(--space-root) * 2);
--color-primary: mediumslateblue;
--color-secondary: black;
--color-tertiary: hotpink;
--base-border-radius: 0.25rem;
--ease: cubic-bezier(0.075, 0.82, 0.165, 1);
--duration: 350ms;
--font-family: "Roboto", sans-serif;
--font-size: 1.25rem;
}
* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
margin: 0;
height: 100vh;
padding: var(--space-m);
font-size: var(--font-size);
font-family: var(--font-family);
line-height: 1.2;
background-color: var(--color-tertiary);
}
a {
color: var(--color-primary);
}
a:focus {
color: var(--color-secondary);
}
h2 {
font-weight: 700;
font-size: calc(var(--font-size) * 1.5);
}
.form {
position: relative;
width: 100%;
max-width: 450px;
margin: 0 auto;
transform: skewY(-5deg) translateY(10%) scale(0.94);
transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.form:before, .form:after {
content: "";
position: absolute;
pointer-events: none;
background-color: #ebebeb;
width: 25%;
height: 100%;
transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.form:before {
top: 0;
right: calc(100% - 1px);
transform-origin: 100% 100%;
transform: skewY(-35deg) scaleX(-1);
z-index: -1;
}
.form:after {
top: 0;
left: calc(100% - 1px);
transform-origin: 0 0;
transform: skewY(-35deg) scaleX(-1);
z-index: 2;
}
.form:hover, .form:focus-within {
transform: scale(1.0001);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}
.form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after {
background-color: white;
transform: skewY(0);
}
.form-inner {
padding: var(--space-xl);
background-color: white;
z-index: 1;
}
.form-inner > * + * {
margin-top: var(--space-xl);
}
.input-wrapper:focus-within label {
color: var(--color-secondary);
}
.input-wrapper:focus-within .icon {
background-color: var(--color-secondary);
}
.input-wrapper:focus-within input {
border-color: var(--color-secondary);
}
.input-wrapper + .input-wrapper {
margin-top: var(--space-l);
}
.input-group {
position: relative;
}
.input-group input {
border-radius: var(--base-border-radius);
padding-left: calc(var(--space-s) + 60px);
}
.input-group .icon {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-top-left-radius: var(--base-border-radius);
border-bottom-left-radius: var(--base-border-radius);
pointer-events: none;
}
label {
font-size: calc(var(--font-size) / 1.65);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.065rem;
display: block;
margin-bottom: var(--space-xs);
color: var(--color-primary);
}
.icon {
display: flex;
align-items: center;
flex: 0 1 auto;
padding: var(--space-m);
background-color: var(--color-primary);
}
.icon svg {
width: 1.25em;
height: 1.25em;
fill: white;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform var(--duration) var(--ease);
}
input {
flex: 1 1 0;
width: 100%;
outline: none;
padding: var(--space-m);
font-size: var(--font-size);
font-family: var(--font-family);
color: var(--color-secondary);
border: 2px solid var(--color-primary);
}
input:focus {
color: var(--color-primary);
}
.btn-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn-group > * + * {
margin-left: var(--space-s);
}
.btn {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
padding: var(--space-m) var(--space-l);
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--base-border-radius);
}
.btn--primary {
font-size: calc(var(--font-size) / 1.65);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.065rem;
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.btn--primary:focus {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
}
.btn--text {
font-size: calc(var(--font-size) / 1.5);
padding: 0;
}
</style>
</head>
<body>
<form class="form" onsubmit="return false" autocomplete="off">
<div class="form-inner">
<h2>User Login</h2>
<div class="input-wrapper">
<label for="login-username">Username</label>
<div class="input-group"><span class="icon">
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
</svg></span>
<input type="text" id="login-username" data-lpignore="true"/>
</div>
</div>
<div class="input-wrapper">
<label for="login-password">Password</label>
<div class="input-group"><span class="icon">
<svg viewBox="0 0 24 24">
<path d="M11.83,1.73C8.43,1.79 6.23,3.32 6.23,3.32C5.95,3.5 5.88,3.91 6.07,4.19C6.27,4.5 6.66,4.55 6.96,4.34C6.96,4.34 11.27,1.15 17.46,4.38C17.75,4.55 18.14,4.45 18.31,4.15C18.5,3.85 18.37,3.47 18.03,3.28C16.36,2.4 14.78,1.96 13.36,1.8C12.83,1.74 12.32,1.72 11.83,1.73M12.22,4.34C6.26,4.26 3.41,9.05 3.41,9.05C3.22,9.34 3.3,9.72 3.58,9.91C3.87,10.1 4.26,10 4.5,9.68C4.5,9.68 6.92,5.5 12.2,5.59C17.5,5.66 19.82,9.65 19.82,9.65C20,9.94 20.38,10.04 20.68,9.87C21,9.69 21.07,9.31 20.9,9C20.9,9 18.15,4.42 12.22,4.34M11.5,6.82C9.82,6.94 8.21,7.55 7,8.56C4.62,10.53 3.1,14.14 4.77,19C4.88,19.33 5.24,19.5 5.57,19.39C5.89,19.28 6.07,18.92 5.95,18.6V18.6C4.41,14.13 5.78,11.2 7.8,9.5C9.77,7.89 13.25,7.5 15.84,9.1C17.11,9.9 18.1,11.28 18.6,12.64C19.11,14 19.08,15.32 18.67,15.94C18.25,16.59 17.4,16.83 16.65,16.64C15.9,16.45 15.29,15.91 15.26,14.77C15.23,13.06 13.89,12 12.5,11.84C11.16,11.68 9.61,12.4 9.21,14C8.45,16.92 10.36,21.07 14.78,22.45C15.11,22.55 15.46,22.37 15.57,22.04C15.67,21.71 15.5,21.35 15.15,21.25C11.32,20.06 9.87,16.43 10.42,14.29C10.66,13.33 11.5,13 12.38,13.08C13.25,13.18 14,13.7 14,14.79C14.05,16.43 15.12,17.54 16.34,17.85C17.56,18.16 18.97,17.77 19.72,16.62C20.5,15.45 20.37,13.8 19.78,12.21C19.18,10.61 18.07,9.03 16.5,8.04C14.96,7.08 13.19,6.7 11.5,6.82M11.86,9.25V9.26C10.08,9.32 8.3,10.24 7.28,12.18C5.96,14.67 6.56,17.21 7.44,19.04C8.33,20.88 9.54,22.1 9.54,22.1C9.78,22.35 10.17,22.35 10.42,22.11C10.67,21.87 10.67,21.5 10.43,21.23C10.43,21.23 9.36,20.13 8.57,18.5C7.78,16.87 7.3,14.81 8.38,12.77C9.5,10.67 11.5,10.16 13.26,10.67C15.04,11.19 16.53,12.74 16.5,15.03C16.46,15.38 16.71,15.68 17.06,15.7C17.4,15.73 17.7,15.47 17.73,15.06C17.79,12.2 15.87,10.13 13.61,9.47C13.04,9.31 12.45,9.23 11.86,9.25M12.08,14.25C11.73,14.26 11.46,14.55 11.47,14.89C11.47,14.89 11.5,16.37 12.31,17.8C13.15,19.23 14.93,20.59 18.03,20.3C18.37,20.28 18.64,20 18.62,19.64C18.6,19.29 18.3,19.03 17.91,19.06C15.19,19.31 14.04,18.28 13.39,17.17C12.74,16.07 12.72,14.88 12.72,14.88C12.72,14.53 12.44,14.25 12.08,14.25Z"></path>
</svg></span>
<input type="password" id="login-password" data-lpignore="true"/>
</div>
</div>
<div class="btn-group">
<button class="btn btn--primary">Sign in</button><a class="btn--text" href="#0">Forgot password?</a>
</div>
</div>
</form>
</body>
</html>
13. By Aigars Silkalns
Made by Aigars Silkalns. Flat HTML5/CSS3 Login Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: rgb(141,194,111);
background: linear-gradient(90deg, rgba(141,194,111,1) 0%, rgba(118,184,82,1) 50%);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>14. By MS Design
Made by MS Design. Newsletter Subscribe form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<style>
body {
background: #333;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribebox {
background: #576269;
padding: 20px;
font-family: 'PT Sans', sans-serif;
width: 300px;
}
.widget_follow_subscribe .widget-detail {
padding: 36px 30px 40px 30px;
}
#subscribebox p {
color: white;
font-size: 15px;
text-align: center;
font-weight: 700;
}
.follow-subscribe-social {
margin: 0 0 15px;
padding: 0 0 14px;
border-bottom: #858585 solid 1px;
}
.follow-subscribe-social ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.follow-subscribe-social ul li {
display: inline;
margin: 0 15px 0 0;
border-bottom: none;
}
.follow-subscribe-social ul li:last-child {
margin: 0;
}
.follow-subscribe-social ul li a {
font-size: 17px;
color: #cacaca;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.follow-subscribe-social ul li a:hover {
color: #fff;
}
form.subscribe {
margin-top: -7px;
}
form.subscribe input {
display: block;
width: 100%;
}
.subscribe-email {
height: 45px;
border: none;
margin: 0 0 10px;
font-size: 0.928571em;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
}
.subscribe-email:focus {
outline: 0;
}
/* ===== Placeholder color ===== */
form.subscribe .placeholder {
/* Internet Explorer 9 */
color: #cacaca;
}
form.subscribe input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder {
/* WebKit browsers */
color: #cacaca;
}
form.subscribe input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fafafa;
}
form.subscribe input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fafafa;
}
.subscribe-button {
height: 45px;
font-weight: 700;
font-size: 16px;
color: #fff;
text-transform: uppercase;
border: none;
background-color: #F35D5C;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
background-color: #f1d640;
}
.subscribe-button:focus {
outline: 0;
}
.creadit a {
background: #F35D5C;
color: white;
margin-top: 30px;
padding: 20px;
font-size: 15px;
}
</style>
</head>
<body>
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='#' method='post' onsubmit='#' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
</center>
<br/><br/><br/>
</body>
</html>15. By Mike Young
Made by Mike Young. Login form with background image. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body,
.signin {
background-color: #d3d3d3;
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 14px;
letter-spacing: 1px;
}
.login {
position: relative;
height: 560px;
width: 405px;
margin: auto;
padding: 60px 60px;
background: url(https://picsum.photos/id/1004/5616/3744) no-repeat center center #505050;
background-size: cover;
box-shadow: 0px 30px 60px -5px #000;
}
form {
padding-top: 80px;
}
.active {
border-bottom: 2px solid #1161ed;
}
.nonactive {
color: rgba(255, 255, 255, 0.2);
}
h2 {
padding-left: 12px;
font-size: 22px;
text-transform: uppercase;
padding-bottom: 5px;
letter-spacing: 2px;
display: inline-block;
font-weight: 100;
}
h2:first-child {
padding-left: 0px;
}
span {
text-transform: uppercase;
font-size: 12px;
opacity: 0.4;
display: inline-block;
position: relative;
top: -65px;
transition: all 0.5s ease-in-out;
}
.text {
border: none;
width: 89%;
padding: 10px 20px;
display: block;
height: 15px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0);
overflow: hidden;
margin-top: 15px;
transition: all 0.5s ease-in-out;
}
.text:focus {
outline: 0;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
background: rgba(0, 0, 0, 0);
}
.text:focus + span {
opacity: 0.6;
}
input[type="text"],
input[type="password"] {
font-family: 'Montserrat', sans-serif;
color: #fff;
}
input {
display: inline-block;
padding-top: 20px;
font-size: 14px;
}
h2,
span,
.custom-checkbox {
margin-left: 20px;
}
.custom-checkbox {
-webkit-appearance: none;
background-color: rgba(255, 255, 255, 0.1);
padding: 8px;
border-radius: 2px;
display: inline-block;
position: relative;
top: 6px;
}
.custom-checkbox:checked {
background-color: rgba(17, 97, 237, 1);
}
.custom-checkbox:checked:after {
content: '\2714';
font-size: 10px;
position: absolute;
top: 1px;
left: 4px;
color: #fff;
}
.custom-checkbox:focus {
outline: none;
}
label {
display: inline-block;
padding-top: 10px;
padding-left: 5px;
}
.signin {
background-color: #1161ed;
color: #FFF;
width: 100%;
padding: 10px 20px;
display: block;
height: 39px;
border-radius: 20px;
margin-top: 30px;
transition: all 0.5s ease-in-out;
border: none;
text-transform: uppercase;
}
.signin:hover {
background: #4082f5;
box-shadow: 0px 4px 35px -5px #4082f5;
cursor: pointer;
}
.signin:focus {
outline: none;
}
hr {
border: 1px solid rgba(255, 255, 255, 0.1);
top: 85px;
position: relative;
}
a {
text-align: center;
display: block;
top: 120px;
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div class="login">
<h2 class="active"> sign in </h2>
<h2 class="nonactive"> sign up </h2>
<form>
<input type="text" class="text" name="username">
<span>username</span>
<br>
<br>
<input type="password" class="text" name="password">
<span>password</span>
<br>
<input type="checkbox" id="checkbox-1-1" class="custom-checkbox" />
<label for="checkbox-1-1">Keep me Signed in</label>
<button class="signin">
Sign In
</button>
<hr>
<a href="#">Forgot Password?</a>
</form>
</div>
</body>
</html>16. By Leena Lavanya
Made by Leena Lavanya. Simple Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<style>
body{background:#59ABE3;margin:0}
.form{width:340px;height:440px;background:#e6e6e6;border-radius:8px;box-shadow:0 0 40px -10px #000;margin:calc(50vh - 220px) auto;padding:20px 30px;max-width:calc(100vw - 40px);box-sizing:border-box;font-family:'Montserrat',sans-serif;position:relative}
h2{margin:10px 0;padding-bottom:10px;width:180px;color:#78788c;border-bottom:3px solid #78788c}
input{width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2}
input:focus{border-bottom:2px solid #78788c}
p:before{content:attr(type);display:block;margin:28px 0 0;font-size:14px;color:#5a5a5a}
button{float:right;padding:8px 12px;margin:8px 0 0;font-family:'Montserrat',sans-serif;border:2px solid #78788c;background:0;color:#5a5a6e;cursor:pointer;transition:all .3s}
button:hover{background:#78788c;color:#fff}
div{content:'Hi';position:absolute;bottom:-15px;right:-20px;background:#50505a;color:#fff;width:320px;padding:16px 4px 16px 0;border-radius:6px;font-size:13px;box-shadow:10px 10px 40px -14px #000}
span{margin:0 5px 0 15px}
</style>
</head>
<body>
<form class="form">
<h2>CONTACT US</h2>
<p type="Name:"><input placeholder="Write your name here.."></input></p>
<p type="Email:"><input placeholder="Let us know how to contact you back.."></input></p>
<p type="Message:"><input placeholder="What would you like to tell us.."></input></p>
<button>Send Message</button>
<div>
<span class="fa fa-phone"></span>001 1023 567
<span class="fa fa-envelope-o"></span> <a href="#">[email protected]</a>
</div>
</form>
</body>
</html>