14+ JavaScript Contact Form Examples

This post contains a total of 14+ JavaScript Contact Form Examples with Source Code. All these Contact Forms 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 Contact Form Examples

1. By Daniel

Made by Daniel. Rocket Contact form with Cool Rocket Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
  
  
  
<style>
body {
  font-family: 'Open Sans', sans-serif;
  background: #337af0;
  overflow: hidden;
}

h2 {
  text-align: center;
  display: block;
  margin-top: 200px;
  width: 100%;
  color: #fff;
  font-size: 32px;
  height: 40px;
  font-weight: 300;
}

.secondTitle {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 247px;
  transition: all .3s ease;
}

h2.thirdTitle {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 350px;
  transition: all .3s 2.4s ease;
}

h2.addTitleThird {
  opacity: 1;
  top: 298px;
  transition: all .6s 9.5s ease;
}

.subtitle {
  text-align: center;
  display: block;
  margin-top: 17px;
  width: 100%;
  color: #fff;
  font-size: 20px;
  opacity: .4;
}

.formScreenRaper #removeTitle {
  opacity: 0;
  transition: all .3s 1s ease;
}

.addTitle {
  opacity: 1;
  top: 197px;
  transition: all .6s 2.7s ease;
}

h3.addSubtitle {
  opacity: .4;
  top: 250px;
  transition: all .6s 2.7s ease;
}

.secondSubtitle {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 254px;
  transition: all .3s ease;
  color: #fff;
  font-size: 20px;
  text-align: center;
  width: 100%;
}

.formScreenRaper {
  position: absolute;
  z-index: 9999;
  width: 1000px;
  height: 100%;
  left: 50%;
  margin-left: -500px;
  transform-style: preserve-3D;
  perspective: 1000px;
}

#supaForm {
  background: #fff;
  width: 560px;
  height: 109px;
  position: absolute;
  transform: translate3D(39%, 80%, 0) scale(.7, .7);
  z-index: 9999;
  box-shadow: rgba(0, 0, 0, 0.27) 0px 18px 57px;
  transition: transform .3s cubic-bezier(0.45, -0.01, 0.18, 0.98),
    background .3s ease;
  overflow: hidden;
}

#supaForm:hover {
  background: #EAEAEA;
}

#activateForm {
  width: 100%;
  padding: 7% 0px;
  text-align: center;
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  z-index: 9999;
}

fieldset {
  opacity: 0;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#supaForm fieldset label {
  transition: all .2s 2s ease;
  font-weight: 400;
  z-index: 10;
  font-size: 35px;
  color: #464646;
  top: 36px;
  left: 20px;
}

fieldset .inputText {
  width: 80%;
  height: 115px;
  font-size: 35px;
  font-weight: 400;
  padding-left: 19px;
  border: none;
  outline: 0;
  opacity: 0;
  transition: all .3s 1.8s ease;
}

fieldset svg {
  width: 34px;
  height: 34px;
  right: 0;
  top: 50%;
  position: absolute;
  margin-top: -38px;
  padding: 20px;
  fill: #909090;
  opacity: 0;
  cursor: pointer;
  transition: all .4s ease;
}

fieldset svg:hover {
  fill: #676767;
}

#supaForm fieldset textarea {
  height: 338px;
  margin-top: 43px;
  font-size: 25px;
  resize: none;
}

.displayBlock {
  opacity: 1;
}

hr {
  background: #206ae4;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border: none;
  z-index: 1;
  margin: 0;
  padding: 0;
  transition: width .3s ease;
}

.quarter {
  animation: quarter .3s forwards ease;
}

.threeQuarters {
  animation: threeQuarters .3s forwards ease;
}

.full {
  animation: full .3s forwards ease;
}

@keyframes quarter {
  from {
    width: 0;
  }
  to {
    width: 33.3%;
  }
}

@keyframes threeQuarters {
  from {
    width: 33.3%;
  }
  to {
    width: 66.6%;
  }
}

@keyframes full {
  from {
    width: 66.6%;
  }
  to {
    width: 100%;
  }
}

/* form activation and transition styles */

#supaForm.formActive {
  transform: translate3D(39%, 75%, 0) scale(1, 1);
}

#supaForm.formActive:hover {
  background: #fff;
}

.formActive #activateForm {
  display: none;
}

/* .formActive:active				{ transform: translate3D(40%,100%,0) rotateX(0deg) rotateY(7deg) skew(0deg,1deg) scale(.9,.9);} */

.formActive .stepOff {
  opacity: 0;
  transition: opacity .5s ease, left .7s ease;
  left: -100px;
}

.stepOn {
  opacity: 1;
  width: 100%;
  transition: opacity .6s .9s ease;
}

#supaForm .stepOn label {
  transition: all .2s 2.6s ease;
  position: absolute;
  animation: labelAnimation .2s 2.6s ease forwards;
}

@keyframes labelAnimation {
  0% {
    font-weight: 400;
    z-index: 10;
    font-size: 35px;
    color: #464646;
    top: 36px;
    left: 20px;
  }
  100% {
    top: 20px;
    font-size: 13px;
    font-weight: 300;
    color: #A0A0A0;
  }
}

.stepOn .inputText {
  opacity: 1;
  transition: all .3s 2.5s ease;
}

#supaForm.messageStep {
  height: 380px;
  transform: translate3D(39%, 20%, 0);
  transition: all .5s 2.6s cubic-bezier(0.45, -0.01, 0.18, 0.98),
    transform .6s 2.4s ease;
}

.messageAway {
  animation: shrinkForm 1.5s 1s ease forwards;
}

/* form activation transition styles */

.skyContainer {
  overflow: hidden;
  position: absolute;
  z-index: 9998;
  width: 100%;
  height: 100%;
  max-height: 996px;
  min-height: 996px;
  top: 0;
  left: 0;
}

.skyBG {
  background-image: url("https://raw.githubusercontent.com/its-aomi/cdnfxcattx/main/sky.svg");
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1024px;
  position: absolute;
  top: -1000px;
  left: 0;
  z-index: 9997;
}

.sateliteRap {
  position: absolute;
  bottom: 420px;
  left: 50%;
  margin-left: 25px;
  z-index: 9999;
}

#activeSky .sateliteRap {
  margin-left: -1000px;
  transition: margin 16s 4s linear;
}

#activeSky .sateliteRap svg {
  margin-left: -240px;
  transition: margin 4s 6.3s ease-out;
  animation: sateliteRotate 3.3s 6.3s ease-out forwards;
  transform: rotate(0deg);
}

.sateliteRap svg #hitSpark {
  opacity: 0;
}

#activeSky .sateliteRap svg #hitSpark {
  animation: hitSpark .5s 6.3s ease-out forwards;
}

@keyframes sateliteRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-540deg);
  }
}

@keyframes hitSpark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.clouds {
  background-image: url("https://raw.githubusercontent.com/its-aomi/cdnfxcattx/main/clouds.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 352px;
  z-index: 9999;
  position: absolute;
  left: 0;
  top: -350px;
}

#activeSky {
  top: -8px;
  transition: all 5s 3s ease;
}

#activeClouds {
  top: 651px;
  transition: all 5s 3s ease;
}

.rocketContainer {
  width: 90px;
  height: 150px;
  position: absolute;
  z-index: 9998;
  transition: all 2s ease;
  top: 1300px;
  transform: rotate(20deg);
  left: 50%;
  margin-left: -45px;
  animation: rocketShake 1s ease infinite;
  opacity: 0;
}

.rocketContainer svg {
  left: -94px;
  position: relative;
}

#flame {
  animation: shake .2s linear infinite;
}

/* rocket mechanism */

.liftOff {
  top: 255px;
  transition: top 2.4s linear, opacity .3s ease;
  opacity: 1;
  animation: flyRocketFly 8s 2.4s ease forwards;
}

/* rocket mechanism */

@keyframes shrinkForm {
  0% {
    transform: translate3D(39%, 20%, 0) scale3D(1, 1, 1);
    opacity: 1;
  }
  50% {
    transform: translate3D(70%, 54%, 0px) scale3D(1.05, 1.05, 1) rotate(-33deg);
    opacity: 1;
  }
  99% {
    transform: translate3D(40%, -47%, 0px)
      scale3D(0.01, 0.01, 0.01)
      rotate(-197deg);
    opacity: 1;
  }
  100% {
    transform: translate3D(40%, -47%, 0px)
      scale3D(0.01, 0.01, 0.01)
      rotate(-197deg);
    opacity: 0;
  }
}

@keyframes shake {
  0% {
    transform: translate(55px, 135px) rotate(7deg);
  }
  20% {
    transform: translate(55px, 135px) rotate(0deg);
  }
  40% {
    transform: translate(55px, 135px) rotate(-7deg);
  }
  60% {
    transform: translate(55px, 135px) rotate(0deg);
  }
  100% {
    transform: translate(55px, 135px) rotate(0deg);
  }
}

@keyframes rocketShake {
  0% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(24deg);
  }
  100% {
    transform: rotate(14deg);
  }
}

@keyframes flyRocketFly {
  0% {
    top: 255px;
    left: 50%;
  }
  50% {
    top: 498px;
    left: 50%;
    transform: rotate(20deg);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  60% {
    top: 498px;
    left: 50%;
    transform: rotate(34deg);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  69% {
    top: 498px;
    left: 50%;
    transform: rotate(14deg);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  80% {
    top: 498px;
    left: 50%;
    transform: rotate(18deg);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  100% {
    top: -400px;
    left: 50%;
    transform: rotate(24deg);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }
}
</style>
</head>
<body>
  <!-- progress bar background -->
<hr />
<!-- //progress bar background -->
<div class="formScreenRaper">
  <h2 class="firstTitle">Wanna drop me a line?</h2>
  <h2 class="secondTitle">Just one more step! </h2>
  <h2 class="thirdTitle">Awesome! I'll get back to you.</h2>
  <h3 class="subtitle">- use this neat contact button -</h3>
  <h3 class="secondSubtitle">and I will personally take your message on a rocket.</h3>
  <form id="supaForm">
    <a id="activateForm" href="#">CONTACT ME</a>
    <fieldset id="step1">
      <label>Hi there, what's your name?</label>
      <input type="text" class="inputText" autocomplete="off" />
      <svg class="nextArrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
        <g>
          <g id="chevron-right">
            <polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153" />
          </g>
        </g>
      </svg>
    </fieldset>
    <fieldset id="step2">
      <label>cool, and your email?</label>
      <input type="text" class="inputText" autocomplete="off" />
      <svg class="nextArrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
        <g>
          <g id="chevron-right">
            <polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153" />
          </g>
        </g>
      </svg>
    </fieldset>
    <fieldset id="step3">
      <label>Alright, drop that line!</label>
      <textarea class="inputText"></textarea>
      <svg class="nextArrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
        <g>
          <g id="chevron-right">
            <polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153" />
          </g>
        </g>
      </svg>
    </fieldset>
  </form>
</div>
<div class="skyContainer">
  <div class="skyBG">
    <div class="sateliteRap">
      <svg width="140px" height="96px" viewBox="0 0 140 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <polygon id="path-1" points="0.000561038961 48 47.5356779 48 47.5356779 0.464602597 0.000561038961 0.464602597 0.000561038961 48"></polygon>
        </defs>
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Desktop-HD" transform="translate(-769.000000, -475.000000)">
            <g id="satelite" transform="translate(764.000000, 457.000000)">
              <g id="Group-5" transform="translate(66.500000, 66.000000) rotate(-109.000000) translate(-66.500000, -66.000000) translate(15.000000, 14.000000)">
                <path d="M57.6631565,29.9742705 C55.8666314,31.7707691 55.8666314,34.694643 57.6631565,36.491771 L66.5085561,45.3364107 C68.3050812,47.1329093 71.2296277,47.1329093 73.0255233,45.3364107 L100.337237,18.0257295 C102.133133,16.2292309 102.133133,13.305357 100.336607,11.5088584 L91.4912078,2.66358927 C89.6953122,0.867090683 86.7707657,0.867090683 84.9748701,2.66358927 L57.6631565,29.9742705 Z M101.267603,18.956711 L73.9571481,46.2673923 C71.6463409,48.5775359 67.8877385,48.5775359 65.5775608,46.2673923 L56.7321612,37.4227526 C54.4226129,35.112609 54.4226129,31.3534326 56.7321612,29.043289 L84.0432453,1.7326077 C86.353423,-0.577535899 90.1126549,-0.577535899 92.4228326,1.7326077 L101.267603,10.5772474 C103.577151,12.887391 103.57778,16.6465674 101.267603,18.956711 L101.267603,18.956711 Z" id="Fill-1" fill="#7189C5"></path>
                <polygon id="Fill-3" fill="#7189C5" points="96 4.93908074 60.9390807 40 60 39.0609193 95.0609193 4"></polygon>
                <polygon id="Fill-5" fill="#7189C5" points="100 9.93908074 64.9390973 45 64 44.0609193 99.0609027 9"></polygon>
                <polygon id="Fill-7" fill="#7189C5" points="76 42.0811315 75.0811315 43 59 26.9188685 59.9182473 26"></polygon>
                <polygon id="Fill-9" fill="#7189C5" points="82 37.0811315 81.0811315 38 65 21.9188685 65.9182473 21"></polygon>
                <polygon id="Fill-11" fill="#7189C5" points="88 31.0811315 87.0811315 32 71 15.9188685 71.9188685 15"></polygon>
                <polygon id="Fill-13" fill="#7189C5" points="94 25.0811315 93.0810979 26 77 9.91886855 77.9182808 9"></polygon>
                <polygon id="Fill-15" fill="#7189C5" points="100 19.0811315 99.0811315 20 83 3.91886855 83.9188685 3"></polygon>
                <g id="Group-19" transform="translate(0.000000, 55.000000)">
                  <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                  </mask>
                  <g id="Clip-18"></g>
                  <path d="M2.63837922,30.1488623 C0.859262338,31.9279792 0.859262338,34.8235636 2.63837922,36.6033039 L11.3974442,45.3623688 C13.1771844,47.1414857 16.0721455,47.1414857 17.8512623,45.3623688 L44.8977039,18.3165506 C46.6774442,16.5368104 46.6774442,13.641226 44.8977039,11.8621091 L36.138639,3.10242078 C34.3595221,1.3233039 31.4639377,1.3233039 29.6848208,3.10304416 L2.63837922,30.1488623 Z M45.8203013,19.2385247 L18.7738597,46.2843429 C16.4860675,48.5721351 12.7632623,48.5721351 10.4754701,46.2843429 L1.71640519,37.5252779 C-0.571387013,35.2374857 -0.571387013,31.5146805 1.71640519,29.2268883 L28.7622234,2.18044675 C31.0500156,-0.107345455 34.7734442,-0.107345455 37.0612364,2.18044675 L45.8203013,10.9401351 C48.1074701,13.2273039 48.1074701,16.9507325 45.8203013,19.2385247 L45.8203013,19.2385247 Z" id="Fill-17" fill="#7189C5" mask="url(#mask-2)"></path>
                </g>
                <polygon id="Fill-20" fill="#7189C5" points="40 60.9390807 4.93906418 96 4 95.0609193 39.0609358 60"></polygon>
                <polygon id="Fill-22" fill="#7189C5" points="45 64.9390807 9.9384458 100 9 99.0615542 44.0609193 64"></polygon>
                <polygon id="Fill-24" fill="#7189C5" points="20 99.0811315 19.0810979 100 3 83.9188685 3.91890213 83"></polygon>
                <polygon id="Fill-26" fill="#7189C5" points="26 93.0811315 25.0811315 94 9 77.9194898 9.91824727 77"></polygon>
                <polygon id="Fill-28" fill="#7189C5" points="32 87.0811315 31.081165 88 15 71.9188685 15.918835 71"></polygon>
                <polygon id="Fill-30" fill="#7189C5" points="38 81.0811315 37.0811315 82 21 65.9188685 21.9182473 65"></polygon>
                <polygon id="Fill-32" fill="#7189C5" points="45 74.0811315 44.0810979 75 28 58.9188685 28.9182808 58"></polygon>
                <path d="M66.514765,66.5151668 C71.2011183,61.8286922 78.7991148,61.8280705 83.4854681,66.5145452 C88.1718214,71.2010199 88.1711998,78.7992133 83.4854681,83.4850663 C78.7984932,88.171541 71.2011183,88.171541 66.514765,83.4856879 C61.8284117,78.7992133 61.8284117,71.2016415 66.514765,66.5151668" id="Fill-34" fill="#56534F"></path>
                <path d="M83.4467058,66.6647471 C79.4817457,62.5722706 73.4641209,61.9128225 68.8224927,64.6591152 L66,71.5121779 C66,71.5121779 77.0891733,67.4677794 83.0218212,79 L87,75.4019472 C86.9678976,72.2359466 85.7870332,69.0803412 83.4467058,66.6647471" id="Fill-36" fill="#3A3835"></path>
                <path d="M27,25.8993646 L20.7854844,19.6844393 C21.4869572,18.491731 21.3367282,16.9361824 20.3123841,15.9118707 C19.0972249,14.6961441 17.1266801,14.6961441 15.9121267,15.9112649 C14.6963617,17.1269916 14.6957559,19.0968684 15.9115209,20.3119893 C16.935865,21.3363011 18.4914626,21.4865254 19.6848143,20.784469 L25.8999356,27 L27,25.8993646 Z" id="Fill-38" fill="#7189C5"></path>
                <path d="M32.5796123,53.246148 L49.6642035,70.3311851 L51.5930181,72.2606052 C55.2453743,75.912923 61.1669979,75.9135488 64.81998,72.2599794 L72.2604981,64.8201654 C75.9134802,61.1672218 75.9128544,55.2456606 72.2604981,51.592717 L70.3316835,49.6639227 L53.2458407,32.5795114 L43.66748,23 L23,43.6666366 L32.5796123,53.246148 Z" id="Fill-40" fill="#67645D"></path>
                <path d="" id="Fill-42" fill="#494742"></path>
                <path d="M72.3090571,52.0281015 L70.4144316,50.1430222 L55.193495,35 L49,46.7997893 L66.2329772,63.9459377 C66.2329772,63.9459377 69.2347475,66.3264467 66.2329772,71 L72.3090571,64.9557579 C75.8972883,61.385606 75.8966736,55.5982534 72.3090571,52.0281015" id="Fill-44" fill="#494742"></path>
                <path d="M43.1645102,22.8168024 L41.1971657,24.784123 C44.5748614,14.6117259 39.181146,6 39.181146,6 L22.5902649,22.5900645 L6,39.1807452 C6,39.1807452 14.6112138,44.5743953 24.78435,41.1967405 L22.8176217,43.163445 L36.6531115,57 L57,36.6533573 L43.1645102,22.8168024 Z" id="Fill-46" fill="#AFAEAC"></path>
                <path d="M49.6724976,46 L59,36.8844572 L44.736239,22.9442073 L42.7073612,24.9263599 C46.190247,14.6772717 40.6295717,6 40.6295717,6 L33,13.4568169 C34.5442085,15.7096299 39.1018788,23.4073097 35.7841489,31.6928688 L49.6724976,46 Z" id="Fill-48" fill="#9B9995"></path>
                <polygon id="Fill-50" fill="#7189C5" points="81.2044313 80 89 87.7954596 87.7942393 89 80 81.2052081"></polygon>
                <polygon id="Fill-52" fill="#AFAEAC" points="87.0428198 73 91 76.9583887 76.9584334 91 73 87.0422407"></polygon>
                <polygon id="Fill-54" fill="#8E8C88" points="82 77.6347265 86.1006318 82 91 77.1938639 86.7247292 73"></polygon>
              </g>
              <path d="M128.000938,111.2812 C128.000938,111.2812 132.718529,96.2536235 144.99899,94.6743566 C144.99899,94.6743566 133.606325,92.7024383 128.000938,77.6734183 C122.395551,92.7024383 111,94.6743566 111,94.6743566 C123.283348,96.2536235 128.000938,111.2812 128.000938,111.2812" id="hitSpark" fill="#FFFFFF"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="clouds"></div>
  <div class="rocketContainer">
    <svg width="600" height="400" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <g id="rocket" fill="none" fill-rule="evenodd">
        <g id="flame" fill="none" fill-rule="evenodd">
          <path d="M37.957.898s24.385 33.987 18.18 35.765c-6.203 1.78-15.15-12.215-15.174-3.03-.025 9.183 15.664 23.193 6.74 21.14-12.786-2.946-17.86-21.3-18.36-9.46-.5 11.838 3.24 24.093-7.87 13.83C10.36 48.88 12.706 29.31 10.8 36.675c-1.905 7.365-1.388 22.79-5.82 16.2C.55 46.282.147 14.62.147 14.62L37.957.9z" fill="#FF5B0D" />
          <path d="M30.482 3.97s17.482 18.04 13.224 18.796c-4.257.754-11.3-4.462-10.826 1.15.476 5.614 6.177 13.274.1 8.923-6.076-4.354-10.003-13.51-9.718-6.3.285 7.21 5.17 18.003-1.024 10.335C16.045 29.21 11.93 17.89 10.988 22.29c-.94 4.4.25 13.86-3.213 9.592-3.464-4.268-1.732-19-1.732-19l24.44-8.912z" fill="#FFD03D" />
        </g>
        <path d="M96.008 81.165c-1.11-6.988-2.935-13.838-5.446-20.39C78.54 29.41 51.78 6.25 20.735.347c-.876-.167-1.78.18-2.322.89C-.722 26.373-5.145 61.487 6.876 92.85c2.433 6.348 5.528 12.494 9.213 18.276-1.78 3.96-3.277 8.263-4.458 12.817-.187.698-.035 1.45.42 2.024l31.82 40.84c.536.69 1.405 1.02 2.263.878.842-.153 1.55-.755 1.838-1.578 2.097-6.12 6.06-11.85 11.304-16.364l.934 2.44c.465 1.21 1.82 1.82 3.038 1.355l25.793-9.886c1.227-.47 1.83-1.833 1.366-3.04l-.715-1.865c6.92-.135 13.694 1.468 19.348 4.63.61.342 1.358.386 2.003.14.14-.055.284-.135.413-.22.734-.466 1.146-1.287 1.1-2.152l-3.634-51.657c-.038-.708-.427-1.37-1.026-1.78-3.918-2.586-7.91-4.79-11.89-6.543z" fill="#FFF" />
        <path d="M55.53 62.857c-3.134 5.73-9.136 9.295-15.68 9.295-6.22 0-11.89-3.165-15.172-8.447-1.73-2.807-2.652-6.017-2.652-9.295 0-9.776 7.996-17.73 17.823-17.73 9.83 0 17.82 7.954 17.82 17.73 0 2.955-.746 5.88-2.14 8.447z" fill="#75C9EC" />
        <path d="M27.543 59.59c1.013 2.168 2.63 4.02 4.66 5.35 3.84 2.504 8.6 2.838 12.73.91 4.363-2.038 7.255-6.273 7.56-11.07.14-2.15-.276-4.32-1.197-6.294-3.046-6.497-10.846-9.317-17.393-6.26-6.544 3.055-9.4 10.85-6.36 17.363z" fill="#0096D5" />
      </g>
    </svg>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
$("#activateForm").click(function () {
  $("#supaForm").addClass("formActive");
  $("#step1").addClass("stepOn");
  $("#step1 input").focus();
  return false;
});
$("#step1 .nextArrow").click(function () {
  $("#step1").addClass("stepOff");
  $("#step2").addClass("stepOn");
  $("#step2 input").focus();
  $("hr").addClass("quarter");
});
$("#step2 .nextArrow").click(function () {
  $("#step2").addClass("stepOff");
  $("#step3").addClass("stepOn");
  $("#step3 textarea").focus();
  $("#supaForm").addClass("messageStep");
  $(".firstTitle").attr("id", "removeTitle");
  $(".secondTitle").addClass("addTitle");
  $(".subtitle").attr("id", "removeTitle");
  $(".secondSubtitle").addClass("addSubtitle");
  $("hr").addClass("threeQuarters");
});
$("#step3 .nextArrow").click(function () {
  $("#supaForm").addClass("messageAway");
  $(".secondTitle").attr("id", "removeTitle");
  $(".thirdTitle").addClass("addTitleThird");
  $(".secondSubtitle").attr("id", "removeTitle");
  $("hr").addClass("full");
  $(".rocketContainer").addClass("liftOff");
  $(".skyBG").attr("id", "activeSky");
  $(".clouds").attr("id", "activeClouds");
});

// enter key for next step
jQuery(document).on("keydown", "#step1 input", function (ev) {
  if (ev.which === 13) {
    // Will change backgroundColor to blue as example
    $("#step1").addClass("stepOff");
    $("#step2").addClass("stepOn");
    $("#step2 input").focus();
    $("hr").addClass("quarter");

    // Avoid form submit
    return false;
  }
});
jQuery(document).on("keydown", "#step2 input", function (ev) {
  if (ev.which === 13) {
    // Will change backgroundColor to blue as example
    $("#step2").addClass("stepOff");
    $("#step3").addClass("stepOn");
    $("#step3 textarea").focus();
    $("#supaForm").addClass("messageStep");
    $(".firstTitle").attr("id", "removeTitle");
    $(".secondTitle").addClass("addTitle");
    $(".subtitle").attr("id", "removeTitle");
    $(".secondSubtitle").addClass("addSubtitle");
    $("hr").addClass("threeQuarters");

    // Avoid form submit
    return false;
  }
});

// input focus on next steps
$("#step1 .inputText").keyup(function () {
  var searchQuery = $(this).val();

  if (searchQuery === "") {
    $("#step1 .nextArrow").removeClass("displayBlock");
  } else {
    $("#step1 .nextArrow").addClass("displayBlock");
  }
});
$("#step2 .inputText").keyup(function () {
  var searchQuery = $(this).val();

  if (searchQuery === "") {
    $("#step2 .nextArrow").removeClass("displayBlock");
  } else {
    $("#step2 .nextArrow").addClass("displayBlock");
  }
});
$("#step3 textarea").keyup(function () {
  var searchQuery = $(this).val();

  if (searchQuery === "") {
    $("#step3 .nextArrow").removeClass("displayBlock");
  } else {
    $("#step3 .nextArrow").addClass("displayBlock");
  }
});
    </script>
</body>
</html>

2. By Ari

Made by Ari. Modal Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <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=Lato:700);
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  perspective: 1000px;
  background-color: #49586E;
  font-size: 14px;
  font-family: "Lato", sans-serif;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 1;
  transition-property: background-color, visibility;
  transition-duration: 0.7s, 0s;
  transition-timing-function: ease;
  transition-delay: 0s, 0.35s;
}
.overlay.active {
  transition-delay: 0.35s 0s;
  background-color: #309E72;
  visibility: visible;
}

span {
  width: 90%;
  height: 8px;
  margin-top: 20px;
  display: block;
  background-color: #96a5ba;
}

.contents {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -100px;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  z-index: 5;
}
.contents__front {
  height: 100%;
  position: relative;
  background-color: #576983;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.45);
  transition-property: transform, background-color;
  transition-duration: 0.35s, 0.35s;
  transition-timing-function: cubic-bezier(0.5, -0.15, 0.5, 0.05), ease;
  transition-delay: 0s, 0s;
}
.contents__btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 27px;
  background-color: #309E72;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.25) inset;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  z-index: 4;
}
.contents__btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 100%;
  margin: auto;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: width 0.175s ease;
}
.contents__btn:focus {
  outline: none;
}
.contents__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.45);
  transform: rotateX(-90deg) translateZ(150px);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.35s, 0.35s;
  transition-delay: 0s, 0.35s;
  transition-timing-function: cubic-bezier(0.5, -0.3, 0.85, 0.05), ease;
}
.contents__back h2 {
  height: 40%;
  background-color: #63BD99;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contents__back form {
  padding: 20px;
}
.contents__back label {
  display: block;
  color: #309E72;
  margin-bottom: 3px;
}
.contents__back input[type=text] {
  width: 100%;
  margin-bottom: 10px;
  padding: 3px 0px;
  color: #555;
  display: block;
  border: none;
  border-bottom: 1px solid #aaa;
  background-color: transparent;
}
.contents__back input[type=text]:focus {
  border-bottom: 1px solid #309E72;
  outline: none;
}
.contents__back input[type=submit] {
  background-color: none;
  border: none;
  background-color: #309E72;
  color: #fff;
  padding: 3px 10px;
  margin-top: 15px;
  border-radius: 3px;
  cursor: pointer;
}
.contents__back input[type=submit]:hover {
  background-color: #3dc48e;
}
.contents__back input[type=submit]:focus {
  outline: none;
}
.contents.active .contents__front {
  background-color: #3b4759;
  transition-timing-function: cubic-bezier(0.55, 0.1, 0.7, 0.5), ease;
  transition-delay: 0.35s, 0.35s;
  transform-origin: top center;
  transform: rotateX(-23.0769230769deg) translateZ(-300px);
}
.contents.active .contents__btn:before {
  width: 100%;
}
.contents.active .contents__back {
  transform: rotateX(0deg) translateZ(150px);
  opacity: 1;
  transition-duration: 0.7s, 0.35s;
  transition-delay: 0.35s, 0.35s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1.2), ease;
}
</style>
</head>
<body>
  <div class="overlay"></div>
<div class="contents">
  <div class="contents__front"><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    <button class="contents__btn"></button>
  </div>
  <div class="contents__back">
    <h2>Contact Us</h2>
    <form action="" method="">
      <label for="name">name</label>
      <input class="name" type="text" id="name"/>
      <label for="email">email</label>
      <input class="email" type="text" id="email"/>
      <input type="submit" value="Send"/>
    </form>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {

  var overlay = $(".overlay"),
  contents = $(".contents"),
  btn = $(".contents__btn");

  btn.on("click", function () {
    contents.addClass("active");
    overlay.addClass("active");
  });

  overlay.on("click", function () {
    overlay.removeClass("active");
    contents.removeClass("active");
  });
});
    </script>
</body>
</html>

3. By Maria M. Muñoz

Made by Maria M. Muñoz. Animated Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  background: #373737;
  font-family: "Source Sans Pro", sans-serif;
}

.material-icons {
  font-size: 18px;
  margin-left: 4px;
}

.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 35rem));
  grid-template-rows: repeat(5, min-content);
  justify-items: space-between;
  align-items: center;
  background: #fff;
  border-radius: 0.4rem;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 790px) {
  .container {
    grid-template-columns: 50rem;
    grid-column-rows: repeat(6, min-content);
  }
}
@media only screen and (max-width: 540px) {
  .container {
    grid-template-columns: minmax(30rem, 40rem);
  }
}

/*  TITLE  */
.title {
  grid-row: 1/2;
  grid-column: 1/4;
  padding: 2.8rem 4rem;
  margin-bottom: 1.4rem;
  font-size: 3.2rem;
  color: #373737;
  border-radius: 0.4rem 0.4rem 0 0;
  background: #f2f2f2;
  font-weight: 700;
}

/*  FORM  */
.form {
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  margin: 2rem 0 0.8rem 4rem;
  position: relative;
}
@media only screen and (max-width: 790px) {
  .form {
    margin: 2rem 4rem 0.8rem 4rem;
  }
}
.form__1 {
  grid-row: 2/3;
}
.form__2 {
  grid-row: 3/4;
}
.form__3 {
  grid-row: 4/5;
}
.form.active label {
  transform: translateY(-2.2rem);
  visibility: visible;
  font-size: 1.3rem;
  color: #7581FF;
}
.form__input {
  font-size: 1.6rem;
  padding: 1rem 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid #c1c1c1;
}
.form__input:focus {
  outline: none;
  border-bottom: 2px solid #c1c1c1;
}
.form__input:focus:invalid {
  border-bottom: 2px solid #7581FF;
}
.form__label {
  font-size: 1.6rem;
  color: #c1c1c1;
  position: absolute;
  top: 1rem;
  pointer-events: none;
  transition: all 0.3s;
}
.form__btn {
  grid-column: 1/2;
  grid-row: 5/6;
  background: #7581FF;
  color: #fff;
  border: none;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1.1rem 0;
  margin: 2.8rem 0 4rem 4rem;
  cursor: pointer;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  transition: all 0.2s;
}
@media only screen and (max-width: 790px) {
  .form__btn {
    margin: 2.8rem 4rem 4rem 4rem;
  }
}
.form__btn:focus {
  outline: 0;
}
.form__btn:hover {
  background-color: #5162fe;
}
.form__btn > * {
  transition: all 0.4s;
  transition-delay: 1s;
  display: inline-block;
}
.form__btn--invisible {
  position: absolute;
  width: 100%;
  left: 0;
  top: -100%;
}
.form__btn--invisible.visible {
  top: 11px;
}
.form__btn--visible {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form__btn--visible.invisible {
  transform: translateY(200%);
}

/*  MAIL ICON  */
.container-mail {
  grid-column: 2/3;
  grid-row: 2/6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 31rem;
  height: 28rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 790px) {
  .container-mail {
    grid-column: 1/2;
    grid-row: 6/7;
    height: 12rem;
    margin-top: 4rem;
    justify-self: center;
  }
}

.mail {
  position: relative;
  top: -4rem;
  left: -6rem;
}
@media only screen and (max-width: 790px) {
  .mail {
    left: -27%;
    top: -5rem;
  }
}
.mail__top {
  position: absolute;
  top: -5.7rem;
  width: 0;
  height: 0;
  border-right: 8rem solid transparent;
  border-left: 8rem solid transparent;
  border-bottom: 5.8rem solid #ffab17;
  z-index: 0;
}
.mail__top.closed {
  transition: transform 0.6s 0.8s, z-index 0.2s 0.4s;
  z-index: 2;
  transition-delay: 0.5s;
  transform-origin: bottom left;
  transform: rotate3d(1, 0, 0, 180deg);
}
.mail__back {
  position: absolute;
  background: #ffab17;
  width: 16rem;
  height: 10rem;
  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
}
.mail__left {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8rem solid #ffc867;
  border-top: 5rem solid transparent;
  border-bottom: 5rem solid transparent;
}
.mail__right {
  position: absolute;
  left: 8rem;
  width: 0;
  height: 0;
  border-right: 8rem solid #ffc867;
  border-top: 5rem solid transparent;
  border-bottom: 5rem solid transparent;
}
.mail__bottom {
  position: absolute;
  top: 4.92rem;
  width: 0;
  height: 0;
  border-right: 8rem solid transparent;
  border-left: 8rem solid transparent;
  border-bottom: 5.08rem solid #ffbb43;
}
.mail__letter {
  position: absolute;
  top: -4rem;
  left: 2rem;
  width: 12rem;
  height: 9rem;
  background: #fff;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: all 0.8s ease;
}
.mail__letter.move {
  transform: translateY(45px);
}
.mail__letter * {
  background: #e0e0e0;
}
.mail__letter-square {
  position: absolute;
  top: 3rem;
  left: 1rem;
  width: 3.8rem;
  height: 4rem;
}
.mail__letter-square::before {
  content: "";
  position: absolute;
  top: -2rem;
  width: 10rem;
  height: 1.5rem;
  background: inherit;
}
.mail__letter-lines {
  top: 4.9rem;
  left: 5.8rem;
}
.mail__letter-lines, .mail__letter-lines::before, .mail__letter-lines::after {
  content: "";
  position: absolute;
  width: 5rem;
  height: 0.3rem;
  background: #e0e0e0;
}
.mail__letter-lines::before {
  top: -1rem;
}
.mail__letter-lines::after {
  top: 1rem;
}
</style>
</head>
<body>
  <div class="center">
  <div class="container">
  
      <h1 class="title">Contact first ☝️</h1>
    
      <div class="form form__1">
        <label for="name" class="form__label">Full name</label>
        <input type="text" class="form__input" placeholder="" id="name" required>
      </div>
    
      <div class="form form__2">
        <label for="email" class="form__label">Email address</label>
        <input type="email" class="form__input" placeholder="" id="email" required>
      </div>
    
      <div class="form form__3">
        <label for="message" class="form__label">Your message</label>
        <input type="text" class="form__input" placeholder="" id="message" required>
      </div>
    
      <button class="form__btn">
        <span class="form__btn--visible"><p>Submit</p> 
          <i class="material-icons">arrow_forward</i>
        </span>
        <span class="form__btn--invisible">Message sent!</span>
      </button>
  
    <div class="container-mail">
      <div class="mail">
        <div class="mail__back"></div>
        <div class="mail__top"></div>
        <div class="mail__letter">
          <div class="mail__letter-square">
          </div>
          <div class="mail__letter-lines">
          </div>
        </div>
        <div class="mail__left"></div>
        <div class="mail__right"></div>
        <div class="mail__bottom"></div>
      </div>
    </div>
    
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script id="rendered-js" >
$('.form__btn').click(function () {
  $('.mail__letter').toggleClass('move');
  $('.mail__top').toggleClass('closed');
  $('.form__btn--invisible').toggleClass('visible');
  $('.form__btn--visible').toggleClass('invisible');
});

$('input').focus(function () {
  $(this).parent().addClass('active');
  $('input').focusout(function () {
    if ($(this).val() == '') {$(this).parent().removeClass('active');
    } else {$(this).parent().addClass('active');
    }
  });
});
    </script>
</body>
</html>

4. By Stephan Peralta

Made by Stephan Peralta. Simple Contact form with Pop down animation and Email Validation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
  
<style>
.fl{float:left;}
.fr{float:right;}
.clr{clear:both;height:0;width:0;min-height:0;visibility:hidden;overflow:hidden;display:block;}
.fc:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
body {background:#ebeae2; font-family:Arial, Helvetica, sans-serif ;}
.form-wrapper { width:300px; margin:20px auto; }
.form-wrapper .form-header {  background:#333345;border-radius: 5px 5px 0px 0px;box-sizing:border-box; -moz-box-sizing:border-box; padding:10px 17px;}
.form-wrapper .form-header h1 { font-size:17px; color:#fff; display:inline; font-weight:100; margin-top:5px;}
.form-wrapper .form-header span {font-size: 18px;display: inline-block;padding: 3px 10px 4px 10px;background:#252536; border-radius: 4px; color:#fff; cursor:pointer;}
.form-wrapper .form-container{ background:#fefefe; padding:25px 30px 12px 30px;box-sizing:border-box; -moz-box-sizing:border-box; }
.field .user-icon-user { display:inline-block; width:50px; height:45px;border-radius: 5px 0px 0px 5px; transition:ease-in-out 0.3s; -webkit-transition:ease-in-out 0.3s;-moz-transition::ease-in-out 0.3s; -ms-transition:ease-in-out 0.3s;-o-transition:ease-in-out 0.3s; background:#dedede url("http://s-peralta.ca/html5/btn.png"); background-repeat:no-repeat;background-position: -51px 11px;}
.field .user-icon-pword { display:inline-block; width:50px; height:45px;border-radius: 5px 0px 0px 5px; transition:ease-in-out 0.3s; -webkit-transition:ease-in-out 0.3s;-moz-transition::ease-in-out 0.3s; -ms-transition:ease-in-out 0.3s;-o-transition:ease-in-out 0.3s; background:#dedede url("http://s-peralta.ca/html5/btn.png"); background-repeat:no-repeat;background-position: -51px -42px;}
.field{ margin-bottom:20px;}
.field input {width: 190px;height: 45px;box-sizing:border-box; -moz-box-sizing:border-box; font-size:16px; padding:10px; border-radius: 0px 5px 5px 0px;border: 1px solid #ccc; border-left:none; color:#a09f9f;}
.form-footer { background:#f4f4f4; border-radius: 0px 0px 5px 5px; border-top:1px dotted #e2e0de;box-sizing:border-box; -moz-box-sizing:border-box;  padding:15px 20px;}
.form-footer a { display: block;background:#677ec9;border-radius: 3px;padding: 10px 20px;color: #fff;font-size: 16px; cursor:pointer;}
.field .error {  background-color:#ea463c !important;box-sizing:border-box; -moz-box-sizing:border-box;background-position:-98px 11px;}
.field .accept {  background-color:#0C6 !important;box-sizing:border-box; -moz-box-sizing:border-box; background-position:0px 11px;}
.field.field-password { background-position:-51px 11px}
.field.field-password .accept {background-position: 0 -42px;}
.field.field-password .error {background-position: -98px -42px;}
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
	}	
	80% {
		-webkit-transform: translateY(-10px);
	}	
	100% {
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		-moz-transform: translateY(30px);
	}	
	80% {
		-moz-transform: translateY(-10px);
	}
	
	100% {
		-moz-transform: translateY(0);
	}
}
@-o-keyframes bounceInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		-o-transform: translateY(30px);
	}	
	80% {
		-o-transform: translateY(-10px);
	}	
	100% {
		-o-transform: translateY(0);
	}
}
@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}
	60% {
		opacity: 1;
		transform: translateY(30px);
	}
	80% {
		transform: translateY(-10px);
	}	
	100% {
		transform: translateY(0);
	}
}
.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
	list-style:none
}
</style>
</head>
<body>
  <div class="form-wrapper animated bounceInDown">
	<div class="form-header fc">
    	<h1 class="fl">SIGN IN</h1>
        <span class="fr exit">x</span>
    </div>
    <div class="form-container">
    	<form>
        	<div class="field fc">
            	<span class="user-icon-user  fl"></span>
                <input class="fl" name="fname" type="text" placeholder="User Name" />
            </div>
            <div class="field field-password fc">
            	<span class="user-icon-pword fl"></span>
                <input class="fl" name="lname" type="password" placeholder="User Password" />
            </div>
           
        </form>
    </div>
    <div class="form-footer fc">
    	<div class="fl">
        </div>
        <a class="fr btn-primary ">SEND</a>
    </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var fname = $("[name='fname']"),
  lname = $("[name='lname']"),
  user = $(".user-icon-user"),
  password = $(".user-icon-pword");
  fname.keyup(function () {
    if (fname.val().length > 4) {
      user.
      removeClass('error').
      addClass('accept');
    }
    if (!$(this).val()) {
      user.
      removeClass('accept');
    }
  });
  lname.keyup(function () {
    if (lname.val().length > 4) {
      password.
      removeClass('error').
      addClass('accept');
    }
    if (!$(this).val()) {
      password.
      removeClass('accept');

    }
  });
  $(".btn-primary").click(function (e) {
    e.preventDefault();
    if (fname.val().length < 2) {
      //fname.css("border", "1px solid red")
      user.
      removeClass('accept').
      addClass('error');

    };
    if (lname.val().length === 0) {
      //fname.css("border", "1px solid red")
      password.
      removeClass('accept').
      addClass('error');
    };
    if (user.hasClass("accept") && password.hasClass("accept")) {
      alert("Your Form is Sent");
    };
  });

  $(".exit").click(function () {
    $(".form-wrapper").fadeOut();
    $(".form-wrapper").fadeIn();
    user.removeClass('accept , error');
    password.removeClass('accept , error');
  });
});
    </script>
</body>
</html>

5. By Michal Niewitala

Made by Michal Niewitala. Minimalistic JavaScript contact form with infield and floating labels. Source

JavaScript Contact Form by Micheal Niewitala
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,600'>
<style>
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-feature-settings: "liga", "kern";
  font-family: "Montserrat", "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
}

.fadein {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.fadein.lazyloaded {
  opacity: 1;
}

.blur-up {
  will-change: filter, opacity, transform;
  filter: blur(3px);
  transition: transform 1s, opacity 1s, blur 0.3s;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: center;
}
.blur-up:not(.lazyload) {
  opacity: 1;
  transform: scale(1);
}
.blur-up.lazyloaded {
  filter: blur(0);
}

.spinner {
  background: rgba(0, 0, 0, 0.03) url("../images/ui/spinner.svg") no-repeat center;
}

::-moz-selection {
  color: white;
  background: black;
  text-shadow: none;
}

::selection {
  color: white;
  background: black;
  text-shadow: none;
}

.custom-background:after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  z-index: -3;
  background-attachment: scroll;
  min-height: 100vh;
  height: calc(100vw * 16 / 9);
}
@media (orientation: landscape) {
  .custom-background:after {
    height: calc(100vw * 3 / 4);
  }
}

[id=footer] .container > *:first-child:not(img):not(form):not(figure):not(div), [id=sidebar] > * > *:first-child:not(img):not(form):not(figure):not(div), [id=wrapper] .page-header > *:first-child:not(img):not(form):not(figure):not(div) {
  margin-top: -0.25em;
}
[id=footer] .container > *:last-child:not(img):not(form):not(figure):not(div), [id=sidebar] > * > *:last-child:not(img):not(form):not(figure):not(div), [id=wrapper] .page-header > *:last-child:not(img):not(form):not(figure):not(div) {
  margin-bottom: -0.25em;
}

[id=sidebar] a {
  position: relative;
  display: inline-block;
}
[id=sidebar] a:before, [id=sidebar] a:after {
  content: "";
  position: absolute;
  top: -0.5em;
  right: -0.75em;
  bottom: -0.5em;
  left: -0.75em;
  display: block;
}
[id=sidebar] a:before {
  transform-origin: right 0;
  transform: scaleX(0);
  transition: transform 0.3s, transform-origin 0.3s;
  background: black;
  z-index: -1;
}
[id=sidebar] a:hover {
  color: white;
  transition: color 0.15s 0.15s;
}
[id=sidebar] a:hover:before {
  transform-origin: left 0;
  transform: scaleX(1);
  transition: transform-origin 0s, transform 0.3s;
}
[id=sidebar] a:hover:after {
  z-index: 1;
}

.form .button, .form .label, .form .textarea, .form .text-input {
  padding: 0.75em 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  line-height: normal;
  border-radius: 0;
  border: none;
}

[id=sidebar] > * {
  position: relative;
}
[id=sidebar] > :before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: calc((.75rem + 1.25vw)*-1);
  z-index: -2;
  transition: background 0.2s ease;
  background-color: rgba(255, 255, 255, 0);
}
[id=sidebar] > :hover:before, [id=sidebar] > :focus:before {
  background-color: white;
}

.single [id=main] {
  position: relative;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}
.single [id=main]:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc((.75rem + 1.25vw)*-1);
  background: white;
}

h1, h2, fieldset legend, h3, h4, h5, h6 {
  margin: 1rem 0;
  font-family: "Montserrat", "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
h1:not([class]), h2:not([class]), fieldset legend:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]) {
  max-width: 60rem;
}

h1 {
  font-weight: 600;
  line-height: 1.25;
}
h1 {
  font-size: 1.2961572031rem;
}
@media screen and (min-width: 37.5rem) {
  h1 {
    font-size: calc(1.2961572031rem + 1.8611773152 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h1 {
    font-size: 3.1573345183rem;
  }
}

h2, fieldset legend {
  font-weight: 600;
  line-height: 1.375;
}
h2, fieldset legend {
  font-size: 1.214767763rem;
}
@media screen and (min-width: 37.5rem) {
  h2, fieldset legend {
    font-size: calc(1.214767763rem + 1.153825274 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h2, fieldset legend {
    font-size: 2.368593037rem;
  }
}

h3 {
  font-weight: 500;
}
h3 {
  font-size: 1.138489rem;
}
@media screen and (min-width: 37.5rem) {
  h3 {
    font-size: calc(1.138489rem + 0.6384 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h3 {
    font-size: 1.776889rem;
  }
}

h4 {
  font-weight: 500;
}
h4 {
  font-size: 1.067rem;
}
@media screen and (min-width: 37.5rem) {
  h4 {
    font-size: calc(1.067rem + 0.266 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h4 {
    font-size: 1.333rem;
  }
}

h5 {
  font-weight: 500;
}
h5 {
  font-size: 1rem;
}
@media screen and (min-width: 37.5rem) {
  h5 {
    font-size: calc(1rem + 0 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h5 {
    font-size: 1rem;
  }
}

h6 {
  font-weight: 500;
}
h6 {
  font-size: 0.9372071228rem;
}
@media screen and (min-width: 37.5rem) {
  h6 {
    font-size: calc(0.9372071228rem + -0.1870195759 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h6 {
    font-size: 0.7501875469rem;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus {
  outline: none;
}

small {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  pre {
    overflow: hidden;
  }
}

p, ul, dl, ol, blockquote {
  margin: 1.25em 0;
}
p:not([class]), ul:not([class]), dl:not([class]), ol:not([class]), blockquote:not([class]) {
  max-width: 60rem;
}

ul {
  list-style-type: square;
}

hr {
  border: none;
  border-bottom: 2px dashed black;
  margin: calc(.75rem + 1.25vw) 0;
}

fieldset {
  border: 1rem solid rgba(0, 0, 0, 0.02);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: calc(.75rem + 1.25vw);
}
fieldset legend {
  border: 1rem solid rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
  background-color: white;
  padding: 0.25em 0.5em;
}
fieldset > * {
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: 0;
}
figure[style] {
  max-width: 100%;
}

img, svg {
  max-width: 100%;
  height: auto;
  border: 0;
}

table {
  background: rgba(0, 0, 0, 0.02);
  width: 100%;
}
table th, table td {
  padding: 0.75em 1em;
}
table th:not(:last-child), table td:not(:last-child) {
  border-right: 0.5rem solid white;
}
table tr:not(:last-child) td, table tr:not(:last-child) th {
  border-bottom: 0.5rem solid white;
}
table th {
  background: rgba(0, 0, 0, 0.02);
}
table td {
  font-size: 0.875em;
}
table th, table caption {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
}
table caption {
  padding: 1.25em 0.5em 0;
}

ol, ul {
  padding: 0;
  list-style-position: inside;
}
ol li + li, ul li + li {
  margin-top: 0.5em;
}

[id=main] .entry {
  font-family: "PT Serif", serif;
}
[id=main] .entry a {
  text-decoration: underline;
}

.single-format-gallery [id=sidebar], .page-template-gallery [id=sidebar], body:not(.has-gallery):not(.single-format-gallery):not(.page-template-gallery) [id=wrapper], .container {
  max-width: 100rem;
  padding-left: calc(.75rem + 1.25vw);
  padding-right: calc(.75rem + 1.25vw);
  margin-left: auto;
  margin-right: auto;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

[id=wrapper] {
  flex: 1;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: calc(.75rem + 1.25vw);
  padding-bottom: calc((.75rem + 1.25vw)*2);
}
@media (min-width: 1020px) {
  body:not(.has-gallery) [id=wrapper], body:not(.single-format-gallery) [id=wrapper], [id=wrapper] body:not(.page-template-gallery) {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
}
[id=wrapper] > * + * {
  margin-top: calc((.75rem + 1.25vw)*2);
}
.has-gallery [id=wrapper], .has-gallery [id=wrapper] main, .single-format-gallery [id=wrapper], .single-format-gallery [id=wrapper] main, .page-template-gallery [id=wrapper], .page-template-gallery [id=wrapper] main {
  padding-top: 0;
  max-width: none;
}
[id=wrapper] .gallery-grid:first-child {
  padding-top: calc((.75rem + 1.25vw)*2);
}
[id=wrapper] .gallery-grid:last-child {
  padding-bottom: calc((.75rem + 1.25vw)*2);
}
[id=wrapper] .page-header {
  text-align: center;
  margin-bottom: calc((.75rem + 1.25vw)*2);
  text-transform: uppercase;
}

@media (min-width: 1020px) {
  [id=main] {
    width: calc(100% - 280px + ((.75rem + 1.25vw)*-1*2));
    margin-right: calc((.75rem + 1.25vw)*2);
  }
  [id=main]:only-child, .single-format-gallery [id=main], .page-template-gallery [id=main] {
    width: 100%;
    margin-right: 0;
  }
}
.single [id=main]:not(:only-child) + * {
  margin-left: calc((.75rem + 1.25vw)*2);
}
[id=main] > * + * {
  margin-top: calc((.75rem + 1.25vw)*3);
}

[id=sidebar] {
  font-size: 0.75em;
  transition: color 0.15s 0.15s;
}
@media (min-width: 1020px) {
  body:not(.single-format-gallery):not(.page-template-gallery) [id=sidebar] {
    width: calc(280px);
    margin-top: 0;
  }
}
[id=sidebar] > * + * {
  margin-top: calc((.75rem + 1.25vw)*2);
}
@media (min-width: 640px) and (max-width: 769px) {
  [id=sidebar] {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  [id=sidebar] > [class*=search] {
    width: 100%;
  }
  [id=sidebar] > *:not([class*=search]) {
    width: calc((100% - 1.5rem - 3vw)/2);
  }
}
[id=sidebar] h1, [id=sidebar] h2, [id=sidebar] fieldset legend, fieldset [id=sidebar] legend {
  font-size: 1.25em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid;
  padding-bottom: 0.5rem;
}
[id=sidebar] li {
  display: block;
  padding-left: calc(.75rem + 1.25vw);
  position: relative;
}
[id=sidebar] li:before {
  content: "";
  position: absolute;
  top: calc(.75em - 1px);
  left: 0;
  border-top: 2px solid;
  width: 4px;
}
@media (min-width: 770px) {
  .single-format-gallery [id=sidebar], .page-template-gallery [id=sidebar] {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
  }
  .single-format-gallery [id=sidebar] > *[class*=search], .page-template-gallery [id=sidebar] > *[class*=search] {
    width: 100%;
  }
  .single-format-gallery [id=sidebar] > *:not([class*=search]), .page-template-gallery [id=sidebar] > *:not([class*=search]) {
    width: calc((100% - (.75rem + 1.25vw)*8) / 4);
  }
  .single-format-gallery [id=sidebar] > *, .page-template-gallery [id=sidebar] > * {
    margin: calc(.75rem + 1.25vw);
  }
}
[id=sidebar].background--dark, [id=sidebar].background--complex, .background--dark [id=sidebar] {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[id=sidebar].background--dark > *:hover, [id=sidebar].background--complex > *:hover, .background--dark [id=sidebar] > *:hover {
  color: black;
  text-shadow: none;
}

[id=footer] {
  text-align: center;
  position: relative;
}
[id=footer] .container {
  padding: calc((.75rem + 1.25vw)*2) 0;
  min-height: 100%;
  box-sizing: border-box;
}
[id=footer] .container:after {
  left: auto;
  right: calc(.75rem + 1.25vw);
}
[id=footer] .container > * {
  display: block;
}
[id=footer] .container > * + * {
  margin-top: calc(.75rem + 1.25vw);
}
[id=footer] .footer-title {
  font-weight: 600;
  font-size: 1.5em;
}
[id=footer] .footer-entry {
  text-transform: uppercase;
  font-size: 0.75em;
}
[id=footer] .container {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[id=footer] .container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("images/ui/target.svg") no-repeat left top, url("images/ui/target.svg") no-repeat right top, url("images/ui/target.svg") no-repeat left bottom, url("images/ui/target.svg") no-repeat right bottom;
  margin: 0 -16px -16px;
  z-index: -1;
}
.custom-background [id=footer] {
  height: 100vh;
  overflow: visible;
}
.custom-background [id=footer] .container {
  display: flex;
  flex-direction: column;
}
.custom-background [id=footer] .container:before {
  margin: calc(.75rem + 1.25vw);
  background-image: url("http://dev.mobilemarkup.com/calibration/wp-content/themes/calibration/assets/images/ui/target-background.svg");
  background-size: contain;
  background-position: center;
}
.custom-background [id=footer] .container > *:first-child {
  margin-top: auto !important;
}
[id=footer].background--dark, .background--dark [id=footer] {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.form .button, .form .label, .form .textarea, .form .text-input {
  padding: 1em 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  line-height: normal;
  border: 1px solid transparent;
  border-radius: 0;
}

.form .textarea, .form .text-input {
  font: inherit;
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding-left: 0;
  border-bottom-color: rgba(0, 0, 0, 0.3);
  background: transparent;
  outline: none;
  color: black;
}
.form .textarea:placeholder, .form .text-input:placeholder {
  color: rgba(0, 0, 0, 0.7);
}
.form .textarea:-webkit-autofill, .form .text-input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
  border-top-color: white;
  border-left-color: white;
  border-right-color: white;
}
.form .error.textarea, .form .error.text-input, .error .form .textarea, .form .error .textarea, .error .form .text-input, .form .error .text-input {
  border-color: transparent transparent red transparent;
}
.form:not(.has-floated-label) .textarea:active, .form:not(.has-floated-label) .text-input:active, .form:not(.has-floated-label) .textarea:focus, .form:not(.has-floated-label) .text-input:focus {
  border-color: transparent transparent black transparent;
}

.form .label {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  padding-left: 0;
}

.form .label {
  top: 0;
  left: 0;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.3s;
}
.active .form .label, .form .active .label {
  font-size: 0.75em;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  color: rgba(0, 0, 0, 0.7);
  background: white;
}
.focus .form .label, .form .focus .label {
  color: black;
}

.form.has-floated-label .field:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 1px solid black;
  transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.form.has-floated-label .field.focus:after {
  width: 100%;
}

.form .button {
  font: inherit;
  line-height: normal;
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1428571429em;
}
.form .button:hover, .form .button:focus, .form .button:active {
  color: white;
  background: black;
}
.form .button:active {
  position: relative;
  top: 1px;
  left: 1px;
}

.form {
  max-width: 50em;
  margin: 0 auto;
  padding: 1em 2em;
  box-sizing: border-box;
  overflow: hidden;
}
.form .field {
  position: relative;
  width: 100%;
  margin-bottom: 1.5em;
  float: left;
}
@media screen and (min-width: 40em) {
  .form .field.half {
    width: calc(50% - 2em);
    margin-right: 2em;
  }
  .form .field.half + .half {
    margin-left: 2em;
    margin-right: 0;
  }
}
.form .field:last-child {
  float: right;
  width: auto;
}
.form .textarea {
  max-width: 100%;
}
svg path {
  fill: black;
}
</style>
</head>
<body>
  <div id='wrapper'>
  <form action='' class='form'>
    <p class='field required half'>
      <label class='label required' for='name'>Name</label>
      <input class='text-input' id='name' name='name' required type='text'>
    </p>
    <p class='field required half'>
      <label class='label' for='email'>E-mail</label>
      <input class='text-input' id='email' name='email' required type='email'>
    </p>
    <p class='field'>
      <label class='label' for='message'>Message</label>
      <textarea class='textarea' cols='50' id='message' name='message' required rows='4'></textarea>
    </p>
    <p class='field'>
      <input class='button' type='submit' value='Send message'>
    </p>
  </form>
</div>
      <script>
(function() {
  var floatingLabel;

  floatingLabel = class floatingLabel {
    constructor(form, options = {}) {
      var event, i, input, j, label, len, len1, ref, ref1;
      if (!form) {
        return;
      }
      options.focusClass || (options.focusClass = "focus");
      options.activeClass || (options.activeClass = "active");
      options.errorClass || (options.errorClass = "error");
      form.classList.add('has-floated-label');
      ref = form.querySelectorAll('label');
      for (i = 0, len = ref.length; i < len; i++) {
        label = ref[i];
        if (!(input = document.querySelector(`#${label.getAttribute('for')}`))) {
          return;
        }
        ref1 = ['keyup', 'input', 'change'];
        for (j = 0, len1 = ref1.length; j < len1; j++) {
          event = ref1[j];
          input.addEventListener(event, function() {
            this.parentNode.classList.remove(options.errorClass);
            return this.parentNode.classList.toggle(options.activeClass, !!this.value);
          });
        }
        input.addEventListener('focus', function() {
          return this.parentNode.classList.add(options.focusClass);
        });
        input.addEventListener('blur', function() {
          return this.parentNode.classList.remove(options.focusClass);
        });
        input.parentNode.classList.toggle(options.activeClass, !!input.value);
      }
    }

  };
  window.floatingLabel = new floatingLabel(document.querySelector('.form'));

}).call(this);
    </script>
</body>
</html>

6. By Vishal Prajapati

Made by Vishal Prajapati. Contact form with Mail animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  padding: 0;
  margin: 0;
}

*, *:after, *:before {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, hr, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, select, input, button, textarea, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  font-weight: inherit;
  font-style: normal;
}

a {
  text-decoration: none;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

:focus {
  outline: 0;
}

a {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a img {
  border: none;
}

button {
  cursor: pointer;
}

strong {
  font-weight: bold;
}

/* reset */
html, body {
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

body {
  background-color: #29384c;
  position: relative;
}

.main {
  padding: 2% 0;
  perspective: 1200px;
}
.main .form .formwrap {
  width: 500px;
  margin: 0 auto;
  position: relative;
  transition: all 0.8s cubic-bezier(1, 0, 0, 1);
  transform-style: preserve-3d;
  z-index: 5;
}
.main .form .formwrap.go {
  transform: scaleX(0.9) translateY(270px);
  z-index: 0;
}
.main .form .submit {
  margin: 30px auto;
  color: #fff;
  background-color: #4a6cc7;
  border: 0;
  border-radius: 3px;
  width: 200px;
  padding: 20px;
  font-size: 20px;
  text-transform: uppercase;
  display: block;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: all 0.3s ease-out;
}
.main .form .submit.active {
  opacity: 0;
  visibility: hidden;
}
.main .form fieldset {
  padding: 20px 40px;
  background-color: #fff;
  border-radius: 3px;
  margin-top: -4px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transition: all 0.3s ease-out;
  overflow: hidden;
}
.main .form fieldset label, .main .form fieldset input, .main .form fieldset textarea {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  width: 100%;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
}
.main .form fieldset label {
  color: #8a9daf;
  font-size: 14px;
}
.main .form fieldset input, .main .form fieldset textarea {
  padding: 5px;
  color: #3e5e7c;
  border-bottom: 1px solid #c5e1e3;
}
.main .form fieldset textarea {
  height: 2em;
  border-bottom: 0;
}
.main .form fieldset:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: rotateY(180deg);
  transition: all 0.3s ease-out;
  z-index: 1;
}
.main .form fieldset:nth-child(1) {
  transition-delay: 1s;
  z-index: 3;
}
.main .form .fold {
  position: relative;
  transition: all 0.3s ease-out;
  transition-delay: 0.5s;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  z-index: 3;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.main .letterBox {
  width: 500px;
  height: 280px;
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
  transform-style: preserve-3d;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease-out;
}
.main .letterBox.active.fold .top {
  transform: translateY(-100%) rotateX(-175deg);
  transition-delay: 0;
}
.main .letterBox .top {
  position: absolute;
  width: 100%;
  height: 58%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transform: translateY(-98%);
  transform: translateY(-98%) rotateX(175deg);
  transition: all 0.6s 0.3s ease-out;
}
.main .letterBox .top:before {
  content: "";
  width: 0;
  height: 0;
  border-right: 250px solid transparent;
  border-left: 250px solid transparent;
  border-bottom: 140px solid #284083;
}
.main .letterBox .front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}
.main .letterBox .front:before, .main .letterBox .front:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.main .letterBox .front:before {
  border-right: 500px solid transparent;
  border-bottom: 280px solid #4a6cc7;
}
.main .letterBox .front:after {
  border-left: 500px solid transparent;
  border-bottom: 280px solid #3e60b6;
}
.main.active fieldset:nth-child(1) {
  transform: rotateX(-179deg) translateY(4px);
  box-shadow: 0 0 2px #ddd;
  transition-delay: 0s;
}
.main.active .fold {
  transform: rotateX(-179deg) translateY(4px);
  transition-delay: 0.5s;
}
.main.active .letterBox {
  opacity: 1;
  transform: scale(1);
}
.main.active .letterBox .top {
  transform: translateY(-98%);
}
.main.active.go {
  perspective: 0px;
}
.main.active.go .letterBox {
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  transition: all 0.6s cubic-bezier(1, 0, 0, 1);
}
.main.active.go .formwrap {
  opacity: 0;
  transform-origin: center center;
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}
</style>
</head>
<body>
  <div class="main">
		<form action="lorem.php" class="form">
			<div class="formwrap">
				<div class="fold">
					<fieldset>
						<label for="nm">Name</label>
						<input type="text" name="nm" id="nm" value="John Deo" placeholder="Name">
					</fieldset>
					<fieldset>
						<label for="ml">Email</label>
						<input type="text" name="ml" id="ml" value="[email protected]" placeholder="Email">
					</fieldset>
				</div>
				<fieldset>
					<label for="ms">Message</label>
					<textarea name="ms" id="ms" cols="30" rows="10" placeholder="Message">Hey!</textarea>
				</fieldset>
			</div>
			<button class="submit">Send</button>
			<div class="letterBox">
				<span class="top"></span>
				<span class="front"></span>
			</div>
		</form>
	</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.submit').click(function (event) {
  event.preventDefault();
  $(this).addClass('active');
  $('.main').addClass('active');
  setTimeout(function () {
    $('.letterBox').addClass('active');
    $('.formwrap').addClass('go');
  }, 1000);
  setTimeout(function () {
    $('.letterBox').addClass('fold');
  }, 1300);
  setTimeout(function () {
    $('.main').addClass('go');
  }, 2400);
});
    </script>
</body>
</html>

7. By CrocoDillon

Made by CrocoDillon. Simple Form with Success Animation made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Michroma|Ubuntu:300,300italic,400'>
<style>
html {
  font: 300 100%/1.5 Ubuntu, sans-serif;
  color: #333;
  overflow-x: hidden;
}
h2 {
  margin: 0;
  color: #8495a5;
  font-size: 2.5em;
  font-weight: 300;
}
#contact-form {
  max-width: 1208px;
  max-width: 75.5rem;
  margin: 0 auto;
}
#contact, label, input[name="submit"] {
  position: relative;
}
label > span, input, textarea, button {
  box-sizing: border-box;
}
label {
  display: block;
}
label > span {
  display: none;
}
input, textarea, button {
  width: 100%;
  padding: 0.5em;
  border: none;
  font: 300 100%/1.2 Ubuntu, sans-serif;
}
input[type="text"], input[type="email"], textarea {
  margin: 0 0 1em;
  border: 1px solid #ccc;
  outline: none;
}
input.invalid, textarea.invalid {
  border-color: #d5144d;
}
textarea {
  height: 6em;
}
input[type="submit"], button {
  background: #a7cd80;
  color: #333;
}
input[type="submit"]:hover, button:hover {
  background: #91b36f;
}
@media screen and (min-width: 30em) {
  #contact-form h2 {
    margin-left: 26.3736%;
    font-size: 2em;
    line-height: 1.5;
  }
  label > span {
    vertical-align: top;
    display: inline-block;
    width: 26.3736%;
    padding: 0.5em;
    border: 1px solid transparent;
    text-align: right;
  }
  input, textarea, button {
    width: 73.6263%;
    line-height: 1.5;
  }
  textarea {
    height: 10em;
  }
  input[type="submit"], button {
    margin-left: 26.3736%;
  }
}
@media screen and (min-width: 48em) {
  #contact-form {
    text-align: justify;
    line-height: 0;
  }
  #contact-form:after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  #contact-form h2 {
    margin-left: 17.2661%;
  }
  #contact-form form, #contact-form aside {
    vertical-align: top;
    display: inline-block;
    width: 65.4676%;
    text-align: left;
    line-height: 1.5;
  }
  #contact-form aside {
    width: 30.9353%;
  }
}
</style>
</head>
<body>
  <section id="contact-form">
  <h2>Contact</h2>
  <form id="contact" name="contact" accept-charset="utf-8">
    <label><span>Name</span><input name="name" type="text" placeholder="Name"/></label>
    <label><span>Email</span><input name="email" type="email" placeholder="Email"/></label>
    <label><span>Message</span><textarea name="message" placeholder="Message"></textarea></label>
    <input name="submit" type="submit" value="Send"/>
  </form>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var form = $('#contact'),
submit = form.find('[name="submit"]');

form.on('submit', function (e) {
  e.preventDefault();

  // avoid spamming buttons
  if (submit.attr('value') !== 'Send')
  return;

  var valid = true;
  form.find('input, textarea').removeClass('invalid').each(function () {
    if (!this.value) {
      $(this).addClass('invalid');
      valid = false;
    }
  });

  if (!valid) {
    form.animate({ left: '-3em' }, 50).
    animate({ left: '3em' }, 100).
    animate({ left: '0' }, 50);
  } else {
    submit.attr('value', 'Sending...').
    css({ boxShadow: '0 0 200em 200em rgba(225, 225, 225, 0.6)',
      backgroundColor: '#ccc' });
    // simulate AJAX response
    setTimeout(function () {
      // step 1: slide labels and inputs
      // when AJAX responds with success
      // no animation for AJAX failure yet
      form.find('label').
      animate({ left: '100%' }, 500).
      animate({ opacity: '0' }, 500);
    }, 1000);
    setTimeout(function () {
      // step 2: show thank you message after step 1
      submit.attr('value', 'Thank you :)').
      css({ boxShadow: 'none' });
    }, 2000);
    setTimeout(function () {
      // step 3: reset
      form.find('input, textarea').val('');
      form.find('label').
      css({ left: '0' }).
      animate({ opacity: '1' }, 500);
      submit.attr('value', 'Send').
      css({ backgroundColor: '' });
    }, 4000);
  }
});
    </script>
</body>
</html>

8. By Danny Holmes

Made by Danny Holmes. Responsive Popup Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

/* Body */

body {
  background: #fff;
}

body,
input,
select,
textarea {
  background: none;
  color: #646464;
  font-family: "Lato", Helvetica, sans-serif;
  font-size: 15pt;
  font-weight: 300;
  line-height: 1.75em;
}

input,
textarea {
  border: none !important;
  outline: none !important;
  resize: none !important;
  width: 100% !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

h2,
h3 {
  color: #545454;
  font-weight: 700;
  line-height: 1.5em;
  margin: 0 0 1em 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.25em;
}

ul {
  list-style: disc;
  margin: 0 0 2em 0;
  padding-left: 1em;
}

ul.actions {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.actions li {
  display: inline-block;
  padding: 0 1em 0 0;
  vertical-align: middle;
}

ul.actions li:last-child {
  padding-right: 0;
}

.contact-container {
  width: 100%;
  /*   padding-top: 20%; */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* Checkbox */

input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;
  width: 1em;
  z-index: -1;
}

input[type="checkbox"] + label {
  text-decoration: none;
  color: #646464;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.4em;
  padding-right: 0.75em;
  position: relative;
}

input[type="checkbox"] + label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

input[type="checkbox"] + label:before {
  background: rgba(144, 144, 144, 0.075);
  border-radius: 0.5em;
  border: solid 1px rgba(144, 144, 144, 0.25);
  content: '';
  display: inline-block;
  height: 1.65em;
  left: 0;
  line-height: 1.58125em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.65em;
}

input[type="checkbox"]:checked + label:before {
  background: #494d53;
  border-color: #494d53;
  color: #ffffff;
  content: '\f00c';
}

input[type="checkbox"]:focus + label:before {
  border-color: #47cdd9;
  box-shadow: 0 0 0 1px #47cdd9;
}

input[type="checkbox"] + label:before {
  border-radius: 0.5em;
}


/* Buttons */

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background-color: transparent;
  border-radius: 0.5em;
  border: solid 1px rgba(144, 144, 144, 0.25) !important;
  color: #545454 !important;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 700;
  height: 3.5em;
  letter-spacing: 0.1em;
  line-height: 3.5em;
  overflow: hidden;
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
  background-color: rgba(144, 144, 144, 0.075);
  color: #545454 !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
.button:active {
  background-color: rgba(144, 144, 144, 0.2);
}

input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
.button.icon {
  padding-left: 1.35em;
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
.button.icon:before {
  margin-right: 0.5em;
}

#submit {
  background: #47cdd9;
  color: #fff !important;
  border-color: #fff !important
}


/* Popup */

.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  overflow-y: auto;
  z-index: 10000;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  overflow-x: hidden;
  border: none;
  position: relative;
  width: 82% !important;
  max-width: 82% !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: #fff;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: none;
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container p {
  margin: 0;
  padding: 3em 1em;
  padding-top: 1em;
}

.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

.cd-close-button {
  color: #545454;
  border-bottom: none;
}

.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 2em auto;
  }
}


/* Contact Form */

label:hover {
  cursor: text !important;
}

.contact-form {
  background: #ffffff !important;
  height: auto;
  margin: 100px auto;
  max-width: 82%;
  overflow: hidden !important;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
  -webkit-box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
  box-shadow: rgba(26, 26, 26, 0.1) 0 1px 3px 0;
}

@media (max-width: 500px) {
  .contact-form {
    margin: 0;
    padding-top: 1em;
    width: 100% !important;
    max-width: 100% !important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
    -webkit-box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
    box-shadow: rgba(26, 26, 26, 0.1) 0 0px 0px 0;
  }
}

.contact-form .email,
.contact-form .message,
.contact-form .name {
  overflow-x: hidden;
  position: relative !important;
  -moz-border-radius: none !important;
  -webkit-border-radius: none !important;
  border-radius: none !important;
}

.contact-form .email input:focus,
.contact-form .email textarea:focus,
.contact-form .message input:focus,
.contact-form .message textarea:focus,
.contact-form .name input:focus,
.contact-form .name textarea:focus {
  background: #f4f5f6 !important;
}

.contact-form .email label,
.contact-form .message label,
.contact-form .name label {
  color: #cbd0d3 !important;
  left: 23px !important;
  position: absolute !important;
  top: 23px !important;
  -moz-transition: all, 150ms !important;
  -o-transition: all, 150ms !important;
  -webkit-transition: all, 150ms !important;
  transition: all, 150ms !important;
}

.contact-form .email.typing label,
.contact-form .message.typing label,
.contact-form .name.typing label {
  color: #3498db !important;
  font-size: 10px !important;
  top: 7px !important;
}

.contact-form .email,
.contact-form .name {
  width: calc(50% - 1px) !important;
}

@media (max-width: 500px) {
  .contact-form .email,
  .contact-form .name {
    width: 100% !important;
  }
}

.contact-form .email input,
.contact-form .name input {
  padding: 23px 0 8px 23px !important;
}

.contact-form .email {
  border-left: 1px #e6e6e6 solid !important;
  float: right !important;
}

@media (max-width: 500px) {
  .contact-form .email {
    border-left: none !important;
    border-top: 1px #e6e6e6 solid !important;
  }
}

.contact-form .message {
  border-bottom: 1px #e6e6e6 solid !important;
  border-top: 1px #e6e6e6 solid !important;
  clear: both !important;
}

.contact-form .message textarea {
  height: 200px !important;
  padding: 23px !important;
}

.contact-form .name {
  float: left !important;
}

.contact-form .submit {
  background: #f4f5f6 !important;
  display: block !important;
  overflow: hidden !important;
  padding: 23px !important;
  margin-bottom: 2em;
}

.contact-form .submit .user-message {
  float: left !important;
  padding-top: 22px !important;
}

@media (max-width: 500px) {
  .contact-form .submit .user-message {
    float: none !important;
    padding: 0 0 10px !important;
  }
}
</style>
</head>
<body translate="no" >
<div class="contact-container">
  <h2>Feel free to get in touch.</h2>
  <ul class="actions">
    <li><a href="#" id="contact" class="button big">Contact Us</a></li>
  </ul>
</div>

<div class="cd-popup contact" role="alert">
  <form name="contactform" id="contactform" class="contact-form">
    <div class="cd-popup-container" style="">
      <p style="">
        <a href="" class="cd-popup-close cd-close-button">
          <i class="fa fa-times" style="pointer-events:none;"></i>
        </a>
      </p>

      <div class="name">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" />
      </div>
      <div class="email">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
      </div>
      <div class="message">
        <label for="message">Message</label>
        <textarea name="message" id="message" name="message"></textarea>
      </div>
      <br>
      <div style="text-align:left">
        <input type="checkbox" id="human" name="human" />
        <label for="human">I am a human and not a robot.</label>
      </div>
      <br>
      <div class="submit">
        <p class="user-message" id="contactblurb"> Questions, suggestions, and general comments are all welcome!</p>
        <input type="submit" name="submit" id="submit" value="Send" />
      </div>
    </div>
  </form>
</div>

<div class="cd-popup notification" role="alert">
  <div class="cd-popup-container">
    <a href="" class="cd-popup-close cd-close-button"><i class="fa fa-times" style="pointer-events:none;"></i></a>
    <p>
      <h3 id="notification-text">Thanks for getting in touch!</h3>
    </p>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Check for valid email syntax
function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function closeForm() {
  document.contactform.name.value = '';
  document.contactform.email.value = '';
  document.contactform.message.value = '';

  $('.email').removeClass('typing');
  $('.name').removeClass('typing');
  $('.message').removeClass('typing');

  $('.cd-popup').removeClass('is-visible');
  $('.notification').addClass('is-visible');
  $('#notification-text').html("Thanks for contacting us!");
}

$(document).ready(function ($) {

  /* ------------------------- */
  /* Contact Form Interactions */
  /* ------------------------- */
  $('#contact').on('click', function (event) {
    event.preventDefault();

    $('#contactblurb').html('Questions, suggestions, and general comments are all welcome!');
    $('.contact').addClass('is-visible');

    if ($('#name').val().length != 0) {
      $('.name').addClass('typing');
    }
    if ($('#email').val().length != 0) {
      $('.email').addClass('typing');
    }
    if ($('#message').val().length != 0) {
      $('.message').addClass('typing');
    }
  });

  //close popup when clicking x or off popup
  $('.cd-popup').on('click', function (event) {
    if ($(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup')) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });

  //close popup when clicking the esc keyboard button
  $(document).keyup(function (event) {
    if (event.which == '27') {
      $('.cd-popup').removeClass('is-visible');
    }
  });

  /* ------------------- */
  /* Contact Form Labels */
  /* ------------------- */
  $('#name').keyup(function () {
    $('.name').addClass('typing');
    if ($(this).val().length == 0) {
      $('.name').removeClass('typing');
    }
  });
  $('#email').keyup(function () {
    $('.email').addClass('typing');
    if ($(this).val().length == 0) {
      $('.email').removeClass('typing');
    }
  });
  $('#message').keyup(function () {
    $('.message').addClass('typing');
    if ($(this).val().length == 0) {
      $('.message').removeClass('typing');
    }
  });

  /* ----------------- */
  /* Handle submission */
  /* ----------------- */
  $('#contactform').submit(function () {
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    var human = $('#human:checked').val();

    if (human) {
      if (validateEmail(email)) {
        if (name) {
          if (message) {
            closeForm();

          } else {
            $('#notification-text').html("<strong>Please let us know what you're thinking!</strong>");
            $('.notification').addClass('is-visible');
          }
        } else {
          $('#notification-text').html('<strong>Please provide a name.</strong>');
          $('.notification').addClass('is-visible');
        }
      } else {
        $('#notification-text').html('<strong>Please use a valid email address.</strong>');
        $('.notification').addClass('is-visible');
      }
    } else {
      $('#notification-text').html('<h3><strong><em>Warning: Please prove you are a human and not a robot.</em></strong></h3>');
      $('.notification').addClass('is-visible');
    }

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

9. By Bobby Korec

Made by Bobby Korec. A simplistic Responsive Contact form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/20ab91acc4.js"></script>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  padding-bottom: 100px;
}

#contact {
  width: 100%;
  height: 100%;
}

.section-header {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0;
  font: 300 60px 'Oswald', sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.contact-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  max-width: 840px;
}

/* Left contact page */
.form-horizontal {
  /*float: left;*/
  max-width: 400px;
  font-family: 'Lato';
  font-weight: 400;
}

.form-control, 
textarea {
  max-width: 400px;
  background-color: #000;
  color: #fff;
  letter-spacing: 1px;
}

.send-button {
  margin-top: 15px;
  height: 34px;
  width: 400px;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.alt-send-button {
  width: 400px;
  height: 34px;
  transition: all .2s ease-in-out;
}

.send-text {
  display: block;
  margin-top: 10px;
  font: 700 12px 'Lato', sans-serif;
  letter-spacing: 2px;
}

.alt-send-button:hover {
  transform: translate3d(0px, -29px, 0px);
}

/* Begin Right Contact Page */
.direct-contact-container {
  max-width: 400px;
}

/* Location, Phone, Email Section */
.contact-list {
  list-style-type: none;
  margin-left: -30px;
  padding-right: 20px;
}

.list-item {
  line-height: 4;
  color: #aaa;
}

.contact-text {
  font: 300 18px 'Lato', sans-serif;
  letter-spacing: 1.9px;
  color: #bbb;
}

.place {
  margin-left: 62px;
}

.phone {
  margin-left: 56px;
}

.gmail {
  margin-left: 53px;
}

.contact-text a {
  color: #bbb;
  text-decoration: none;
  transition-duration: 0.2s;
}

.contact-text a:hover {
  color: #fff;
  text-decoration: none;
}


/* Social Media Icons */
.social-media-list {
  position: relative;
  font-size: 22px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.social-media-list li a {
  color: #fff;
}

.social-media-list li {
  position: relative; 
  display: inline-block;
  height: 60px;
  width: 60px;
  margin: 10px 3px;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  background-color: rgb(27,27,27);
  cursor: pointer; 
  transition: all .2s ease-in-out;
}

.social-media-list li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px #fff;
  transition: all .2s ease-in-out;
}

.social-media-list li:hover {
  background-color: #fff; 
}

.social-media-list li:hover:after {
  opacity: 1;  
  transform: scale(1.12);
  transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
}

.social-media-list li:hover a {
  color: #000;
}

.copyright {
  font: 200 14px 'Oswald', sans-serif;
  color: #555;
  letter-spacing: 1px;
  text-align: center;
}

hr {
  border-color: rgba(255,255,255,.6);
}

/* Begin Media Queries*/
@media screen and (max-width: 850px) {
  .contact-wrapper {
    display: flex;
    flex-direction: column;
  }
  .direct-contact-container, .form-horizontal {
    margin: 0 auto;
  }  
  
  .direct-contact-container {
    margin-top: 60px;
    max-width: 300px;
  }    
  .social-media-list li {
    height: 60px;
    width: 60px;
    line-height: 60px;
  }
  .social-media-list li:after {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}

@media screen and (max-width: 569px) {

  .direct-contact-container, .form-wrapper {
    float: none;
    margin: 0 auto;
  }  
  .form-control, textarea {
    
    margin: 0 auto;
  }
 
  
  .name, .email, textarea {
    width: 280px;
  } 
  
  .direct-contact-container {
    margin-top: 60px;
    max-width: 280px;
  }  
  .social-media-list {
    left: 0;
  }
  .social-media-list li {
    height: 55px;
    width: 55px;
    line-height: 55px;
    font-size: 2rem;
  }
  .social-media-list li:after {
    width: 55px;
    height: 55px;
    line-height: 55px;
  }
  
}

@media screen and (max-width: 410px) {
  .send-button {
    width: 99%;
  }
}
</style>
</head>
<body>
  <section id="contact">
  
  <h1 class="section-header">Contact</h1>
  
  <div class="contact-wrapper">
  
  <!-- Left contact page --> 
    
    <form id="contact-form" class="form-horizontal" role="form">
       
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" id="name" placeholder="NAME" name="name" value="" required>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-12">
          <input type="email" class="form-control" id="email" placeholder="EMAIL" name="email" value="" required>
        </div>
      </div>

      <textarea class="form-control" rows="10" placeholder="MESSAGE" name="message" required></textarea>
      
      <button class="btn btn-primary send-button" id="submit" type="submit" value="SEND">
        <div class="alt-send-button">
          <i class="fa fa-paper-plane"></i><span class="send-text">SEND</span>
        </div>
      
      </button>
      
    </form>
    
  <!-- Left contact page --> 
    
      <div class="direct-contact-container">

        <ul class="contact-list">
          <li class="list-item"><i class="fa fa-map-marker fa-2x"><span class="contact-text place">City, State</span></i></li>
          
          <li class="list-item"><i class="fa fa-phone fa-2x"><span class="contact-text phone"><a href="tel:1-212-555-5555" title="Give me a call">(212) 555-2368</a></span></i></li>
          
          <li class="list-item"><i class="fa fa-envelope fa-2x"><span class="contact-text gmail"><a href="#">[email protected]</a></span></i></li>
          
        </ul>

        <hr>
        <ul class="social-media-list">
          <li><a href="#" target="_blank" class="contact-icon">
            <i class="fa fa-github" aria-hidden="true"></i></a>
          </li>
          <li><a href="#" target="_blank" class="contact-icon">
            <i class="fa fa-codepen" aria-hidden="true"></i></a>
          </li>
          <li><a href="#" target="_blank" class="contact-icon">
            <i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="#" target="_blank" class="contact-icon">
            <i class="fa fa-instagram" aria-hidden="true"></i></a>
          </li>       
        </ul>
        <hr>
      </div>
  </div>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
      <script>
document.querySelector('#contact-form').addEventListener('submit', e => {
  e.preventDefault();
  e.target.elements.name.value = '';
  e.target.elements.email.value = '';
  e.target.elements.message.value = '';
});
    </script>
</body>
</html>

10. By Cody Reeves

Made by Cody Reeves. Expanding Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body,
footer {
  background: #2B3A42;
}

#panel,
#flip {
  padding: 5px;
  text-align: center;
  margin: 0 auto;
}

#panel {
  display: none;
  background: #2B3A42;
}

footer {
  background: #2B3A42;
}


/*Buttton*/

.f-btn {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 6px solid #FF530D;
  overflow: hidden;
  transition: color .5s ease-in-out;
  border-radius: 4px;
  text-align: center;
  width: 200px;
  cursor: pointer;
}

.f-btn span {
  font-family: "sofia-pro", sans-serif;
  display: block;
  position: relative;
  z-index: 1;
  padding: 5% 35px;
}

.f-btn span:before {
  display: block;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: -20%;
  z-index: -1;
  content: '';
  width: 140%;
  height: 140%;
  border-radius: 40px;
  background: #FF530D;
  opacity: 0;
  transform: translate(-100%) rotateY(90deg) scale(0.5);
  transition: opacity 0.3s ease-in, transform 1s;
}

.f-btn:hover {
  color: #2B3A42;
}

.f-btn:hover span:before {
  opacity: 1;
  transform: translate(0) rotate(0deg) scale(1.4);
}


/*form*/

.con-form {
  margin: 0 auto;
  width: 30%;
  text-align: center;
}

footer p {
  text-align: center;
  color: #EFEFEF;
  font-size: 2rem;
}

input,
textarea {
  margin: 1% 0 0 0;
}

footer ul {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  width: 80%;
  padding: 0 10% 0 10%;
}

footer li {
  display: inline-block;
  width: 3%;
  position: relative;
  list-style-type: none;
  fill: #EFEFEF;
  text-align: center;
}

#icon-behance {
  fill: #EFEFEF;
}

.codepen {
  fill: #EFEFEF;
}

footer li:hover {
  fill: #FF530D;
}

#foot-social li {
  padding: 2% 2% 0 2%;
  cursor: pointer;
  list-style-type: none;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-family: "sofia-pro", sans-serif;
  width: 100%;
  margin: 0 auto;
  height: 38px;
  position: relative;
  margin: 0 0 0 0;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 0px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 6px solid #FF530D;
  cursor: pointer;
  box-sizing: border-box;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #2B3A42;
  background: #FF530D;
  outline: 0;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-family: "sofia-pro", sans-serif;
  height: 38px;
  width: 100%;
  padding: 6px 10px 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #D1D1D1;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}


/* Removes awkward default styles on some inputs for iOS */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100%;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #FF530D;
  outline: 0;
  background: #fff;
}
</style>
</head>
<body>
  <footer>
    <div class="row">
      <div class="twelve columns">
        <div id="flip" class="f-btn"><span>Contact Me &raquo;</span></div>

        <ul id="foot-social">
          <li>
            <a href="https://www.facebook.com/codreev" title="Facebook">
              <svg id="icon-facebook" viewBox="0 0 1024 1024">
                <path class="path1" d="M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h358.4v-358.4h-102.4v-126.72h102.4v-104.96c0-110.797 62.054-188.621 192.819-188.621l92.314 0.102v133.376h-61.286c-50.893 0-70.246 38.195-70.246 73.626v86.528h131.482l-29.082 126.669h-102.4v358.4h204.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://twitter.com/creeves_" title="Twitter">
              <svg id="icon-twitter" viewBox="0 0 1024 1024">
                <path class="path1" d="M886.579 319.795c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.080 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://ca.linkedin.com/pub/cody-reeves/59/54/5a8" title="Linkedin">
              <svg id="icon-linkedin" viewBox="0 0 1024 1024">
                <path class="path1" d="M256 153.6c0 54.374-36.352 101.171-102.451 101.171-62.208 0-102.349-44.134-102.349-98.509 0-55.808 38.912-105.062 102.4-105.062s101.171 46.592 102.4 102.4zM51.2 972.8v-665.6h204.8v665.6h-204.8z"></path>
                <path class="path2" d="M358.4 534.733c0-79.104-2.611-145.203-5.222-202.291h184.013l9.114 88.218h3.891c25.907-41.523 89.395-102.4 195.686-102.4 129.638 0 226.918 86.784 226.918 273.51v381.030h-204.8v-351.283c0-81.613-31.078-143.872-102.4-143.872-54.374 0-81.613 44.032-95.898 80.333-5.222 13.005-6.502 31.13-6.502 49.306v365.517h-204.8v-438.067z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://instagram.com/codreev/" title="Instagram">
              <svg id="icon-instagram" viewBox="0 0 1024 1024">
                <path class="path1" d="M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h716.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4zM511.181 794.778c156.621 0 283.546-127.027 283.546-283.597 0-17.306-2.202-33.997-5.274-50.381h80.947v369.459c0 19.558-15.872 35.328-35.482 35.328h-645.837c-19.61 0-35.482-15.77-35.482-35.328v-369.459h79.309c-3.123 16.384-5.325 33.075-5.325 50.381 0 156.621 127.027 283.597 283.597 283.597zM333.978 511.181c0-97.894 79.36-177.203 177.254-177.203 97.843 0 177.254 79.309 177.254 177.203s-79.411 177.254-177.254 177.254c-97.946 0-177.254-79.36-177.254-177.254zM834.918 307.2h-82.688c-19.558 0-35.43-15.974-35.43-35.43v-82.79c0-19.558 15.872-35.379 35.379-35.379h82.688c19.661 0 35.533 15.821 35.533 35.379v82.739c0 19.507-15.872 35.482-35.482 35.482z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://www.behance.net/codyreeves" title="Behance">
              <svg id="icon-behance" viewBox="0 0 1024 1024">
                <path class="path1" d="M413.286 476.211c0 0 96.87-7.526 96.87-125.901 0-118.528-79.258-176.179-179.712-176.179h-330.445v661.811h330.445c0 0 201.779 6.605 201.779-195.379-0.051-0.051 8.755-164.352-118.938-164.352zM145.613 291.686h184.832c0 0 44.954 0 44.954 68.813 0 68.915-26.419 78.899-56.422 78.899h-173.363v-147.712zM321.075 718.285h-175.462v-176.896h184.832c0 0 66.97-0.922 66.97 90.88 0 77.414-50.022 85.453-76.339 86.016zM801.229 342.426c-244.275 0-244.070 254.31-244.070 254.31s-16.691 252.979 244.070 252.979c0 0 217.242 13.005 217.242-175.974h-111.718c0 0 3.686 71.219-101.786 71.219 0 0-111.821 7.782-111.821-115.2h328.858c0.051-0.051 36.301-287.334-220.774-287.334zM900.608 541.389h-208.589c0 0 13.619-101.99 111.718-101.99s96.87 101.99 96.87 101.99zM926.566 212.992h-261.99v81.613h261.99v-81.613z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://codepen.io/CR-Design/" class="codepen" title="CodePen">
              <svg viewBox="0 0 450 450">
                <path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"
                />
              </svg>
            </a>
          </li>

        </ul>
        <br>
        <div id="panel">
          <p>Please contact me for any questions, comments or inquiries.</p>
          <div class="con-form">
            <form action="contact.php" id="form" method="post" name="form">
              <input name="client" placeholder="Your Name" type="text" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">

              <input name="email" placeholder="Your Email" type="email" value="" required>
              <textarea name="comment" placeholder="Your Comments Here..." id="comment"></textarea>
              <input class="o-btn" type="Submit" value="Submit">

            </form>
          </div>
        </div>
  </footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  $("#flip").click(function (e) {
    e.preventDefault();
    $("#panel").slideToggle();
    $('html, body').animate({
      scrollTop: 10000 },
    2500);
  });
});
    </script>
</body>
</html>

11. By Aina Requena

Made by Aina Requena. Simple Contact Form. Source

JavaScript Contact Form by aina requena
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <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=Raleway:300);
@import url(https://fonts.googleapis.com/css?family=Lusitana:400,700);
.align-center {
  text-align: center;
}

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
}

.row {
  margin: -20px 0;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row .col {
  padding: 0 20px;
  float: left;
  box-sizing: border-box;
}
.row .col.x-50 {
  width: 50%;
}
.row .col.x-100 {
  width: 100%;
}

.content-wrapper {
  min-height: 100%;
  position: relative;
}

.get-in-touch {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.get-in-touch .title {
  text-align: center;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 48px;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}
.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #000;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label, .contact-form .input-text.not-empty + .label {
  transform: translateY(-24px);
}
.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
  cursor: text;
  transition: transform 0.2s ease-in-out;
}
.contact-form .submit-btn {
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.note {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-family: Lusitana, serif;
  font-size: 16px;
  line-height: 21px;
}
.note .link {
  color: #888;
  text-decoration: none;
}
.note .link:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
  <section class="get-in-touch">
   <h1 class="title">Get in touch</h1>
   <form class="contact-form row">
      <div class="form-field col x-50">
         <input id="name" class="input-text js-input" type="text" required>
         <label class="label" for="name">Name</label>
      </div>
      <div class="form-field col x-50">
         <input id="email" class="input-text js-input" type="email" required>
         <label class="label" for="email">E-mail</label>
      </div>
      <div class="form-field col x-100">
         <input id="message" class="input-text js-input" type="text" required>
         <label class="label" for="message">Message</label>
      </div>
      <div class="form-field col x-100 align-center">
         <input class="submit-btn" type="submit" value="Submit">
      </div>
   </form>
</section>
<p class="note">Based on <a class="link" href="#" target="blank">Red Collar Contact Form</a>.</p>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.js-input').keyup(function () {
  if ($(this).val()) {
    $(this).addClass('not-empty');
  } else {
    $(this).removeClass('not-empty');
  }
});
    </script>
</body>
</html>

12. By Chris Holder

Made by Chris Holder. JavaScript Contact form template with Slide effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

<link href="https://dev.see8ch.com/see8ch/v3/fonts/ss-social/ss-social.css" rel="stylesheet" />

<link href="https://dev.see8ch.com/see8ch/v3/fonts/ss-standard/ss-standard.css" rel="stylesheet" />
  
  
  
<style>
body {
  background: #efefef;
  font-size: 62.5%;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  color: #B6B6B6;
}
body section {
  background: white;
  margin: 60px auto 120px;
  border-top: 15px solid #313A3D;
  text-align: center;
  padding: 50px 0 110px;
  width: 80%;
  max-width: 1100px;
}
body section h1 {
  margin-bottom: 40px;
  font-size: 4em;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 100;
}

form {
  width: 58.3333333333%;
  margin: 0 auto;
}
form .field {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}
form .field label {
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  background: #313A3D;
  width: 100%;
  padding: 18px 0;
  font-size: 1.45em;
  letter-spacing: 0.075em;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field label + span {
  font-family: "SSStandard";
  opacity: 0;
  color: white;
  display: block;
  position: absolute;
  top: 12px;
  left: 7%;
  font-size: 2.5em;
  text-shadow: 1px 2px 0 #cd6302;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field input[type=text],
form .field textarea {
  border: none;
  background: #E8E9EA;
  width: 80.5%;
  margin: 0;
  padding: 18px 0;
  padding-left: 19.5%;
  color: #313A3D;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
form .field input[type=text]#msg,
form .field textarea#msg {
  height: 18px;
  resize: none;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field input[type=text]:focus, form .field input[type=text].focused,
form .field textarea:focus,
form .field textarea.focused {
  outline: none;
}
form .field input[type=text]:focus#msg, form .field input[type=text].focused#msg,
form .field textarea:focus#msg,
form .field textarea.focused#msg {
  padding-bottom: 150px;
}
form .field input[type=text]:focus + label, form .field input[type=text].focused + label,
form .field textarea:focus + label,
form .field textarea.focused + label {
  width: 18%;
  background: #FD9638;
  color: #313A3D;
}
form .field input[type=text].focused + label,
form .field textarea.focused + label {
  color: #FD9638;
}
form .field:hover label {
  width: 18%;
  background: #313A3D;
  color: white;
}
form input[type=submit] {
  background: #FD9638;
  color: white;
  -webkit-appearance: none;
  border: none;
  text-transform: uppercase;
  position: relative;
  padding: 13px 50px;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form input[type=submit]:hover {
  background: #313A3D;
  color: #FD9638;
}
form input[type=submit]:focus {
  outline: none;
  background: #cd6302;
}
</style>
</head>
<body>
  <section id="hire">
    <h1>Contact Me</h1>
    
    <form>
	      <div class="field name-box">
		        <input type="text" id="name" placeholder="Who Are You?"/>
        		<label for="name">Name</label>
		        <span class="ss-icon">check</span>
	      </div>

	      <div class="field email-box">
		        <input type="text" id="email" placeholder="[email protected]"/>
		        <label for="email">Email</label>
		        <span class="ss-icon">check</span>
	      </div>

	      <div class="field msg-box">
		        <textarea id="msg" rows="4" placeholder="Your message goes here..."/></textarea>
		        <label for="msg">Msg</label>
		        <span class="ss-icon">check</span>
	      </div>

	      <input class="button" type="submit" value="Send" />
  </form>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Input Lock
$('textarea').blur(function () {
  $('#hire textarea').each(function () {
    $this = $(this);
    if (this.value != '') {
      $this.addClass('focused');
      $('textarea + label + span').css({ 'opacity': 1 });
    } else
    {
      $this.removeClass('focused');
      $('textarea + label + span').css({ 'opacity': 0 });
    }
  });
});

$('#hire .field:first-child input').blur(function () {
  $('#hire .field:first-child input').each(function () {
    $this = $(this);
    if (this.value != '') {
      $this.addClass('focused');
      $('.field:first-child input + label + span').css({ 'opacity': 1 });
    } else
    {
      $this.removeClass('focused');
      $('.field:first-child input + label + span').css({ 'opacity': 0 });
    }
  });
});

$('#hire .field:nth-child(2) input').blur(function () {
  $('#hire .field:nth-child(2) input').each(function () {
    $this = $(this);
    if (this.value != '') {
      $this.addClass('focused');
      $('.field:nth-child(2) input + label + span').css({ 'opacity': 1 });
    } else
    {
      $this.removeClass('focused');
      $('.field:nth-child(2) input + label + span').css({ 'opacity': 0 });
    }
  });
});
    </script>
</body>
</html>

13. By Joe Harry

Made by Joe Harry. Another Expanding Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  font-family: Roboto, sans-serif;
  width: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background: #FAFAFA;
}

h1, h2 {
  font-weight: 700;
  color: #FFF;
  font-weight: 700;
  font-size: 4em;
  margin: 0;
  padding: 0 20px;
}

.form-overlay {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0;
  background: #000;
  transition: background 1s, opacity 0.4s, width 0s 0.4s;
}

.show-form-overlay .form-overlay {
  width: 100%;
  opacity: 0.7;
  z-index: 999;
  transition: background 1s, opacity 0.4s, width 0s;
}
.show-form-overlay.form-submitted .form-overlay {
  background: #119DA4;
  transition: background 0.6s;
}

#form-container {
  cursor: pointer;
  color: #FFF;
  z-index: 1000;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5vh;
  background-color: #f72f4e;
  overflow: hidden;
  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
#form-container.expand {
  cursor: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  border-radius: 0;
  width: 70%;
  height: 610px;
  max-width: 610px;
  padding: 0;
  transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}

#form-close {
  cursor: pointer;
}

.icon::before {
  cursor: pointer;
  font-size: 30px;
  line-height: 60px;
  display: block;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon:hover::before {
  -webkit-animation: wiggle 0.1s linear infinite;
          animation: wiggle 0.1s linear infinite;
}

.fa-pencil::before {
  display: block;
}

.fa-close::before {
  display: none;
}

.expand.fa-pencil::before {
  display: none;
}

.expand.fa-close::before {
  display: block;
  -webkit-animation: none;
          animation: none;
}

#form-content {
  font-family: Roboto, sans-serif;
  transform: translateY(150%);
  width: 100%;
  opacity: 0;
  text-align: left;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
}
#form-content.expand {
  transform: translateY(0px);
  opacity: 1;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s;
}
#form-content form {
  color: #FFF;
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  text-align: left;
}

#form-head {
  font-size: 100%;
  padding: 0;
  margin: 0 20px;
  color: #FFF;
  text-align: center;
  transition: all 0.8s 0.6s;
}
#form-head h1, #form-head p {
  padding: 0;
  margin: 0;
}
#form-head .pre {
  display: block;
}
#form-head .post {
  display: none;
}

.form-submitted#form-head {
  transform: translateY(250%);
}
.form-submitted#form-head .pre {
  display: none;
}
.form-submitted#form-head .post {
  display: block;
}

.input {
  background: rgba(0, 0, 0, 0.2);
  display: block;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  border-width: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  box-shadow: none;
  transform: translateX(0);
}

::-webkit-input-placeholder {
  /* Safari, Chrome and Opera */
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

/* Firefox 18- */
:-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

/* Firefox 19+ */
::-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

/* IE 10+ */
:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

/* Edge */
::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

/* Default */
:-moz-placeholder-shown {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}
:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}
:placeholder-shown {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

input, select, textarea {
  color: #FFF;
}

.input.message {
  resize: none;
  height: 150px;
  padding: 10px;
}

.input.submit {
  background-color: #FFF;
  color: #f72f4e;
  font-size: 120%;
  height: 80px;
  box-shadow: 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.1s, transform 0s 0.6s;
}
.input.submit:active {
  margin-top: 15px;
  box-shadow: 0 0 rgba(0, 0, 0, 0.5);
}

.input.form-error {
  -webkit-animation: error 0.8s ease;
          animation: error 0.8s ease;
  background: rgba(0, 0, 0, 0.7);
}

select option {
  background: #f72f4e;
  color: #FFF;
  border: none;
  box-shadow: none;
  outline: none;
}

select option:disabled {
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  font-size: 90%;
}

.input {
  transition: transform 0s 1s;
}

.form-submitted .input {
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.form-submitted .input:nth-child(1) {
  transition-delay: 0.1s;
}
.form-submitted .input:nth-child(2) {
  transition-delay: 0.2s;
}
.form-submitted .input:nth-child(3) {
  transition-delay: 0.3s;
}
.form-submitted .input:nth-child(4) {
  transition-delay: 0.4s;
}
.form-submitted .input:nth-child(5) {
  transition-delay: 0.5s;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}

@media (max-width: 600px) {
  #form-container.expand {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: initial;
    overflow-x: hidden;
    bottom: 0;
  }

  h1 {
    font-size: 300%;
  }

  .icon:hover::before {
    -webkit-animation: none;
            animation: none;
  }

  .form-overlay {
    display: none;
    transition: none;
  }
}
@-webkit-keyframes error {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-6px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(6px);
  }
}
@keyframes error {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-6px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(6px);
  }
}
@-webkit-keyframes wiggle {
  0%, 100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
@keyframes wiggle {
  0%, 100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
</style>
</head>
<body>
  <div class='form-overlay'></div>
<div class='icon fa fa-pencil' id='form-container'>
  <span class='icon fa fa-close' id='form-close'></span>
  <div id='form-content'>
    <div id='form-head'>
      <h1 class='pre'>Get in touch</h1>
      <p class='pre'>Good choice...</p>
      <h1 class='post'>Thanks!</h1>
      <p class='post'>I'll be in touch ASAP</p>
    </div>
    <form>
      <input class='input name' name='user_name' placeholder='Your name please' type='text'>
      <input class='input email' name='user_email' placeholder='A contact email' type='text'>
      <select class='input select' name='subject'>
        <option disabled=''>What shall we talk about?</option>
        <option selected=''>About a new project</option>
        <option>About a job opportunity</option>
        <option>Let's do this over a coffee</option>
      </select>
      <textarea class='input message' placeholder='How can I help?'></textarea>
      <input class='input submit' type='submit' value='Send Message'>
    </form>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/woodwoerk/pen/XXZaGQ.js'></script>
      <script>
var formContainer = $('#form-container');

bindFormClick();
//Opening the form
function bindFormClick() {
  $(formContainer).on('click', function (e) {
    e.preventDefault();
    toggleForm();
    //Ensure container doesn't togleForm when open
    $(this).off();
  });
}

//Closing the form
$('#form-close, .form-overlay').click(function (e) {
  e.stopPropagation();
  e.preventDefault();
  toggleForm();
  bindFormClick();
});

function toggleForm() {
  $(formContainer).toggleClass('expand');
  $(formContainer).children().toggleClass('expand');
  $('body').toggleClass('show-form-overlay');
  $('.form-submitted').removeClass('form-submitted');
}

//Form validation
$('form').submit(function () {
  var form = $(this);
  form.find('.form-error').removeClass('form-error');
  var formError = false;

  form.find('.input').each(function () {
    if ($(this).val() == '') {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    } else
    if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    }
  });

  if (!formError) {
    $('body').addClass('form-submitted');
    $('#form-head').addClass('form-submitted');
    setTimeout(function () {
      $(form).trigger("reset");
    }, 1000);
  }
  return false;
});

function isValidEmail(email) {
  var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~ -퟿豈-﷏ﷰ-￯]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~ -퟿豈-﷏ﷰ-￯]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e -퟿豈-﷏ﷰ-￯]|\\[\x01-\x09\x0b\x0c\x0d-\x7f -퟿豈-﷏ﷰ-￯]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d -퟿豈-﷏ﷰ-￯]|[a-z\d -퟿豈-﷏ﷰ-￯][a-z\d\-._~ -퟿豈-﷏ﷰ-￯]*[a-z\d -퟿豈-﷏ﷰ-￯])\.)+([a-z -퟿豈-﷏ﷰ-￯]|[a-z -퟿豈-﷏ﷰ-￯][a-z\d\-._~ -퟿豈-﷏ﷰ-￯]*[a-z -퟿豈-﷏ﷰ-￯])\.?$/i;
  return pattern.test(email);
};

social("twitter/joeharry__", "codepen/woodwork",
"disco");
    </script>
</body>
</html>

14. By Andrew

Made by Andrew. Popup Contact Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import "https://fonts.googleapis.com/css?family=Raleway";
* { box-sizing: border-box; }
body { 
  margin: 0; 
  padding: 0; 
  background: #333;
  font-family: Raleway; 
  text-transform: uppercase; 
  font-size: 11px; 
}
h1{ margin: 0; }
#contact { 
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  margin: 4em auto;
  width: 100px; 
  height: 30px; 
  line-height: 30px;
  background: teal;
  color: white;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid white;
}

#contact:hover { background: #666; }
#contact:active { background: #444; }

#contactForm { 
  display: none;

  border: 6px solid salmon; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%)
  
}

input, textarea { 
  margin: .8em auto;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  
  display: block; 
  width: 280px; 
  padding: .4em;
}
textarea { height: 80px; resize: none; }

.formBtn { 
  width: 140px;
  display: inline-block;
  
  background: teal;
  color: #fff;
  font-weight: 100;
  font-size: 1.2em;
  border: none;
  height: 30px;
}
</style>
</head>
<body>
  <div id="contact">Contact</div>

<div id="contactForm">

  <h1>Keep in touch!</h1>
  <small>I'll get back to you as quickly as possible</small>
  
  <form action="#">
    <input placeholder="Name" type="text" required />
    <input placeholder="Email" type="email" required />
    <input placeholder="Subject" type="text" required />
    <textarea placeholder="Comment"></textarea>
    <input class="formBtn" type="submit" />
    <input class="formBtn" type="reset" />
  </form>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {

  // contact form animations
  $('#contact').click(function () {
    $('#contactForm').fadeToggle();
  });
  $(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
        container.fadeOut();
      }
  });

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

15. By Alex

Made by Alex. Retro UI Feedback Form. Source

JavaScript Contact Form by Alex
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<style>
* {
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: #a2a2a2;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

input, button, textarea {
  border: 2px solid rgba(0, 0, 0, 0.6);
  background-image: none;
  background-color: #dadad3;
  box-shadow: none;
  padding: 5px;
}
input:focus, button:focus, textarea:focus {
  outline: none;
}

textarea {
  min-height: 50px;
  resize: vertical;
}

button {
  cursor: pointer;
  font-weight: 500;
}

.feedback-card {
  border: 1px solid black;
  max-width: 980px;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: -0.6rem 0.6rem 0 rgba(29, 30, 28, 0.26);
}
.feedback-header {
  text-align: center;
  padding: 8px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid black;
}
.feedback-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.feedback-body__message {
  margin-top: 10px;
}
.feedback-body button {
  margin-top: 10px;
  align-self: flex-end;
}
</style>
</head>
<body>
  <div class="feedback-card">
  <div class="feedback-header">
    SEND FEEDBACK
  </div>
  <form class="feedback-body">
    <input ,type="email" class="feedback-body__email" placeholder="Email" /><textarea ,type="text" class="feedback-body__message" placeholder="Message"></textarea><button class="feedback-body__submit">SEND</button>
  </form>
</div>
      <script>
(function () {
  var btn = document.getElementsByClassName("feedback-body__submit")[0];
  btn.onclick = function (e) {
    e.preventDefault();
  };
})();
    </script>
</body>
</html>