11+ JavaScript Form Examples

This post contains a total of 11+ JavaScript Form Examples with Source Code. All these Forms ( Login, Checkout, Responsive, Animated , Credit Card, Simple, Interactive ) are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Form Examples

1. By Tim

Made by Tim. Contact Form with Success Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  padding-top:25px;
  background-color:#454545;
  margin-left:10px;
  margin-right:10px;
}
.container {
  max-width:600px;
  margin:0 auto;
  text-align:center;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  background-color:#FAFAFA;
}
.head {
  -webkit-border-radius:6px 6px 0px 0px;
  -moz-border-radius:6px 6px 0px 0px;
  border-radius:6px 6px 0px 0px;
  background-color:#2ABCA7;
  color:#FAFAFA;
}
h2 {
  text-align:center;
  padding:18px 0 18px 0;
  font-size: 1.4em;
}
input {
  margin-bottom:10px;
}
textarea {
  height:100px;
  margin-bottom:10px;
}
input:first-of-type
{
  margin-top:35px;
}
input, textarea {
  font-size: 1em;
  padding: 15px 10px 10px;
  font-family: 'Source Sans Pro',arial,sans-serif;
  border: 1px solid #cecece;
  background: #d7d7d7;
  color:#FAFAFA;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80%;
  max-width: 600px;
}
::-webkit-input-placeholder {
   color: #FAFAFA;
}
:-moz-placeholder {
   color: #FAFAFA;  
}
::-moz-placeholder {
   color: #FAFAFA; 
}
:-ms-input-placeholder {  
   color: #FAFAFA;  
}
button {
  margin-top:15px;
  margin-bottom:25px;
  background-color:#2ABCA7;
  padding: 12px 45px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #2ABCA7;
  -webkit-transition: .5s;
  transition: .5s;
  display: inline-block;
  cursor: pointer;
  width:30%;
  color:#fff;
}
button:hover, .button:hover {
  background:#19a08c;
}
label.error {
    font-family:'Source Sans Pro',arial,sans-serif;
    font-size:1em;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#d89c9c;
    width: 80%;
    margin:auto;
    color: #FAFAFA;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
/* media queries */
@media (max-width: 700px) {
  label.error {
    width: 90%;
  }
  input, textarea {
    width: 90%;
  }
  button {
    width:90%;
  }
  body {
  padding-top:10px;
  }  
}
.message {
    font-family:'Source Sans Pro',arial,sans-serif;
    font-size:1.1em;
    display:none;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#2ABCA7;
    width: 80%;
    margin:auto;
    color: #FAFAFA;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
</style>
</head>
<body>
<form id="contact">
  <div class="container">
    <div class="head">
      <h2>Say Hello</h2>
    </div>
    <input type="text" name="name" placeholder="Name" /><br />
    <input  type="email" name="email" placeholder="Email" /><br />
    <textarea type="text" name="message" placeholder="Message"></textarea><br />
    <div class="message">Message Sent</div>
    <button id="submit" type="submit">
      Send!
    </button>
  </div>
</form>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js'></script>
      <script>
// When the browser is ready...
$(function () {
  // validate
  $("#contact").validate({
    // Set the validation rules
    rules: {
      name: "required",
      email: {
        required: true,
        email: true },

      message: "required" },

    // Specify the validation error messages
    messages: {
      name: "Please enter your name",
      email: "Please enter a valid email address",
      message: "Please enter a message" },

    // submit handler
    submitHandler: function (form) {
      //form.submit();
      $(".message").show();
      $(".message").fadeOut(4500);
    } });

});
    </script>
</body>
</html>

2. By Muhammad Musa

Made by Muhammad Musa. Credit Card Checkout Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://kit.fontawesome.com/e04ccf61b7.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700|Nova+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap');

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	background-color: #00b7ff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
}

.modal-wrapper {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	width: 80vw;
	background-color: #edeef2;
	border-radius: 20px;
	box-shadow: 0 0 10px -5px #2d2d2d;
	padding: 1rem;
	box-sizing: border-box;
}

.card-image {
	font-family: 'Nova Mono', monospace;
	position: relative;
	width: 100%;
	max-width: 300px;
	min-height: 160px;
	max-height: 190px;
	margin-bottom: 1rem;
	z-index: 0;
}

.card-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 300px;
	box-shadow: 0px 10px 10px -10px black;
}

.card-logo {
	position: absolute;
	right: 0.5rem;
	display: flex;
	width: 50px;
	height: 30px;
}

.card-front .card-logo {
	top: 0.5rem;
}

.card-rear .card-logo {
	bottom: 1rem;
}

.logo-circle {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.logo-circle.left {
	background-color: #eb001b;
}

.logo-circle.right {
	background-color: #f79e1b;
	opacity: 0.8;
	margin-left: -10px;
}

.card-front,
.card-rear {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: #edeef2;
	font-size: 14px;
	letter-spacing: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}

.card-front .card-number {
	z-index: 2;
}

.card-front .card-info {
	display: flex;
	flex-flow: column wrap;
	font-size: 12px;
}

.card-front .card-info.left {
	text-align: left;
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
}

.card-front .card-info.right {
	text-align: right;
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
}

.card-front .card-holder-title,
.card-front .valid-thru-title {
	font-size: 10px;
	margin-bottom: 5px;
}

.card-rear .black-bar {
	position: absolute;
	left: 0px;
	top: 10%;
	width: 100%;
	height: 30px;
	background-color: black;
}

.card-rear .card-info {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding-left: 5%;
	z-index: 2;
}

.card-rear .card-info .white-bar {
	width: 50%;
	height: 30px;
	background-color: #757575;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffff' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffff' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
}

.card-rear .card-info .security-code {
	background: white;
	color: #2d2d2d;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 0 10px;
}

/* TRANSITION EFFECT */
.card-front {
	transform: perspective(600px) rotateY(0deg);
}
.card-rear {
	transform: perspective(600px) rotateY(180deg);
}

.active-border {
	display: none;
	position: fixed;
	border: 1px solid #f79e1b;
	border-radius: 5px;
	padding: 3px;
	transition: left ease-in-out 0.5s, top ease-in-out 0.5s,
		width ease-in-out 0.5s, height ease-in-out 0.5s;
}

.card-form {
	font-family: 'IBM Plex Sans', sans-serif;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

form {
	text-align: center;
}

.form-input {
	position: relative;
	margin: 10px auto 5px auto;
}

.form-input input {
	outline: none;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 10px 5px 10px 40px;
	border-bottom: 2px solid #757575;
	transition: all linear 0.2s;
}

.form-input input:focus {
	box-shadow: inset 0 0 50px 50px #e1e3ea;
	border: 0;
	border-bottom: 2px solid black;
	border-radius: 10px 10px 0 0;
}

.form-input i {
	color: #2d2d2d;
	position: absolute;
	top: 10px;
	left: 15px;
	font-size: 12px;
}

.btn {
	background: #642b73;
	background: -webkit-linear-gradient(to right, #c6426e, #642b73);
	background: linear-gradient(to right, #c6426e, #642b73);
	border-radius: 20px;
	text-align: center;
	padding: 10px 30px;
	box-sizing: border-box;
	display: inline-block;
	transition: box-shadow ease-in-out 0.2s;
	cursor: pointer;
}

.btn:hover {
	box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
}

.btn button {
	outline: none;
	border: none;
	font-size: 14px;
	background: transparent;
	color: white;
	padding: 0;
}

.btn i {
	position: relative;
	top: 0;
	left: 0;
	color: white;
	font-size: 14px;
}

@media screen and (min-width: 500px) {
	.modal-wrapper {
		width: 70vw;
	}
}

@media screen and (min-width: 768px) {
	.modal-wrapper {
		width: 80vw;
		flex-flow: row nowrap;
		justify-content: space-evenly;
	}
}

@media screen and (min-width: 900px) {
	.modal-wrapper {
		width: 70vw;
	}
}

@media screen and (min-width: 1200px) {
	.modal-wrapper {
		width: 50vw;
	}
}
</style>
</head>
<body>
  <div class="modal-wrapper">
    <div class="card-image">
      <div class="card-front">
        <img class="card-background" src="https://raw.githubusercontent.com/MoosaSaadat/card-checkout/master/card.png" alt="Credit Card">
        <div class="card-logo">
          <div class="logo-circle left"></div>
          <div class="logo-circle right"></div>
        </div>
        <span class="card-number">XXXX XXXX XXXX XXXX</span>
        <div class="card-info left">
          <span class="card-holder-title">CARDHOLDER NAME</span>
          <span class="card-holder-name">NAME SURNAME</span>
        </div>
        <div class="card-info right">
          <span class="valid-thru-title">VALID THRU</span>
          <span class="valid-thru-date">MM/YY</span>
        </div>
      </div>
      <div class="card-rear">
        <img class="card-background" src="https://raw.githubusercontent.com/MoosaSaadat/card-checkout/master/card.png" alt="Credit Card">
        <div class="card-logo">
          <div class="logo-circle left"></div>
          <div class="logo-circle right"></div>
        </div>
        <div class="black-bar"></div>
        <div class="card-info">
          <span class="white-bar"></span>
          <span class="security-code">123</span>
        </div>
      </div>
      <span class="active-border"></span>
    </div>
    <div class="card-form">
        <div class="form-wrapper">
          <form action="#">
            <div class="form-input">
              <i class="far fa-credit-card"></i>
              <input type="text" name="card-number" id="#number" placeholder="Card Number" onfocus="flipCard(event);" onblur="deactivateBorder(event)" onkeyup="traceNumberInput(event)" value="">
            </div>
            <div class="form-input">
              <i class="fas fa-user"></i>
              <input type="text" name="card-holder-name" id="#name" placeholder="Card Holder Name" onfocus="flipCard(event);" onblur="deactivateBorder(event)" onkeyup="traceNameInput(event)" value="">
            </div>
            <div class="form-input">
              <i class="fas fa-calendar-day"></i>
              <input type="text" name="valid-thru-date" id="#expiry" placeholder="Expiry Date" onfocus="flipCard(event);" onblur="deactivateBorder(event)" onkeyup="traceDateInput(event)" value="">
            </div>
            <div class="form-input">
              <i class="fas fa-lock"></i>
              <input type="number" name="security-code" id="#code" placeholder="Security Code" onfocus="flipCard(event);" onblur="deactivateBorder(event)" onkeyup="traceCodeInput(event)" value="">
            </div>
            <div class="form-input btn">
              <i class="fas fa-check"></i>
              <button type="submit">Done</button>
            </div>
          </form>
        </div>
    </div>
  </div>
      <script>
var isFront = true;
var cardContainer = document.querySelector(".card-image");
var creditCard = document.querySelector(".card-background");
var cardFront = document.querySelector(".card-front");
var cardRear = document.querySelector(".card-rear");
var cardLogo = document.querySelector(".card-logo");

function flipCard(e) {
  if (isFront && e.target.name == "security-code" || !isFront && e.target.name != "security-code") {
    setTimeout(() => {activateBorder(e);}, 500);
    if (isFront) {
      cardFront.style.transform = "perspective( 600px ) rotateY( -180deg )";
      cardRear.style.transform = "perspective( 600px ) rotateY( 0deg )";
    } else
    {
      cardFront.style.transform = "perspective( 600px ) rotateY( 0deg )";
      cardRear.style.transform = "perspective( 600px ) rotateY( 180deg )";
    }
    isFront = !isFront;
  } else
  activateBorder(e);
}
function activateBorder(e) {
  let borderBox = document.querySelector(".active-border");
  let focusedInput = document.querySelector(`.${e.target.name}`);
  let newRect = focusedInput.getBoundingClientRect();
  let removePadding = 4; //PADDING+BORDER OF .active-border

  borderBox.style.display = "inline-block";
  borderBox.style.opacity = "1";
  borderBox.style.height = newRect.height + "px";
  borderBox.style.width = newRect.width + "px";
  borderBox.style.top = newRect.top - removePadding + "px";
  borderBox.style.left = newRect.left - removePadding + "px";
}
function deactivateBorder(e) {
  let borderBox = document.querySelector(".active-border");
  borderBox.style.opacity = "0";
}
function traceNumberInput(e) {
  let focusedInput = document.querySelector(`.${e.target.name}`);
  let newString = "";
  let spaceCounter = [4, 9, 14];
  let initString = "XXXX XXXX XXXX XXXX";
  if (spaceCounter.some(val => e.target.value.length == val))
  e.target.value += " ";
  if (e.target.value.length <= 19) {
    let userInput = e.target.value;
    for (let i = 0; i < 19; i++) {if (window.CP.shouldStopExecution(0)) break;
      if (i < userInput.length) {
        newString += userInput[i];
      } else
      {
        newString += initString[i];
      }
    }window.CP.exitedLoop(0);
    focusedInput.innerHTML = newString;
  } else
  {
    e.target.value = e.target.value.substr(0, 19);
  }
}
function traceNameInput(e) {
  if (e.target.value.length > 11) activateBorder(e);

  let focusedInput = document.querySelector(`.${e.target.name}`);
  if (e.target.value == "") focusedInput.innerHTML = "NAME SURNAME";else
  focusedInput.innerHTML = e.target.value.toUpperCase();
}
function traceDateInput(e) {
  let focusedInput = document.querySelector(`.${e.target.name}`);
  let newString = "";
  let initString = "MM/YY";
  if (e.target.value.length == 2) e.target.value = e.target.value + "/";
  if (e.target.value.length < 6) {
    for (let i = 0; i < 5; i++) {if (window.CP.shouldStopExecution(1)) break;
      if (i < e.target.value.length)
      newString += e.target.value[i];else

      newString += initString[i];
    }window.CP.exitedLoop(1);
    focusedInput.innerHTML = newString;
  } else
  {
    e.target.value = e.target.value.substr(0, 5);
  }
}
function traceCodeInput(e) {
  let focusedInput = document.querySelector(`.${e.target.name}`);
  if (e.target.value.length <= 3) {
    if (e.target.value == "") focusedInput.innerHTML = "123";else
    focusedInput.innerHTML = e.target.value;
  } else
  {
    e.target.value = e.target.value.substr(0, 3);
  }
}
function getImageSize() {
  var img = document.querySelector('.card-background');
  cardContainer.style.height = img.clientHeight + "px";
  cardContainer.style.width = img.clientWidth + "px";
}
    </script>
</body>
</html>

3. By Leon Gaban

Made by Leon Gaban. Login / Register Form with Tab Switching Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  font-family: Arial, sans-serif;
}

.container ul li {
  float: left;
  list-style: none;
}
.container .login-container {
  width: 100%;
  padding-bottom: 40px;
  /*login-box*/
}
.container .login-container .login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  margin: -250px 0 0 -200px;
  /*login-form*/
}
.container .login-container .login-box .login-logo {
  padding: 0 0 20px 110px;
  border-bottom: 8px solid #f58733;
}
.container .login-container .login-box #login-form, .container .login-container .login-box #register-form {
  /*width: 100%;*/
  width: 400px;
  /*height: 290px;*/
  /*background: white;*/
  /* ICONS */
  /* TIPS */
}
.container .login-container .login-box #login-form #tab-login, .container .login-container .login-box #register-form #tab-login {
  padding: 7px 0 0 20px;
  color: #f58733;
}
.container .login-container .login-box #login-form #tab-register, .container .login-container .login-box #register-form #tab-register {
  padding: 8px 20px 0 0;
  text-align: right;
  color: #999;
  background: #fafafa;
  cursor: pointer;
}
.container .login-container .login-box #login-form #tab-register:hover, .container .login-container .login-box #register-form #tab-register:hover {
  color: #454a4a;
}
.container .login-container .login-box #login-form ul li, .container .login-container .login-box #register-form ul li {
  float: left;
  width: 100px;
  height: 40px;
  font-size: 1.250em;
  line-height: 1.60em;
}
.container .login-container .login-box #login-form .input-box, .container .login-container .login-box #register-form .input-box {
  height: 100%;
  margin-top: 40px;
  background: red;
}
.container .login-container .login-box #login-form input, .container .login-container .login-box #register-form input {
  margin: 0 40px;
  padding-left: 20px;
  width: 300px;
  height: 42px;
  font-size: 1.250em;
  color: #b1b3b3;
  border: 2px solid #e8e8e8;
  margin-bottom: 15px;
}
.container .login-container .login-box #login-form input:focus, .container .login-container .login-box #register-form input:focus {
  outline: 2px solid #b5b5b5;
}
.container .login-container .login-box #login-form input:-moz-focus, .container .login-container .login-box #register-form input:-moz-focus {
  outline: 2px solid #b5b5b5;
}
.container .login-container .login-box #login-form #login-username, .container .login-container .login-box #login-form #register-email, .container .login-container .login-box #register-form #login-username, .container .login-container .login-box #register-form #register-email {
  margin-top: 40px;
  /*margin-bottom: -4px !important;*/
}
.container .login-container .login-box #login-form a, .container .login-container .login-box #register-form a {
  float: left;
  font-size: 0.750em;
  line-height: 3em;
  color: #454a4a;
  text-indent: 40px;
  text-decoration: none;
}
.container .login-container .login-box #login-form a:hover, .container .login-container .login-box #register-form a:hover {
  text-decoration: underline;
}
.container .login-container .login-box #login-form button, .container .login-container .login-box #register-form button {
  float: right;
  margin: 0 35px 20px 0;
  padding: 10px 20px;
  font-size: 1.125em;
  color: white;
  border: none;
  text-shadow: 0 -1px 0 #f58733, 15%;
  background: #f58733;
  cursor: pointer;
}
.container .login-container .login-box #login-form button:hover, .container .login-container .login-box #register-form button:hover {
  text-shadow: 0 -1px 0 #d1600a;
  background: #f6954b;
}
.container .login-container .login-box #login-form .tab-bot-border, .container .login-container .login-box #register-form .tab-bot-border {
  border-bottom: 1px solid #f0f0f0;
}
.container .login-container .login-box #login-form .email-tip-icon, .container .login-container .login-box #login-form .password-tip-icon, .container .login-container .login-box #register-form .email-tip-icon, .container .login-container .login-box #register-form .password-tip-icon {
  z-index: 2;
  clear: both;
}
.container .login-container .login-box #login-form .email-tip-icon, .container .login-container .login-box #register-form .email-tip-icon {
  position: absolute;
  top: 120px;
  left: 340px;
  z-index: 2;
}
.container .login-container .login-box #login-form .password-tip-icon, .container .login-container .login-box #register-form .password-tip-icon {
  position: absolute;
  top: 308px;
  left: 340px;
}
.container .login-container .login-box #login-form .tip-message, .container .login-container .login-box #register-form .tip-message {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 120px;
  left: 374px;
  width: auto;
  height: auto;
  text-indent: 10px;
  background: blue;
  background: url(http://leongaban.com/_projects/whoat/_HTML/img/gray-tip-triangle.png) no-repeat;
  z-index: 2;
}
.container .login-container .login-box #login-form .tip-message span, .container .login-container .login-box #register-form .tip-message span {
  padding: 8px 10px;
  color: white;
  background: #444444;
}
.container .login-container .login-box #login-form #message-email, .container .login-container .login-box #register-form #message-email {
  display: none;
  position: absolute;
  width: 100%;
  top: 122px;
  left: 365px;
}
.container .login-container .login-box #login-form #message-password, .container .login-container .login-box #register-form #message-password {
  display: none;
  position: absolute;
  width: 100%;
  top: 315px;
  left: 365px;
}
.container .login-container .login-box #login-form {
  display: none;
}
.container .login-container .login-box .form-background {
  position: relative;
  top: -342px;
  height: 410px;
  background: white;
  -webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  z-index: -1;
}
.container .login-container .login-box #register-form {
  display: block;
}
.container .login-container .login-box #register-form #tab-login {
  padding: 8px 0 0 20px;
  color: #f58733;
  color: #999;
  background: #fafafa;
  cursor: pointer;
}
.container .login-container .login-box #register-form #tab-login:hover {
  color: #454a4a;
}
.container .login-container .login-box #register-form #tab-register {
  padding: 7px 20px 0 0;
  color: #f58733;
  background: white;
  cursor: auto;
}
.container .login-container .login-box #register-form #tab-register:hover {
  color: #f58733;
}
.container .login-container .login-box #register-form #register-firstname {
}
</style>
</head>
<body>
  <div class="container">

		<div class="login-container">

			<div class="login-box">


				<!-- LOGIN -->
				<div id="login-form">
					<ul>
						<li id="tab-login" class="tab-bot-border">Login</li>
						<li id="tab-register">Register</li>
					</ul>

					<input type="text" id="login-username" name="username" value="username">
					<input type="password" id="login-password" name="password" value="password">

					<a href="#">Forgot your password?</a>

					<button type="button">login</button>

				</div>

				<!-- REGISTER -->
				<div id="register-form">
					
					<ul>
						<li id="tab-login">Login</li>
						<li id="tab-register" class="tab-bot-border">Register</li>
					</ul>

					<!-- EMAIL -->
					<input type="email" id="register-email" name="email" onblur="if (this.value == '') {this.value = 'email';}" onfocus="if (this.value == 'email') {this.value = '';}" maxlength="28" value="email"/>

						<div class="email-tip-icon"><img src="http://leongaban.com/_projects/whoat/_HTML/img/question-icon.png" alt="?"/></div>
						<div class="tip-message" id="message-email"><span>We recommend a valid work email</span></div>

					<!-- FIRST NAME -->
					<input type="text" id="register-firstname" name="firstname" onblur="if (this.value == '') {this.value = 'firstname';}" onfocus="if (this.value == 'firstname') {this.value = '';}" value="firstname"/>

					<!-- LAST NAME -->
					<input type="text" id="register-lastname" name="lastname" onblur="if (this.value == '') {this.value = 'lastname';}" onfocus="if (this.value == 'lastname') {this.value = '';}" value="lastname"/>

					<!-- PASSWORD -->
					<input type="password" id="register-password" name="password" value="password">

						<div class="password-tip-icon"><img src="http://leongaban.com/_projects/whoat/_HTML/img/question-icon.png" alt="?"/></div>
						<div class="tip-message" id="message-password"><span>Minimum 6 Characters</span></div>
	
					<button type="button">login</button>

				</div><!-- register-form -->

				<div class="form-background"></div>

			</div><!-- login-form -->

	    </div><!-- login-container -->

    </div><!-- container -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('#login-form #tab-register').click(function () {

  $('#login-form').fadeToggle();
  $(".form-background").animate(
  {
    "top": "-342px",
    "width": "400px",
    "height": "410px" },

  "slow", function () {
    $('#register-form').fadeToggle();
  });
});

$('#register-form #tab-login').click(function () {

  $('#register-form').fadeToggle();
  $(".form-background").animate(
  {
    "top": "-214px",
    "width": "400px",
    "height": "290px" },

  "slow", function () {
    $('#login-form').fadeToggle();
  });
});

// Tips
$('#register-form .email-tip-icon').hover(function () {
  $('#message-email').fadeToggle();
});

$('#register-form .password-tip-icon').hover(function () {
  $('#message-password').fadeToggle();
});
    </script>
</body>
</html>

4. By Bridges

Made by Bridges. Login form with success message. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Assistant:400,700" rel="stylesheet">
<style>
body {
  background: #ABCDEF;
  font-family: Assistant, sans-serif;
  display: flex;
  min-height: 90vh;
}
.login {
  color: white;
  background: background: #136a8a;
  background: 
    -webkit-linear-gradient(to right, #267871, #136a8a);
  background: 
    linear-gradient(to right, #267871, #136a8a);
  margin: auto;
  box-shadow: 
    0px 2px 10px rgba(0,0,0,0.2), 
    0px 10px 20px rgba(0,0,0,0.3), 
    0px 30px 60px 1px rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 50px;
}
.login .head {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login .head .company {
  font-size: 2.2em;
}
.login .msg {
  text-align: center;
}
.login .form input[type=text].text {
  border: none;
  background: none;
  box-shadow: 0px 2px 0px 0px white;
  width: 100%;
  color: white;
  font-size: 1em;
  outline: none;
}
.login .form .text::placeholder {
  color: #D3D3D3;
}
.login .form input[type=password].password {
  border: none;
  background: none;
  box-shadow: 0px 2px 0px 0px white;
  width: 100%;
  color: white;
  font-size: 1em;
  outline: none;
  margin-bottom: 20px;
  margin-top: 20px;
}
.login .form .password::placeholder {
  color: #D3D3D3;
}
.login .form .btn-login {
  background: none;
  text-decoration: none;
  color: white;
  box-shadow: 0px 0px 0px 2px white;
  border-radius: 3px;
  padding: 5px 2em;
  transition: 0.5s;
}
.login .form .btn-login:hover {
  background: white;
  color: dimgray;
  transition: 0.5s;
}
.login .forgot {
  text-decoration: none;
  color: white;
  float: right;
}
footer {
  position: absolute;
  color: #136a8a;
  bottom: 10px;
  padding-left: 20px;
}
footer p {
  display: inline;
}
footer a {
  color: green;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer .heart {
  color: #B22222;
  font-size: 1.5em
}
</style>
</head>
<body>
  <section class='login' id='login'>
  <div class='head'>
  <img src="https://mateuspntx.github.io/templates/login-page/i/telescope.png">
  <h1 class='company'>Universe Explorer</h1>
  </div>
  <p class='msg'>Welcome back</p>
  <div class='form'>
    <form>
  <input type="text" placeholder='Username' class='text' id='username' required><br>
  <input type="password" placeholder='β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’' class='password'><br>
  <a href="#" class='btn-login' id='do-login'>Login</a>
  <a href="#" class='forgot'>Forgot?</a>
    </form>
  </div>
</section>
      <script>
var btnLogin = document.getElementById('do-login');
var idLogin = document.getElementById('login');
var username = document.getElementById('username');
btnLogin.onclick = function () {
  idLogin.innerHTML = '<p>We\'re happy to see you again, </p><h1>' + username.value + '</h1>';
};
    </script>
</body>
</html>

5. By Aakash

Made by Aakash. Simple Contact Form. Source

JavaScript Contact form by Aakash
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #EAEDF1;
  font-family: verdana;
}

section {
  max-width: 25em;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  position: relative;
}

h1 {
  display: block;
  text-align: center;
  background: #323A45;
  color: white;
  margin: 0;
  padding: 0.75em 0;
  font-weight: normal;
  border-radius: 5px 5px 0 0;
}

form {
  border-radius: 0 0 5px 5px;
  border: 1px solid #ccc;
  border-top: none;
  background: #fff;
}

ul li:not(:last-child) {
  display: block;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1em;
}

label {
  display: block;
  font-size: .8125em;
  /* 13/16 */
  position: absolute;
  top: 1.6em;
  left: 1.4em;
  color: #f1773b;
  opacity: 1;
  transition: top 0.4s ease, opacity 0.6s ease , color 0.4s ease;
}

input, textarea {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background-color:#fff;
  padding: 2.25em 1em 1em;
  font-size: 1.2em;
}

textarea {
  height: 16em;
  resize: none;
  font-size: 1.2em;
  font-family: verdana;
  padding-left: 0.85em;
}

input[type="submit"] {
  display: block;
  background: #f1773b;
  padding: 1em;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
}

.js-hide-label label {
  opacity: 0;
  top: 1.8em;
}

.js-unhighlight-label label {
  color: #333;
}

.js-highlight-label label {
  color: #f1773b;
}
</style>
</head>
<body>
  <section class="container">
    <h1 class="title">Contact Me</h1>
    <form id="form" class="form" action="#" method="get">
        <ul>
            <li>
                <label for="name">Your Name:</label>
                <input type="text" placeholder="Your Name" id="name" name="name" tabindex="1"/>
            </li>
            <li>
                <label for="email">Your Email:</label>
                <input type="email" placeholder="Your Email" id="email" name="email" tabindex="2"/>
            </li>
            <li>
                <label for="message">Message:</label>
                <textarea placeholder="Message…" id="message" name="message" tabindex="3"></textarea>
            </li>
        </ul>
        <input type="submit" value="Send Message" id="submit"/>
    </form>
</section>
</body>
</html>

6. By Ricardo Oliva Alonso

Made by Ricardo Oliva Alonso. Neumorphism Login Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

/* Generic */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  background-color: #ecf0f3;
  color: #a0a5a8;
}

/**/
.main {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 1200px) {
  .main {
    transform: scale(0.7);
  }
}
@media (max-width: 1000px) {
  .main {
    transform: scale(0.6);
  }
}
@media (max-width: 800px) {
  .main {
    transform: scale(0.5);
  }
}
@media (max-width: 600px) {
  .main {
    transform: scale(0.4);
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 600px;
  height: 100%;
  padding: 25px;
  background-color: #ecf0f3;
  transition: 1.25s;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.form__icon {
  object-fit: contain;
  width: 30px;
  margin: 0 5px;
  opacity: 0.5;
  transition: 0.15s;
}
.form__icon:hover {
  opacity: 1;
  transition: 0.15s;
  cursor: pointer;
}
.form__input {
  width: 350px;
  height: 40px;
  margin: 4px 0;
  padding-left: 25px;
  font-size: 13px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: "Montserrat", sans-serif;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}
.form__input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.form__span {
  margin-top: 30px;
  margin-bottom: 12px;
}
.form__link {
  color: #181818;
  font-size: 15px;
  margin-top: 25px;
  border-bottom: 1px solid #a0a5a8;
  line-height: 2;
}

.title {
  font-size: 34px;
  font-weight: 700;
  line-height: 3;
  color: #181818;
}

.description {
  font-size: 14px;
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.6;
}

.button {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.15px;
  background-color: #4B70E2;
  color: #f9f9f9;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  border: none;
  outline: none;
}

/**/
.a-container {
  z-index: 100;
  left: calc(100% - 600px );
}

.b-container {
  left: calc(100% - 600px );
  z-index: 0;
}

.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 400px;
  padding: 50px;
  z-index: 200;
  transition: 1.25s;
  background-color: #ecf0f3;
  overflow: hidden;
  box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
}
.switch__circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #ecf0f3;
  box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
  bottom: -60%;
  left: -60%;
  transition: 1.25s;
}
.switch__circle--t {
  top: -30%;
  left: 60%;
  width: 300px;
  height: 300px;
}
.switch__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  width: 400px;
  padding: 50px 55px;
  transition: 1.25s;
}
.switch__button {
  cursor: pointer;
}
.switch__button:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}
.switch__button:active, .switch__button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.25s;
}

/**/
.is-txr {
  left: calc(100% - 400px );
  transition: 1.25s;
  transform-origin: left;
}

.is-txl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}

.is-z200 {
  z-index: 200;
  transition: 1.25s;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: 1.25s;
}

.is-gx {
  animation: is-gx 1.25s;
}

@keyframes is-gx {
  0%, 10%, 100% {
    width: 400px;
  }
  30%, 50% {
    width: 500px;
  }
}
</style>
</head>
<body>
    <div class="main">
      <div class="container a-container" id="a-container">
        <form class="form" id="a-form" method="" action="">
          <h2 class="form_title title">Create Account</h2>
          <div class="form__icons"><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iRmFjZWJvb2siPjxwYXRoIGQ9Ik0yNSw1MCBDMzguODA3MTE5NCw1MCA1MCwzOC44MDcxMTk0IDUwLDI1IEM1MCwxMS4xOTI4ODA2IDM4LjgwNzExOTQsMCAyNSwwIEMxMS4xOTI4ODA2LDAgMCwxMS4xOTI4ODA2IDAsMjUgQzAsMzguODA3MTE5NCAxMS4xOTI4ODA2LDUwIDI1LDUwIFogTTI1LDQ3IEMzNy4xNTAyNjUxLDQ3IDQ3LDM3LjE1MDI2NTEgNDcsMjUgQzQ3LDEyLjg0OTczNDkgMzcuMTUwMjY1MSwzIDI1LDMgQzEyLjg0OTczNDksMyAzLDEyLjg0OTczNDkgMywyNSBDMywzNy4xNTAyNjUxIDEyLjg0OTczNDksNDcgMjUsNDcgWiBNMjYuODE0NTE5NywzNiBMMjYuODE0NTE5NywyNC45OTg3MTIgTDMwLjA2ODc0NDksMjQuOTk4NzEyIEwzMC41LDIxLjIwNzYwNzIgTDI2LjgxNDUxOTcsMjEuMjA3NjA3MiBMMjYuODIwMDQ4NiwxOS4zMTAxMjI3IEMyNi44MjAwNDg2LDE4LjMyMTM0NDIgMjYuOTIwNzIwOSwxNy43OTE1MzQxIDI4LjQ0MjU1MzgsMTcuNzkxNTM0MSBMMzAuNDc2OTYyOSwxNy43OTE1MzQxIEwzMC40NzY5NjI5LDE0IEwyNy4yMjIyNzY5LDE0IEMyMy4zMTI4NzU3LDE0IDIxLjkzNjg2NzgsMTUuODM5MDkzNyAyMS45MzY4Njc4LDE4LjkzMTg3MDkgTDIxLjkzNjg2NzgsMjEuMjA4MDM2NiBMMTkuNSwyMS4yMDgwMzY2IEwxOS41LDI0Ljk5OTE0MTMgTDIxLjkzNjg2NzgsMjQuOTk5MTQxMyBMMjEuOTM2ODY3OCwzNiBMMjYuODE0NTE5NywzNiBaIE0yNi44MTQ1MTk3LDM2IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4=" alt=""><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iTGlua2VkSW4iPjxwYXRoIGQ9Ik0yNSw1MCBDMzguODA3MTE5NCw1MCA1MCwzOC44MDcxMTk0IDUwLDI1IEM1MCwxMS4xOTI4ODA2IDM4LjgwNzExOTQsMCAyNSwwIEMxMS4xOTI4ODA2LDAgMCwxMS4xOTI4ODA2IDAsMjUgQzAsMzguODA3MTE5NCAxMS4xOTI4ODA2LDUwIDI1LDUwIFogTTI1LDQ3IEMzNy4xNTAyNjUxLDQ3IDQ3LDM3LjE1MDI2NTEgNDcsMjUgQzQ3LDEyLjg0OTczNDkgMzcuMTUwMjY1MSwzIDI1LDMgQzEyLjg0OTczNDksMyAzLDEyLjg0OTczNDkgMywyNSBDMywzNy4xNTAyNjUxIDEyLjg0OTczNDksNDcgMjUsNDcgWiBNMTQsMjAuMTE4MDQ3OSBMMTQsMzQuNjU4MTgzNCBMMTguNzEwMDg1MSwzNC42NTgxODM0IEwxOC43MTAwODUxLDIwLjExODA0NzkgTDE0LDIwLjExODA0NzkgWiBNMTYuNjY0Njk2MiwxMyBDMTUuMDUzNDA1OCwxMyAxNCwxNC4wODU4NjExIDE0LDE1LjUxMTUxMjIgQzE0LDE2LjkwNzYzMzEgMTUuMDIyMjcxMSwxOC4wMjQ3NjE0IDE2LjYwMzU1NTYsMTguMDI0NzYxNCBMMTYuNjMzNjU1NiwxOC4wMjQ3NjE0IEMxOC4yNzU5ODY3LDE4LjAyNDc2MTQgMTkuMjk4ODIyMiwxNi45MDc2MzMxIDE5LjI5ODgyMjIsMTUuNTExNTEyMiBDMTkuMjY4MjUxOSwxNC4wODU4NjExIDE4LjI3NTk4NjcsMTMgMTYuNjY0Njk2MiwxMyBaIE0zMC41NzY5MjEzLDIwLjExODA0NzkgQzI4LjA3NjE3NiwyMC4xMTgwNDc5IDI2Ljk1NjU1MDEsMjEuNTI5MzE5OSAyNi4zMzE0MTA4LDIyLjUxOTM1MjcgTDI2LjMzMTQxMDgsMjAuNDU5ODY0NCBMMjEuNjIwNzYxNCwyMC40NTk4NjQ0IEMyMS42ODI4NDI3LDIxLjgyNDIzNTYgMjEuNjIwNzYxNCwzNSAyMS42MjA3NjE0LDM1IEwyNi4zMzE0MTA4LDM1IEwyNi4zMzE0MTA4LDI2Ljg3OTU4ODcgQzI2LjMzMTQxMDgsMjYuNDQ1MDMyIDI2LjM2MTk4MTIsMjYuMDExNTM2OCAyNi40ODY1MTk5LDI1LjcwMDQwODQgQzI2LjgyNjkzMiwyNC44MzIyNiAyNy42MDIwMDY5LDIzLjkzMzQyMzMgMjguOTAzMjY3NCwyMy45MzM0MjMzIEMzMC42MDgzMzgxLDIzLjkzMzQyMzMgMzEuMjg5OTE0OSwyNS4yNjY3MjAyIDMxLjI4OTkxNDksMjcuMjIwNjMzMyBMMzEuMjg5OTE0OSwzNC45OTk2MTQgTDM1Ljk5OTgxMTksMzQuOTk5NjE0IEwzNiwyNi42NjI3NDQ2IEMzNiwyMi4xOTY2NDM5IDMzLjY3NjM3NDMsMjAuMTE4MDQ3OSAzMC41NzY5MjEzLDIwLjExODA0NzkgWiBNMzAuNTc2OTIxMywyMC4xMTgwNDc5IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4="><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iVHdpdHRlciI+PHBhdGggZD0iTTI1LDUwIEMzOC44MDcxMTk0LDUwIDUwLDM4LjgwNzExOTQgNTAsMjUgQzUwLDExLjE5Mjg4MDYgMzguODA3MTE5NCwwIDI1LDAgQzExLjE5Mjg4MDYsMCAwLDExLjE5Mjg4MDYgMCwyNSBDMCwzOC44MDcxMTk0IDExLjE5Mjg4MDYsNTAgMjUsNTAgWiBNMjUsNDcgQzM3LjE1MDI2NTEsNDcgNDcsMzcuMTUwMjY1MSA0NywyNSBDNDcsMTIuODQ5NzM0OSAzNy4xNTAyNjUxLDMgMjUsMyBDMTIuODQ5NzM0OSwzIDMsMTIuODQ5NzM0OSAzLDI1IEMzLDM3LjE1MDI2NTEgMTIuODQ5NzM0OSw0NyAyNSw0NyBaIE0yNC42ODIyNTU0LDIwLjU1NDI5NzUgTDI0LjcyOTk0NCwyMS4zNzYxMDExIEwyMy45MzUxMzMzLDIxLjI3NTQ3MjEgQzIxLjA0MjAyMjUsMjAuODg5NzI3NSAxOC41MTQ1MjQ2LDE5LjU4MTU1MDQgMTYuMzY4NTM1OCwxNy4zODQ0ODM3IEwxNS4zMTkzODU3LDE2LjI5NDMzNjEgTDE1LjA0OTE1MDEsMTcuMDk5MzY4MSBDMTQuNDc2ODg2NCwxOC44OTM5MTg4IDE0Ljg0MjQ5OTMsMjAuNzg5MDk4NSAxNi4wMzQ3MTUzLDIyLjA2MzczMjYgQzE2LjY3MDU2MzgsMjIuNzY4MTM1NyAxNi41Mjc0OTc5LDIyLjg2ODc2NDcgMTUuNDMwNjU5MiwyMi40NDk0NzcyIEMxNS4wNDkxNTAxLDIyLjMxNTMwNTEgMTQuNzE1MzI5NiwyMi4yMTQ2NzYxIDE0LjY4MzUzNzEsMjIuMjY0OTkwNyBDMTQuNTcyMjYzNywyMi4zODIzOTEyIDE0Ljk1Mzc3MjgsMjMuOTA4NTk3OCAxNS4yNTU4MDA4LDI0LjUxMjM3MTkgQzE1LjY2OTEwMjQsMjUuMzUwOTQ3IDE2LjUxMTYwMTcsMjYuMTcyNzUwNSAxNy40MzM1ODIsMjYuNjU5MTI0MSBMMTguMjEyNDk2NSwyNy4wNDQ4Njg2IEwxNy4yOTA1MTYxLDI3LjA2MTY0MDEgQzE2LjQwMDMyODIsMjcuMDYxNjQwMSAxNi4zNjg1MzU4LDI3LjA3ODQxMTYgMTYuNDYzOTEzMSwyNy40MzA2MTMxIEMxNi43ODE4Mzc0LDI4LjUyMDc2MDggMTguMDM3NjM4MiwyOS42Nzc5OTQ0IDE5LjQzNjUwNSwzMC4xODExMzk0IEwyMC40MjIwNzAxLDMwLjUzMzM0MSBMMTkuNTYzNjc0NiwzMS4wNzAwMjkgQzE4LjI5MTk3NzYsMzEuODQxNTE4MSAxNi43OTc3MzM1LDMyLjI3NzU3NzIgMTUuMzAzNDg5NSwzMi4zMTExMjAyIEMxNC41ODgxNTk5LDMyLjMyNzg5MTYgMTQsMzIuMzk0OTc3NiAxNCwzMi40NDUyOTIyIEMxNCwzMi42MTMwMDcxIDE1LjkzOTMzOCwzMy41NTIyMTEzIDE3LjA2Nzk2OTIsMzMuOTIxMTg0MyBDMjAuNDUzODYyNiwzNS4wMTEzMzE5IDI0LjQ3NTYwNDYsMzQuNTQxNzI5OCAyNy40OTU4ODUxLDMyLjY4MDA5MzIgQzI5LjY0MTg3MzksMzEuMzU1MTQ0NSAzMS43ODc4NjI4LDI4LjcyMjAxODggMzIuNzg5MzI0MiwyNi4xNzI3NTA1IEMzMy4zMjk3OTU0LDI0LjgxNDI1ODkgMzMuODcwMjY2NywyMi4zMzIwNzY3IDMzLjg3MDI2NjcsMjEuMTQxMyBDMzMuODcwMjY2NywyMC4zNjk4MTEgMzMuOTE3OTU1MywyMC4yNjkxODIgMzQuODA4MTQzMiwxOS4zNDY3NDk0IEMzNS4zMzI3MTgzLDE4LjgxMDA2MTMgMzUuODI1NTAwOSwxOC4yMjMwNTg4IDM1LjkyMDg3ODIsMTguMDU1MzQzNyBDMzYuMDc5ODQwMywxNy43MzY2ODUyIDM2LjA2Mzk0NDIsMTcuNzM2Njg1MiAzNS4yNTMyMzczLDE4LjAyMTgwMDcgQzMzLjkwMjA1OTEsMTguNTI0OTQ1OCAzMy43MTEzMDQ1LDE4LjQ1Nzg1OTggMzQuMzc4OTQ1NSwxNy43MDMxNDIyIEMzNC44NzE3MjgxLDE3LjE2NjQ1NDEgMzUuNDU5ODg4LDE2LjE5MzcwNzEgMzUuNDU5ODg4LDE1LjkwODU5MTUgQzM1LjQ1OTg4OCwxNS44NTgyNzcgMzUuMjIxNDQ0OCwxNS45NDIxMzQ2IDM0Ljk1MTIwOTIsMTYuMDkzMDc4IEMzNC42NjUwNzczLDE2LjI2MDc5MzEgMzQuMDI5MjI4OCwxNi41MTIzNjU2IDMzLjU1MjM0MjQsMTYuNjYzMzA5MSBMMzIuNjkzOTQ2OSwxNi45NDg0MjQ2IEwzMS45MTUwMzI0LDE2LjM5NDk2NSBDMzEuNDg1ODM0NiwxNi4wOTMwNzggMzAuODgxNzc4NiwxNS43NTc2NDggMzAuNTYzODU0MywxNS42NTcwMTkgQzI5Ljc1MzE0NzQsMTUuNDIyMjE4IDI4LjUxMzI0MjgsMTUuNDU1NzYxIDI3Ljc4MjAxNjksMTUuNzI0MTA1IEMyNS43OTQ5OTAzLDE2LjQ3ODgyMjYgMjQuNTM5MTg5NCwxOC40MjQzMTY4IDI0LjY4MjI1NTQsMjAuNTU0Mjk3NSBDMjQuNjgyMjU1NCwyMC41NTQyOTc1IDI0LjUzOTE4OTQsMTguNDI0MzE2OCAyNC42ODIyNTU0LDIwLjU1NDI5NzUgWiBNMjQuNjgyMjU1NCwyMC41NTQyOTc1IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4="></div><span class="form__span">or use email for registration</span>
          <input class="form__input" type="text" placeholder="Name">
          <input class="form__input" type="text" placeholder="Email">
          <input class="form__input" type="password" placeholder="Password">
          <button class="form__button button submit">SIGN UP</button>
        </form>
      </div>
      <div class="container b-container" id="b-container">
        <form class="form" id="b-form" method="" action="">
          <h2 class="form_title title">Sign in to Website</h2>
          <div class="form__icons"><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iRmFjZWJvb2siPjxwYXRoIGQ9Ik0yNSw1MCBDMzguODA3MTE5NCw1MCA1MCwzOC44MDcxMTk0IDUwLDI1IEM1MCwxMS4xOTI4ODA2IDM4LjgwNzExOTQsMCAyNSwwIEMxMS4xOTI4ODA2LDAgMCwxMS4xOTI4ODA2IDAsMjUgQzAsMzguODA3MTE5NCAxMS4xOTI4ODA2LDUwIDI1LDUwIFogTTI1LDQ3IEMzNy4xNTAyNjUxLDQ3IDQ3LDM3LjE1MDI2NTEgNDcsMjUgQzQ3LDEyLjg0OTczNDkgMzcuMTUwMjY1MSwzIDI1LDMgQzEyLjg0OTczNDksMyAzLDEyLjg0OTczNDkgMywyNSBDMywzNy4xNTAyNjUxIDEyLjg0OTczNDksNDcgMjUsNDcgWiBNMjYuODE0NTE5NywzNiBMMjYuODE0NTE5NywyNC45OTg3MTIgTDMwLjA2ODc0NDksMjQuOTk4NzEyIEwzMC41LDIxLjIwNzYwNzIgTDI2LjgxNDUxOTcsMjEuMjA3NjA3MiBMMjYuODIwMDQ4NiwxOS4zMTAxMjI3IEMyNi44MjAwNDg2LDE4LjMyMTM0NDIgMjYuOTIwNzIwOSwxNy43OTE1MzQxIDI4LjQ0MjU1MzgsMTcuNzkxNTM0MSBMMzAuNDc2OTYyOSwxNy43OTE1MzQxIEwzMC40NzY5NjI5LDE0IEwyNy4yMjIyNzY5LDE0IEMyMy4zMTI4NzU3LDE0IDIxLjkzNjg2NzgsMTUuODM5MDkzNyAyMS45MzY4Njc4LDE4LjkzMTg3MDkgTDIxLjkzNjg2NzgsMjEuMjA4MDM2NiBMMTkuNSwyMS4yMDgwMzY2IEwxOS41LDI0Ljk5OTE0MTMgTDIxLjkzNjg2NzgsMjQuOTk5MTQxMyBMMjEuOTM2ODY3OCwzNiBMMjYuODE0NTE5NywzNiBaIE0yNi44MTQ1MTk3LDM2IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4=" alt=""><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iTGlua2VkSW4iPjxwYXRoIGQ9Ik0yNSw1MCBDMzguODA3MTE5NCw1MCA1MCwzOC44MDcxMTk0IDUwLDI1IEM1MCwxMS4xOTI4ODA2IDM4LjgwNzExOTQsMCAyNSwwIEMxMS4xOTI4ODA2LDAgMCwxMS4xOTI4ODA2IDAsMjUgQzAsMzguODA3MTE5NCAxMS4xOTI4ODA2LDUwIDI1LDUwIFogTTI1LDQ3IEMzNy4xNTAyNjUxLDQ3IDQ3LDM3LjE1MDI2NTEgNDcsMjUgQzQ3LDEyLjg0OTczNDkgMzcuMTUwMjY1MSwzIDI1LDMgQzEyLjg0OTczNDksMyAzLDEyLjg0OTczNDkgMywyNSBDMywzNy4xNTAyNjUxIDEyLjg0OTczNDksNDcgMjUsNDcgWiBNMTQsMjAuMTE4MDQ3OSBMMTQsMzQuNjU4MTgzNCBMMTguNzEwMDg1MSwzNC42NTgxODM0IEwxOC43MTAwODUxLDIwLjExODA0NzkgTDE0LDIwLjExODA0NzkgWiBNMTYuNjY0Njk2MiwxMyBDMTUuMDUzNDA1OCwxMyAxNCwxNC4wODU4NjExIDE0LDE1LjUxMTUxMjIgQzE0LDE2LjkwNzYzMzEgMTUuMDIyMjcxMSwxOC4wMjQ3NjE0IDE2LjYwMzU1NTYsMTguMDI0NzYxNCBMMTYuNjMzNjU1NiwxOC4wMjQ3NjE0IEMxOC4yNzU5ODY3LDE4LjAyNDc2MTQgMTkuMjk4ODIyMiwxNi45MDc2MzMxIDE5LjI5ODgyMjIsMTUuNTExNTEyMiBDMTkuMjY4MjUxOSwxNC4wODU4NjExIDE4LjI3NTk4NjcsMTMgMTYuNjY0Njk2MiwxMyBaIE0zMC41NzY5MjEzLDIwLjExODA0NzkgQzI4LjA3NjE3NiwyMC4xMTgwNDc5IDI2Ljk1NjU1MDEsMjEuNTI5MzE5OSAyNi4zMzE0MTA4LDIyLjUxOTM1MjcgTDI2LjMzMTQxMDgsMjAuNDU5ODY0NCBMMjEuNjIwNzYxNCwyMC40NTk4NjQ0IEMyMS42ODI4NDI3LDIxLjgyNDIzNTYgMjEuNjIwNzYxNCwzNSAyMS42MjA3NjE0LDM1IEwyNi4zMzE0MTA4LDM1IEwyNi4zMzE0MTA4LDI2Ljg3OTU4ODcgQzI2LjMzMTQxMDgsMjYuNDQ1MDMyIDI2LjM2MTk4MTIsMjYuMDExNTM2OCAyNi40ODY1MTk5LDI1LjcwMDQwODQgQzI2LjgyNjkzMiwyNC44MzIyNiAyNy42MDIwMDY5LDIzLjkzMzQyMzMgMjguOTAzMjY3NCwyMy45MzM0MjMzIEMzMC42MDgzMzgxLDIzLjkzMzQyMzMgMzEuMjg5OTE0OSwyNS4yNjY3MjAyIDMxLjI4OTkxNDksMjcuMjIwNjMzMyBMMzEuMjg5OTE0OSwzNC45OTk2MTQgTDM1Ljk5OTgxMTksMzQuOTk5NjE0IEwzNiwyNi42NjI3NDQ2IEMzNiwyMi4xOTY2NDM5IDMzLjY3NjM3NDMsMjAuMTE4MDQ3OSAzMC41NzY5MjEzLDIwLjExODA0NzkgWiBNMzAuNTc2OTIxMywyMC4xMTgwNDc5IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4="><img class="form__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjMDAwMDAwIiBpZD0iVHdpdHRlciI+PHBhdGggZD0iTTI1LDUwIEMzOC44MDcxMTk0LDUwIDUwLDM4LjgwNzExOTQgNTAsMjUgQzUwLDExLjE5Mjg4MDYgMzguODA3MTE5NCwwIDI1LDAgQzExLjE5Mjg4MDYsMCAwLDExLjE5Mjg4MDYgMCwyNSBDMCwzOC44MDcxMTk0IDExLjE5Mjg4MDYsNTAgMjUsNTAgWiBNMjUsNDcgQzM3LjE1MDI2NTEsNDcgNDcsMzcuMTUwMjY1MSA0NywyNSBDNDcsMTIuODQ5NzM0OSAzNy4xNTAyNjUxLDMgMjUsMyBDMTIuODQ5NzM0OSwzIDMsMTIuODQ5NzM0OSAzLDI1IEMzLDM3LjE1MDI2NTEgMTIuODQ5NzM0OSw0NyAyNSw0NyBaIE0yNC42ODIyNTU0LDIwLjU1NDI5NzUgTDI0LjcyOTk0NCwyMS4zNzYxMDExIEwyMy45MzUxMzMzLDIxLjI3NTQ3MjEgQzIxLjA0MjAyMjUsMjAuODg5NzI3NSAxOC41MTQ1MjQ2LDE5LjU4MTU1MDQgMTYuMzY4NTM1OCwxNy4zODQ0ODM3IEwxNS4zMTkzODU3LDE2LjI5NDMzNjEgTDE1LjA0OTE1MDEsMTcuMDk5MzY4MSBDMTQuNDc2ODg2NCwxOC44OTM5MTg4IDE0Ljg0MjQ5OTMsMjAuNzg5MDk4NSAxNi4wMzQ3MTUzLDIyLjA2MzczMjYgQzE2LjY3MDU2MzgsMjIuNzY4MTM1NyAxNi41Mjc0OTc5LDIyLjg2ODc2NDcgMTUuNDMwNjU5MiwyMi40NDk0NzcyIEMxNS4wNDkxNTAxLDIyLjMxNTMwNTEgMTQuNzE1MzI5NiwyMi4yMTQ2NzYxIDE0LjY4MzUzNzEsMjIuMjY0OTkwNyBDMTQuNTcyMjYzNywyMi4zODIzOTEyIDE0Ljk1Mzc3MjgsMjMuOTA4NTk3OCAxNS4yNTU4MDA4LDI0LjUxMjM3MTkgQzE1LjY2OTEwMjQsMjUuMzUwOTQ3IDE2LjUxMTYwMTcsMjYuMTcyNzUwNSAxNy40MzM1ODIsMjYuNjU5MTI0MSBMMTguMjEyNDk2NSwyNy4wNDQ4Njg2IEwxNy4yOTA1MTYxLDI3LjA2MTY0MDEgQzE2LjQwMDMyODIsMjcuMDYxNjQwMSAxNi4zNjg1MzU4LDI3LjA3ODQxMTYgMTYuNDYzOTEzMSwyNy40MzA2MTMxIEMxNi43ODE4Mzc0LDI4LjUyMDc2MDggMTguMDM3NjM4MiwyOS42Nzc5OTQ0IDE5LjQzNjUwNSwzMC4xODExMzk0IEwyMC40MjIwNzAxLDMwLjUzMzM0MSBMMTkuNTYzNjc0NiwzMS4wNzAwMjkgQzE4LjI5MTk3NzYsMzEuODQxNTE4MSAxNi43OTc3MzM1LDMyLjI3NzU3NzIgMTUuMzAzNDg5NSwzMi4zMTExMjAyIEMxNC41ODgxNTk5LDMyLjMyNzg5MTYgMTQsMzIuMzk0OTc3NiAxNCwzMi40NDUyOTIyIEMxNCwzMi42MTMwMDcxIDE1LjkzOTMzOCwzMy41NTIyMTEzIDE3LjA2Nzk2OTIsMzMuOTIxMTg0MyBDMjAuNDUzODYyNiwzNS4wMTEzMzE5IDI0LjQ3NTYwNDYsMzQuNTQxNzI5OCAyNy40OTU4ODUxLDMyLjY4MDA5MzIgQzI5LjY0MTg3MzksMzEuMzU1MTQ0NSAzMS43ODc4NjI4LDI4LjcyMjAxODggMzIuNzg5MzI0MiwyNi4xNzI3NTA1IEMzMy4zMjk3OTU0LDI0LjgxNDI1ODkgMzMuODcwMjY2NywyMi4zMzIwNzY3IDMzLjg3MDI2NjcsMjEuMTQxMyBDMzMuODcwMjY2NywyMC4zNjk4MTEgMzMuOTE3OTU1MywyMC4yNjkxODIgMzQuODA4MTQzMiwxOS4zNDY3NDk0IEMzNS4zMzI3MTgzLDE4LjgxMDA2MTMgMzUuODI1NTAwOSwxOC4yMjMwNTg4IDM1LjkyMDg3ODIsMTguMDU1MzQzNyBDMzYuMDc5ODQwMywxNy43MzY2ODUyIDM2LjA2Mzk0NDIsMTcuNzM2Njg1MiAzNS4yNTMyMzczLDE4LjAyMTgwMDcgQzMzLjkwMjA1OTEsMTguNTI0OTQ1OCAzMy43MTEzMDQ1LDE4LjQ1Nzg1OTggMzQuMzc4OTQ1NSwxNy43MDMxNDIyIEMzNC44NzE3MjgxLDE3LjE2NjQ1NDEgMzUuNDU5ODg4LDE2LjE5MzcwNzEgMzUuNDU5ODg4LDE1LjkwODU5MTUgQzM1LjQ1OTg4OCwxNS44NTgyNzcgMzUuMjIxNDQ0OCwxNS45NDIxMzQ2IDM0Ljk1MTIwOTIsMTYuMDkzMDc4IEMzNC42NjUwNzczLDE2LjI2MDc5MzEgMzQuMDI5MjI4OCwxNi41MTIzNjU2IDMzLjU1MjM0MjQsMTYuNjYzMzA5MSBMMzIuNjkzOTQ2OSwxNi45NDg0MjQ2IEwzMS45MTUwMzI0LDE2LjM5NDk2NSBDMzEuNDg1ODM0NiwxNi4wOTMwNzggMzAuODgxNzc4NiwxNS43NTc2NDggMzAuNTYzODU0MywxNS42NTcwMTkgQzI5Ljc1MzE0NzQsMTUuNDIyMjE4IDI4LjUxMzI0MjgsMTUuNDU1NzYxIDI3Ljc4MjAxNjksMTUuNzI0MTA1IEMyNS43OTQ5OTAzLDE2LjQ3ODgyMjYgMjQuNTM5MTg5NCwxOC40MjQzMTY4IDI0LjY4MjI1NTQsMjAuNTU0Mjk3NSBDMjQuNjgyMjU1NCwyMC41NTQyOTc1IDI0LjUzOTE4OTQsMTguNDI0MzE2OCAyNC42ODIyNTU0LDIwLjU1NDI5NzUgWiBNMjQuNjgyMjU1NCwyMC41NTQyOTc1IiBpZD0iT3ZhbC0xIi8+PC9nPjwvZz48L3N2Zz4="></div><span class="form__span">or use your email account</span>
          <input class="form__input" type="text" placeholder="Email">
          <input class="form__input" type="password" placeholder="Password"><a class="form__link">Forgot your password?</a>
          <button class="form__button button submit">SIGN IN</button>
        </form>
      </div>
      <div class="switch" id="switch-cnt">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle--t"></div>
        <div class="switch__container" id="switch-c1">
          <h2 class="switch__title title">Welcome Back !</h2>
          <p class="switch__description description">To keep connected with us please login with your personal info</p>
          <button class="switch__button button switch-btn">SIGN IN</button>
        </div>
        <div class="switch__container is-hidden" id="switch-c2">
          <h2 class="switch__title title">Hello Friend !</h2>
          <p class="switch__description description">Enter your personal details and start journey with us</p>
          <button class="switch__button button switch-btn">SIGN UP</button>
        </div>
      </div>
    </div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
let switchCtn = document.querySelector("#switch-cnt");
let switchC1 = document.querySelector("#switch-c1");
let switchC2 = document.querySelector("#switch-c2");
let switchCircle = document.querySelectorAll(".switch__circle");
let switchBtn = document.querySelectorAll(".switch-btn");
let aContainer = document.querySelector("#a-container");
let bContainer = document.querySelector("#b-container");
let allButtons = document.querySelectorAll(".submit");

let getButtons = e => e.preventDefault();

let changeForm = e => {

  switchCtn.classList.add("is-gx");
  setTimeout(function () {
    switchCtn.classList.remove("is-gx");
  }, 1500);

  switchCtn.classList.toggle("is-txr");
  switchCircle[0].classList.toggle("is-txr");
  switchCircle[1].classList.toggle("is-txr");

  switchC1.classList.toggle("is-hidden");
  switchC2.classList.toggle("is-hidden");
  aContainer.classList.toggle("is-txl");
  bContainer.classList.toggle("is-txl");
  bContainer.classList.toggle("is-z200");
};

let mainF = e => {
  for (var i = 0; i < allButtons.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    allButtons[i].addEventListener("click", getButtons);}window.CP.exitedLoop(0);
  for (var i = 0; i < switchBtn.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    switchBtn[i].addEventListener("click", changeForm);}window.CP.exitedLoop(1);
};

window.addEventListener("load", mainF);
    </script>
</body>
</html>

7. By Aigars Silkalns

Made by Aigars Silkalns. Flat Login Form with Slide Down Register 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>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.message a').click(function () {
  $('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
});
    </script>
</body>
</html>

8. By Matthew Shaw

Made by Matthew Shaw. Simple Credit Card form. Source

JavaScript Credit Card form by Matthew Shaw
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Vollkorn');
@import url('https://fonts.googleapis.com/css?family=Unica+One');

#app {
  display: flex;
  justify-content: center;
  background-color: grey;
}
.checkout-wrapper {
  background-color: white;
  width: 400px;
  margin: 35px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
ul {
  text-align: center;
}
li {
  font-size: 65px;
  display: inline;
  margin-left: 25px;
  margin-right: 25px;
}
.payment-wrapper {
  margin-bottom: 10px;
}
.payment-wrapper h6{
  margin-bottom: 5px;
}
.form-wrapper {
  display: grid;
  grid-template-areas: "name name"
                        "num num"
                        "exp cvc"
                        "submit submit";
  grid-template-rows: 60px 60px 60px 60px;
  grid-template-columns: 1fr 1fr;
}
.full-name {
  grid-area: name;
}
.card-num {
  grid-area: num;
}
.exp-date {
  grid-area: exp;
}
.cvc {
  gird-area: cvc;
}
#submit-input {
  grid-area: submit;
}
label, h6 {
  font-size: 13px;
  font-family: 'Vollkorn', serif;
}
input {
  display: block;
  text-transform: uppercase;
  font-size: 19px;
  font-family: 'Unica One', cursive;
}
input[type="submit"] {
  color: white;
  background-color: black;
  border-radius: 10px;
  border-width: 0px;
  letter-spacing: 2px;
}
</style>
</head>
<body>
<div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js'></script>
      <script>
class CreditCardCheckout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      method: '',
      name: '',
      number: '',
      date: '',
      cvc: '' };

  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "checkout-wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "payment-wrapper" }, /*#__PURE__*/
      React.createElement("h6", { id: "payment-label" }, "Payment Method"), /*#__PURE__*/
      React.createElement("ul", null, /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/React.createElement("i", { class: "fab fa-cc-visa" })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/React.createElement("i", { class: "fab fa-cc-mastercard" })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/React.createElement("i", { class: "fab fa-cc-paypal" })))), /*#__PURE__*/
      React.createElement("form", { className: "form-wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "full-name" }, /*#__PURE__*/
      React.createElement("label", { id: "full-name-label", for: "full-name-input" }, "Full Name "), /*#__PURE__*/
      React.createElement("input", { id: "full-name-input", name: "full-name-input", min: "1", max: "20" })), /*#__PURE__*/

      React.createElement("div", { className: "card-num" }, /*#__PURE__*/
      React.createElement("label", { id: "card-num-label", for: "card-num-input" }, "Card Number "), /*#__PURE__*/
      React.createElement("input", { id: "card-num-input", name: "card-num-input", min: "1", max: "20" })), /*#__PURE__*/

      React.createElement("div", { className: "exp-date" }, /*#__PURE__*/
      React.createElement("label", { id: "exp-date-label", for: "exp-date-input" }, "Expiration Date "), /*#__PURE__*/
      React.createElement("input", { id: "exp-date-input", name: "exp-date-input", min: "1", max: "20" })), /*#__PURE__*/

      React.createElement("div", { className: "cvc" }, /*#__PURE__*/
      React.createElement("label", { id: "cvc-label", for: "cvc-input" }, "CVC "), /*#__PURE__*/
      React.createElement("input", { id: "cvc-input", name: "cvc-input", min: "1", max: "20" })), /*#__PURE__*/

      React.createElement("input", { id: "submit-input", type: "submit" }))));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(CreditCardCheckout, null),
document.getElementById('app'));
    </script>
</body>
</html>

9. By Yogini Bende

Made by Yogini Bende. Login Form with Slide Down Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
body {
  font-family: "Raleway", sans-serif;
  background-color: #e7e7e7;
}

.wrapper {
  width: 800px;
  height: 600px;
  position: relative;
  margin: 3% auto;
  box-shadow: 2px 18px 70px 0px #9D9D9D;
  overflow: hidden;
}

.login-text {
  width: 800px;
  height: 450px;
  background: linear-gradient(to left, #ab68ca, #de67a3);
  position: absolute;
  top: -300px;
  box-sizing: border-box;
  padding: 6%;
  transition: all 0.5s ease-in-out;
  z-index: 11;
}

.text {
  margin-left: 20px;
  color: #fff;
  display: none;
  transition: all 0.5s ease-in-out;
  transition-delay: 0.3s;
}
.text a, .text a:visited {
  font-size: 36px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  display: block;
}
.text hr {
  width: 10%;
  float: left;
  background-color: #fff;
  font-size: 16px;
}
.text input {
  margin-top: 30px;
  height: 40px;
  width: 300px;
  border-radius: 2px;
  border: none;
  background-color: #444;
  opacity: 0.6;
  outline: none;
  color: #fff;
  padding-left: 10px;
}
.text input[type=text] {
  margin-top: 60px;
}
.text button {
  margin-top: 60px;
  height: 40px;
  width: 140px;
  outline: none;
}
.text .login-btn {
  background: #fff;
  border: none;
  border-radius: 2px;
  color: #696a86;
}
.text .signup-btn {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
  color: #fff;
  margin-left: 30px;
}

.cta {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #696a86;
  border: 2px solid #fff;
  position: absolute;
  bottom: -30px;
  left: 370px;
  color: #fff;
  outline: none;
  cursor: pointer;
  z-index: 11;
}

.call-text {
  background-color: #fff;
  width: 800px;
  height: 450px;
  position: absolute;
  bottom: 0;
  padding: 10%;
  box-sizing: border-box;
  text-align: center;
}
.call-text h1 {
  font-size: 42px;
  margin-top: 10%;
  color: #696a86;
}
.call-text h1 span {
  color: #333;
  font-weight: bolder;
}
.call-text button {
  height: 40px;
  width: 180px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to left, #ab68ca, #de67a3);
  color: #fff;
  font-weight: bolder;
  margin-top: 30px;
  cursor: pointer;
  outline: none;
}

.show-hide {
  display: block;
}

.expand {
  transform: translateY(300px);
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="login-text">
    <button class="cta"><i class="fas fa-chevron-down fa-1x"></i></button>
    <div class="text">
      <a href="">Login</a>
      <hr>
      <br>
      <input type="text" placeholder="Username">
      <br>
      <input type="password" placeholder="Password">
      <br>
      <button class="login-btn">Log In</button>
      <button class="signup-btn">Sign Up</button>
    </div>
  </div>
  <div class="call-text">
    <h1>Show us your <span>creative</span> side</h1>
    <button>Join the Community</button>
  </div>

</div>
      <script>
var cta = document.querySelector(".cta");
var check = 0;

cta.addEventListener('click', function (e) {
  var text = e.target.nextElementSibling;
  var loginText = e.target.parentElement;
  text.classList.toggle('show-hide');
  loginText.classList.toggle('expand');
  if (check == 0)
  {
    cta.innerHTML = "<i class=\"fas fa-chevron-up\"></i>";
    check++;
  } else

  {
    cta.innerHTML = "<i class=\"fas fa-chevron-down\"></i>";
    check = 0;
  }
});
    </script>
</body>
</html>

10. By Andy Tran

Made by Andy Tran. Another Login form with Slide animation. 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">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'> 
<style>
html {
  width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.overlay, .form-panel.one:before {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

.form {
  z-index: 15;
  position: relative;
  background: #FFFFFF;
  width: 600px;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 100px auto 10px;
  overflow: hidden;
}
.form-toggle {
  z-index: 10;
  position: absolute;
  top: 60px;
  right: 60px;
  background: #FFFFFF;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  transform-origin: center;
  transform: translate(0, -25%) scale(0);
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.form-toggle:before, .form-toggle:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 4px;
  background: #4285F4;
  transform: translate(-50%, -50%);
}
.form-toggle:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.form-toggle:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.form-toggle.visible {
  transform: translate(0, -25%) scale(1);
  opacity: 1;
}
.form-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 20px;
}
.form-group:last-child {
  margin: 0;
}
.form-group label {
  display: block;
  margin: 0 0 10px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.two .form-group label {
  color: #FFFFFF;
}
.form-group input {
  outline: none;
  display: block;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 12px 20px;
  color: rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  transition: 0.3s ease;
}
.form-group input:focus {
  color: rgba(0, 0, 0, 0.8);
}
.two .form-group input {
  color: #FFFFFF;
}
.two .form-group input:focus {
  color: #FFFFFF;
}
.form-group button {
  outline: none;
  background: #4285F4;
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 12px 20px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.two .form-group button {
  background: #FFFFFF;
  color: #4285F4;
}
.form-group .form-remember {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.form-group .form-remember input[type=checkbox] {
  display: inline-block;
  width: auto;
  margin: 0 10px 0 0;
}
.form-group .form-recovery {
  color: #4285F4;
  font-size: 12px;
  text-decoration: none;
}
.form-panel {
  padding: 60px calc(5% + 60px) 60px 60px;
  box-sizing: border-box;
}
.form-panel.one:before {
  content: "";
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}
.form-panel.one.hidden:before {
  display: block;
  opacity: 1;
  visibility: visible;
}
.form-panel.two {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 95%;
  background: #4285F4;
  width: 100%;
  min-height: 100%;
  padding: 60px calc(10% + 60px) 60px 60px;
  transition: 0.3s ease;
  cursor: pointer;
}
.form-panel.two:before, .form-panel.two:after {
  content: "";
  display: block;
  position: absolute;
  top: 60px;
  left: 1.5%;
  background: rgba(255, 255, 255, 0.2);
  height: 30px;
  width: 2px;
  transition: 0.3s ease;
}
.form-panel.two:after {
  left: 3%;
}
.form-panel.two:hover {
  left: 93%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-panel.two:hover:before, .form-panel.two:hover:after {
  opacity: 0;
}
.form-panel.two.active {
  left: 10%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: default;
}
.form-panel.two.active:before, .form-panel.two.active:after {
  opacity: 0;
}
.form-header {
  margin: 0 0 40px;
}
.form-header h1 {
  padding: 4px 0;
  color: #4285F4;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.two .form-header h1 {
  position: relative;
  z-index: 40;
  color: #FFFFFF;
}
.pen-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 600px;
  margin: 20px auto 100px;
}
.pen-footer a {
  color: #FFFFFF;
  font-size: 12px;
  text-decoration: none;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.pen-footer a .material-icons {
  width: 12px;
  margin: 0 5px;
  vertical-align: middle;
  font-size: 12px;
}

.cp-fab {
  background: #FFFFFF !important;
  color: #4285F4 !important;
}
</style>
</head>
<body>
  <!-- Form-->
<div class="form">
  <div class="form-toggle"></div>
  <div class="form-panel one">
    <div class="form-header">
      <h1>Account Login</h1>
    </div>
    <div class="form-content">
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required="required"/>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required="required"/>
        </div>
        <div class="form-group">
          <label class="form-remember">
            <input type="checkbox"/>Remember Me
          </label><a class="form-recovery" href="#">Forgot Password?</a>
        </div>
        <div class="form-group">
          <button type="submit">Log In</button>
        </div>
      </form>
    </div>
  </div>
  <div class="form-panel two">
    <div class="form-header">
      <h1>Register Account</h1>
    </div>
    <div class="form-content">
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required="required"/>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required="required"/>
        </div>
        <div class="form-group">
          <label for="cpassword">Confirm Password</label>
          <input type="password" id="cpassword" name="cpassword" required="required"/>
        </div>
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" required="required"/>
        </div>
        <div class="form-group">
          <button type="submit">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="pen-footer"><a href="https://www.behance.net/gallery/30478397/Login-Form-UI-Library" target="_blank"><i class="material-icons">arrow_backward</i>View on Behance</a><a href="https://github.com/andyhqtran/UI-Library/tree/master/Login%20Form" target="_blank">View on Github<i class="material-icons">arrow_forward</i></a></div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var panelOne = $('.form-panel.two').height(),
  panelTwo = $('.form-panel.two')[0].scrollHeight;

  $('.form-panel.two').not('.form-panel.two.active').on('click', function (e) {
    e.preventDefault();

    $('.form-toggle').addClass('visible');
    $('.form-panel.one').addClass('hidden');
    $('.form-panel.two').addClass('active');
    $('.form').animate({
      'height': panelTwo },
    200);
  });

  $('.form-toggle').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('visible');
    $('.form-panel.one').removeClass('hidden');
    $('.form-panel.two').removeClass('active');
    $('.form').animate({
      'height': panelOne },
    200);
  });
});
    </script>
</body>
</html>

11. By Eric

Made by Eric. Sign-Up/Login Form with Two different tabs. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}
</style>
</head>
<body>
  <div class="form">
      
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
      
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up for Free</h1>
          
          <form action="/" method="post">
          
          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>
        
            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <button type="submit" class="button button-block"/>Get Started</button>
          
          </form>

        </div>
        
        <div id="login">   
          <h1>Welcome Back!</h1>
          
          <form action="/" method="post">
          
            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <p class="forgot"><a href="#">Forgot Password?</a></p>
          
          <button class="button button-block"/>Log In</button>
          
          </form>

        </div>
        
      </div><!-- tab-content -->
      
</div> <!-- /form -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.form').find('input, textarea').on('keyup blur focus', function (e) {

  var $this = $(this),
  label = $this.prev('label');

  if (e.type === 'keyup') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.addClass('active highlight');
    }
  } else if (e.type === 'blur') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.removeClass('highlight');
    }
  } else if (e.type === 'focus') {

    if ($this.val() === '') {
      label.removeClass('highlight');
    } else
    if ($this.val() !== '') {
      label.addClass('highlight');
    }
  }

});

$('.tab a').on('click', function (e) {

  e.preventDefault();

  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');

  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();

  $(target).fadeIn(600);

});
    </script>
</body>
</html>

12. By Lionel T

Made by Lionel T. Envelope Form using JavaScript & CSS3. Source

JavaScript Envelope form by Lionel T
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Special+Elite);
html {
  margin:0; 
  padding:0;
  height:100%;
}
body {
  font-family: 'Special Elite', cursive;
  background: -webkit-linear-gradient(top, rgba(85,152,195,0.7) 0%, rgba(85,152,195,1) 100%);
	background: -moz-linear-gradient(top, rgba(85,152,195,0.7) 0%, rgba(85,152,195,1) 100%);
	background: -o-linear-gradient(top, rgba(85,152,195,0.7) 0%, rgba(85,152,195,1) 100%);
	background: -ms-linear-gradient(top, rgba(85,152,195,0.7) 0%, rgba(85,152,195,1) 100%);
	background: linear-gradient(top, rgba(85,152,195,0.7) 0%, rgba(85,152,195,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(85,152,195,0.7)', endColorstr='rgba(85,152,195,1)',GradientType=0 );
  color:#777; 
  text-align:center;
}

p { margin:15px;  } 
.callback { 
  color:rgba(0,0,0,0.2);
  padding-top:25px;
  line-height:1.5em;
}
input{
  border:0;
  border-bottom:1px dotted rgba(0,0,0,0.1);
  margin:0;
  height:20px;
  outline: none;
  font-family: 'Special Elite', cursive;
}

input::-webkit-input-placeholder { 
  color: rgba(1,1,1,0.5);
  transition: color 0.3s;
}
input:focus::-webkit-input-placeholder { 
  color: rgba(1,1,1,0.1);
}

input::-moz-placeholder {
  color: rgba(1,1,1,0.5);
  transition: color 0.3s;
}
input:focus::-moz-placeholder {
  color: rgba(1,1,1,0.1);
}

p:nth-child(3){
  margin-top:-10px;
  margin-left:0;
  border:0;
}
#send {
  background:transparent;
  cursor:pointer;
  position:relative;
  color:#777;
  font-size:0.6em;
  transition:color 0.3s;
}

#send:hover{
  color: #9b1d4a;
}

#envelope {
  width:408px;
  height:224px;
	background: #f2f2f2;
  margin:100px auto;
  position:relative;
}

#envelope div:first-child {
  width:100%;
  height:135px;
  position:absolute;
  bottom:0;
  background: -webkit-linear-gradient(top, #fff 0%, #f2f2f2 20%);
	background: -moz-linear-gradient(top, #fff 0%, #f2f2f2 20%);
	background: -o-linear-gradient(top, #fff 0%, #f2f2f2 20%);
	background: -ms-linear-gradient(top, #fff) 0%, #f2f2f2 20%);
	background: linear-gradient(top, #fff 0%, #f2f2f2 20%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f2f2f2',GradientType=0 );
  z-index:10;
  box-shadow: 0px -2px 4px rgba(0,0,0,0.1);
}

#envelope div:nth-child(2){
  width:360px;
  height:133px;
  background:#fff;
  position:absolute;
  z-index:5;
  top:-44px;
  left:50%;
  margin-left:-180px;
}

#envelope div:nth-child(2):before {
  content:"";
  position:absolute;
  width: 0;
	height: 0;
	border-top: 84px solid #e6e6e6;
	border-left: 9px solid transparent;
  left:-9px;
  top:50px;
}

#envelope div:nth-child(2):after {
  content:"";
  position:absolute;
  width: 0;
	height: 0;
	border-top: 84px solid #e6e6e6;
	border-right: 9px solid transparent;
  right:-9px;
  top:50px;
}

#envelope div:nth-child(3){
  width:100%;
  height:9px;
  position:absolute;
  bottom:0;
  overflow:hidden;
  z-index:850;
}

.line {
  width:35px;
  height:9px;
  float:left;
  transform: skewX(25deg);
  z-index:900;
  margin: 0 0 0 19px;
}

.line:nth-child(odd) { background:#005091; }
.line:nth-child(even) { background:#9b1d4a; }
#envelope div:nth-child(5) .line:nth-child(odd) { background:#9b1d4a; }
#envelope div:nth-child(5) .line:nth-child(even) { background:#005091; }

.line:first-child{  margin-left:-10px; }

#envelope div:nth-child(4){
  width:140px;
  height:9px;
  position:absolute;
  top:88px;
  left:9px;
  overflow:hidden;
  z-index:850;
  transform:rotate(-270deg);
  transform-origin:0 0;
}

#envelope div:nth-child(5){
  width:136px;
  height:9px;
  position:absolute;
  top:88px;
  right:-136px;
  overflow:hidden;
  z-index:850;
  transform:rotate(-270deg);
  transform-origin:0 0;

}

#envelope div:nth-child(5) .line {
    transform: skewX(-25deg);
}

#envelope div:nth-child(5) .line:first-child {
  margin-left:-7px;
}

.sending {
    animation:sending 1.5s forwards;
}

@keyframes sending {
  0% { transform:translateY(0px); }
  10% { transform:translateY(-2px); }
  100% { transform:translateY(135px); }
}
</style>
</head>
<body>
  <div id="envelope">
  <div></div>
  <div>
    <p>Contact us!</p>
    <form action="">
      <p><input type="text" name="name" id="name" placeholder="Name:"/></p>
      <p><input type="text" name="email" id="email" placeholder="Email:"/></p>
      <p><input type="submit" name="send" id="send" value="Send"/></p>
    </form>
   </div>
  <div>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
  </div>
  <div>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
  </div>
   <div>
    <i class="line"></i>
    <i class="line"></i>
    <i class="line"></i>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('#send').click(function () {
  $('div:nth-child(2)').addClass('sending');
  var name = $('#name').val();
  $('#envelope').append('<p class="callback">Thanks<br>' + name + '!</p>');
});
    </script>
</body>
</html>