5 Best Blogger Contact Us Page For Blogger

<style> @import url(https://fonts.googleapis.com/css?family=Sniglet|Raleway:900); body, html{ height: 100%; padding: 0; margin: 0; font-family: 'Sniglet', cursive; } h1{ font-weight: normal; font-size: 4em; font-family: 'Raleway', sans-serif; margin: 0 auto; margin-top: 30px; width: 500px; color: rgb(0, 119, 255); text-align: center; } /* Animation webkit */ @-webkit-keyframes myfirst { 0% {margin-left: -235px} 90% {margin-left: 100%;} 100% {margin-left: 100%;} } /* Animation */ @keyframes myfirst { 0% {margin-left: -235px} 70% {margin-left: 100%;} 100% {margin-left: 100%;} } .fish{ background-image: url('http://www.geertjanhendriks.nl/codepen/form/fish.png'); width: 235px; height: 104px; margin-left: -235px; position: absolute; animation: myfirst 24s; -webkit-animation: myfirst 24s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear; } #fish{ top: 120px; } #fish2{ top: 260px; animation-delay: 12s; -webkit-animation-delay: 12s; } header{ height: 160px; background: url('http://www.geertjanhendriks.nl/codepen/form/golf.png') repeat-x bottom; } #form{ height: 100%; background-color: #98d4f3; overflow: hidden; position: relative; } form{ margin: 0 auto; width: 500px; padding-top: 40px; color: white; position: relative; } label, input, textarea{ display: block; } input, textarea{ width: 500px; border: none; border-radius: 20px; outline: none; padding: 10px; font-family: 'Sniglet', cursive; font-size: 1em; color: #676767; transition: border 0.5s; -webkit-transition: border 0.5s; -moz-transition: border 0.5s; -o-transition: border 0.5s; border: solid 3px #98d4f3; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input:focus, textarea:focus{ border: solid 3px #77bde0; } textarea{ height: 100px; resize: none; overflow: auto; } input[type="submit"]{ background-color: rgb(0, 89, 255); color: white; height: 50px; cursor: pointer; margin-top: 30px; font-size: 1.29em; font-family: 'Sniglet', cursive; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; transition: background-color 0.5s; } input[type="submit"]:hover{ background-color: #0e84e5; } label{ font-size: 1.5em; margin-top: 20px; padding-left: 20px; } .formgroup, .formgroup-active, .formgroup-error{ background-repeat: no-repeat; background-position: right bottom; background-size: 10.5%; transition: background-image 0.7s; -webkit-transition: background-image 0.7s; -moz-transition: background-image 0.7s; -o-transition: background-image 0.7s; width: 566px; padding-top: 2px; } .formgroup{ background-image: url('http://www.geertjanhendriks.nl/codepen/form/pixel.gif'); } .formgroup-active{ background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo.png'); } .formgroup-error{ background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo-error.png'); color: red; } </style> <header> <h1>Contact us</h1> </header> <div id="form"> <div class="fish" id="fish"></div> <div class="fish" id="fish2"></div> <form id="waterform" method="post"> <div class="formgroup" id="name-form">     <label for="name">Your name*</label>     <input type="text" id="name" name="name" /> </div> <div class="formgroup" id="email-form">     <label for="email">Your e-mail*</label>     <input type="email" id="email" name="email" /> </div> <div class="formgroup" id="message-form">     <label for="message">Your message</label>     <textarea id="message" name="message"></textarea> </div> <input type="submit" value="Send your message!" /> </form> </div> <script> $('document').ready(function(){ $('input[type="text"], input[type="email"], textarea').focus(function(){ var background = $(this).attr('id'); $('#' + background + '-form').addClass('formgroup-active'); $('#' + background + '-form').removeClass('formgroup-error'); }); $('input[type="text"], input[type="email"], textarea').blur(function(){ var background = $(this).attr('id'); $('#' + background + '-form').removeClass('formgroup-active'); }); function errorfield(field){ $(field).addClass('formgroup-error'); console.log(field); } $("#waterform").submit(function() { var stopsubmit = false; if($('#name').val() == "") { errorfield('#name-form'); stopsubmit=true; } if($('#email').val() == "") { errorfield('#email-form'); stopsubmit=true; }   if(stopsubmit) return false; }); }); </script>

<style> @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); body {   background:#01ce56 url(http://andstud.io/wp-content/uploads/2014/03/blurrrr2.jpg)no-repeat center center fixed;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;     padding-top: 0px; } h1 {    color: #fff;    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);    padding-top: 30px;    font-size: 100px;    font-weight: 700;    text-align: center;    font-family: 'Source Sans Pro', sans-serif;    margin: 0px; } form {     margin-left:auto;     margin-right:auto;     width: 965px;     height: 450px;     padding:30px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px;     -moz-background-clip: padding;     -webkit-background-clip: padding-box;     background-clip: padding-box;     overflow: hidden; } textarea{   background: rgba(0, 0, 0, 0.4);     width: 894px;     height: 110px;     border: none;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px;     -moz-background-clip: padding;     -webkit-background-clip: padding-box;     background-clip: padding-box;     display: block;     font-family: 'Source Sans Pro', sans-serif;     font-size: 18px;     color: #fff;     padding-left: 45px;     padding-right: 20px;     padding-top: 12px;     margin-bottom: 20px;     overflow: hidden; } select {     width: 960px;     height: 48px;     line-height: 1.5;     font-size: 1.4em;     border: none;     border-radius: 10px;     -webkit-border-radius: 10px;     -mox-border-radius: 10px;     color: #fff;     display: block;     background: transparent;     background-color: rgba(0,0,0,.4);     margin-bottom: 20px;     display: block;     font-family: 'Source Sans Pro', sans-serif;     font-size: 18px;     appearance: none;     -webkit-appearance: none;     -moz-appearance: none; } .nameinput, .emailinput {     width: 894px;     height: 48px;     border: none;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px;     -moz-background-clip: padding;     -webkit-background-clip: padding-box;     background-clip: padding-box;     display: block;     font-family: 'Source Sans Pro', sans-serif;     font-size: 18px;     color: #fff;     padding-left: 20px;     padding-right: 20px;     margin-bottom: 20px; } input[type=submit] {     cursor: pointer; } input.nameinput {   background: rgba(0, 0, 0, 0.4);   padding-left: 45px; } input.emailinput {   background: rgba(0, 0, 0, 0.4);   padding-left: 45px; } input.message {   background: rgba(0, 0, 0, 0.4);   padding-left: 45px; } select.indent {   padding-left: 45px;     cursor: pointer; } ::-webkit-input-placeholder {   color: #fff; } :-moz-placeholder{     color: #fff; } ::-moz-placeholder {     color: #fff; } :-ms-input-placeholder {    color: #fff; } input:focus, textarea:focus {   background-color: rgba(0, 0, 0, 0.2);     -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);     -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);     box-shadow: 0 0 5px 1px rgba(255,255,255,.5);   overflow: hidden; } .btn { border: none; font-family: 'Source Sans Pro', sans-serif;   font-size: 18px;   width: 200px;   height: 48px; color: #000; background: #fff; cursor: pointer; display: inline-block; font-weight: 700; position: relative;   outline: none;   box-shadow: 0 6px #cecece;   border-radius: 5px;   float: right;   margin-right: 6px; } .btn:hover { background: #fff;   outline: none;   box-shadow: 0 4px #cecece; top: 2px; } .btn:active { background: #fff;   outline: none;   box-shadow: 0 0 #cecece; top: 6px; } .flat { border: none; cursor: pointer; display: inline-block; outline: none;   position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .flat:before { position: absolute; height: 100%; left: 0; top: 0; line-height: 3; font-size: 140%; width: 60px; } .flat {    width: 960px !important;    height: 48px;    overflow: hidden;    margin-bottom: 20px;    background: url(http://www.jordancundiff.com/wp-content/uploads/2014/03/icon-dropdown.png) no-repeat right;    } @media only screen and ( min-width: 768px ) and ( max-width: 1035px ) {   h1 { font-size: 80px; }   form { width: 736px !important; }     #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 731px !important; }     .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 666px !important; } } @media only screen and ( max-width: 804px ) {     h1 { font-size: 50px; }   form { width: 450px !important; }    #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 445px !important; }     .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 380px !important; } } @media only screen and ( max-width: 517px ) {      h1 { font-size: 30px; }   form { width: 295px !important; }   #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 290px !important; }     .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 225px !important; }   .btn { width: 110px; } } </style> <h1>Techno Droid</h1> <div class="wpcf7" id="wpcf7-f156-p143-o1 formwrap">     <form action="/?page_id=143#wpcf7-f156-p143-o1" method="post" class="wpcf7-form" novalidate="novalidate">         <div style="display: none;">             <input type="hidden" name="_wpcf7" value="156">             <input type="hidden" name="_wpcf7_version" value="3.7.2">             <input type="hidden" name="_wpcf7_locale" value="en_US">             <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f156-p143-o1">             <input type="hidden" name="_wpnonce" value="d1da331d93">         </div>         <p>            <span class="wpcf7-form-control-wrap Name">              <input type="text" name="Name" value="" size="40" class="nameinput wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name">           </span>           <span class="wpcf7-form-control-wrap Email">             <input type="email" name="Email"  size="40" class="emailinput wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email">           </span>           <span class="wpcf7-form-control-wrap Subject flat">             <select name="Subject" class="indent wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">               <option value="General">General</option>               <option value="Booking">Booking</option>             </select>           </span>           <span class="wpcf7-form-control-wrap Message">             <textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message"></textarea>           </span>           <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit btn">           <img class="ajax-loader" src="http://www.jordancundiff.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">       </p>       <div class="wpcf7-response-output wpcf7-display-none">       </div>   </form> </div>

<style>     @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); html {   font-family: 'Montserrat', Arial, sans-serif;   -ms-text-size-adjust: 100%;   -webkit-text-size-adjust: 100%; } body {   background: rgb(5, 245, 193); } button {   overflow: visible; } button, select {   text-transform: none; } button, input, select, textarea {   color: #5A5A5A;   font: inherit;   margin: 0; } input {   line-height: normal; } textarea {   overflow: auto; } #container {   border: solid 3px #474544;   max-width: 768px;   margin: 60px auto;   position: relative; } form {   padding: 37.5px;   margin: 50px 0; } h1 {   color: #474544;   font-size: 32px;   font-weight: 700;   letter-spacing: 7px;   text-align: center;   text-transform: uppercase; } .underline {   border-bottom: solid 2px #474544;   margin: -0.512em auto;   width: 80px; } .icon_wrapper {   margin: 50px auto 0;   width: 100%; } .icon {   display: block;   fill: #474544;   height: 50px;   margin: 0 auto;   width: 50px; } .email { float: right; width: 45%; } input[type='text'], [type='email'], select, textarea { background: none;   border: none; border-bottom: solid 2px #474544; color: #474544; font-size: 1.000em;   font-weight: 400;   letter-spacing: 1px; margin: 0em 0 1.875em 0; padding: 0 0 0.875em 0;   text-transform: uppercase; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } input[type='text']:focus, [type='email']:focus, textarea:focus { outline: none; padding: 0 0 0.875em 0; } .message { float: none; } .name { float: left; width: 45%; } select {   background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;   outline: none;   -moz-appearance: none;   -webkit-appearance: none; } select::-ms-expand {   display: none; } .subject {   width: 100%; } .telephone {   width: 100%; } textarea { line-height: 150%; height: 150px; resize: none;   width: 100%; } ::-webkit-input-placeholder { color: #474544; } :-moz-placeholder { color: #474544; opacity: 1; } ::-moz-placeholder { color: #474544; opacity: 1; } :-ms-input-placeholder { color: #474544; } #form_button {   background: none;   border: solid 2px #474544;   color: #474544;   cursor: pointer;   display: inline-block;   font-family: 'Helvetica', Arial, sans-serif;   font-size: 0.875em;   font-weight: bold;   outline: none;   padding: 20px 35px;   text-transform: uppercase;   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #form_button:hover {   background: #474544;   color: #F2F3EB; } @media screen and (max-width: 768px) {   #container {     margin: 20px auto;     width: 95%;   } } @media screen and (max-width: 480px) {   h1 {     font-size: 26px;   }     .underline {     width: 68px;   }     #form_button {     padding: 15px 25px;   } } @media screen and (max-width: 420px) {   h1 {     font-size: 18px;   }     .icon {     height: 35px;     width: 35px;   }     .underline {     width: 53px;   }     input[type='text'], [type='email'], select, textarea {     font-size: 0.875em;   } } </style> <div id="container">     <h1>&bull; Keep in Touch &bull;</h1>     <div class="underline">     </div>     <div class="icon_wrapper">       <svg class="icon" viewBox="0 0 145.192 145.192">         <path d="M126.82,32.694c-2.804,0-5.08,2.273-5.08,5.075v2.721c-1.462,0-2.646,1.185-2.646,2.647v1.995    c0,1.585,1.286,2.873,2.874,2.873h20.577c1.462,0,2.646-1.185,2.646-2.647v-3.041c0-1.009-0.816-1.825-1.823-1.825v-2.722    c0-2.802-2.276-5.075-5.079-5.075h-1.985v-3.829c0-3.816-3.095-6.912-6.913-6.912h-0.589h-20.45c0-2.67-2.164-4.835-4.833-4.835    H56.843c-2.67,0-4.835,2.165-4.835,4.835H34.356v-3.384h-9.563v3.384v1.178h-7.061v1.416c-2.67,0.27-10.17,1.424-13.882,5.972    c-1.773,2.17-2.44,4.791-1.983,7.793c0.463,3.043,1.271,6.346,2.128,9.841c2.354,9.616,5.024,20.515,0.549,28.077    C2.647,79.44-3.125,90.589,2.201,99.547c4.123,6.935,13.701,10.44,28.5,10.44c1.186,0,2.405-0.023,3.658-0.068v9.028h-0.296    c-2.516,0-4.558,2.039-4.558,4.558v4.566h100.04v-4.564c0-2.519-2.039-4.558-4.558-4.558h-0.297V84.631h0.297    c2.519,0,4.558-2.037,4.558-4.556v-0.009c0-2.516-2.039-4.556-4.556-4.556l-36.786-0.009V61.973c0-2.193-1.777-3.971-3.972-3.971    v-4.711h0.456c1.629,0,2.952-1.32,2.952-2.949h14.227V34.459h1.658c2.672,0,4.834-2.165,4.834-4.834h20.45v3.069H126.82z     M34.06,75.511c-2.518,0-4.558,2.04-4.558,4.556v0.009c0,2.519,2.042,4.556,4.558,4.556h0.296v24.12l-0.042-1.168    c-15.994,0.574-26.122-2.523-30.106-9.229C-0.464,90.5,4.822,80.347,6.55,77.423c4.964-8.382,2.173-19.774-0.29-29.825    c-0.843-3.442-1.639-6.696-2.088-9.638c-0.354-2.35,0.129-4.3,1.484-5.958c3.029-3.714,9.509-4.805,12.076-5.1v1.233h7.061v1.49    v2.684c-2.403,1.114-4.153,2.997-4.676,5.237H18.15c-0.584,0-1.056,0.474-1.056,1.056v0.83c0,0.584,0.475,1.056,1.056,1.056h1.984    c0.561,2.18,2.304,3.999,4.658,5.092v0.029c0,0-2.282,20.823,16.479,22.099v1.102c0,1.177,0.955,2.133,2.133,2.133h3.297    c1.178,0,2.133-0.956,2.133-2.133V50.135c0-1.177-0.955-2.132-2.133-2.132h-3.297c-1.178,0-2.133,0.955-2.133,2.132    c-1.575-0.235-5.532-1.17-6.635-4.547c2.36-1.092,4.109-2.913,4.669-5.097h1.308c0.722,0,1.309-0.584,1.309-1.308v-0.578    c0-0.584-0.475-1.056-1.056-1.056h-1.539c-0.542-2.332-2.416-4.271-4.968-5.363v-2.559h17.651c0,2.67,2.166,4.835,4.836,4.835 h2.392v15.88h13.639c0,1.629,1.321,2.949,2.951,2.949h0.899v4.711c-2.194,0-3.972,1.778-3.972,3.971v13.529L34.06,75.511z     M95.188,101.78c0,8.655-7.012,15.665-15.664,15.665c-8.653,0-15.667-7.01-15.667-15.665c0-8.647,7.014-15.664,15.667-15.664    C88.177,86.116,95.188,93.132,95.188,101.78z M97.189,45.669h-9.556c0-0.896-0.726-1.62-1.619-1.62H74.494    c-0.896,0-1.621,0.727-1.621,1.62h-8.967v-11.21h33.283V45.669z"></path>         <path d="M70.865,101.78c0,4.774,3.886,8.657,8.66,8.657c4.774,0,8.657-3.883,8.657-8.657c0-4.773-3.883-8.656-8.657-8.656    C74.751,93.124,70.865,97.006,70.865,101.78z"></path>       </svg>     </div>     <form action="#" method="post" id="contact_form">       <div class="name">         <label for="name"></label>         <input type="text" placeholder="My name is" name="name" id="name_input" required>       </div>       <div class="email">         <label for="email"></label>         <input type="email" placeholder="My e-mail is" name="email" id="email_input" required>       </div>       <div class="telephone">         <label for="name"></label>         <input type="text" placeholder="My number is" name="telephone" id="telephone_input" required>       </div>       <div class="subject">         <label for="subject"></label>         <select placeholder="Subject line" name="subject" id="subject_input" required>           <option disabled hidden selected>Subject line</option>           <option>I'd like to start a project</option>           <option>I'd like to ask a question</option>           <option>I'd like to make a proposal</option>         </select>       </div>       <div class="message">         <label for="message"></label>         <textarea name="message" placeholder="I'd like to chat about" id="message_input" cols="30" rows="5" required></textarea>       </div>       <div class="submit">         <input type="submit" value="Send Message" id="form_button" />       </div>     </form><!-- // End form -->   </div><!-- // End #container -->

<style>     @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); html {   width: 100%;   height: 100%; } body {   width: 100%;   height: 100%;   margin: 0;   padding: 0;   font-family: 'Open Sans', sans-serif;   font-weight: 300;   background: #FDFDFD; } .container {   width: 100%;   height: 100%;   margin: 0;   padding: 0;   transition: all 0.3s ease; } body.menu-active .container {   transform: scale(0.9); } .container .inner {   width: 100%;   height: 100%;   margin: 0;   padding: 0;   box-sizing: border-box;   overflow: hidden; } .nav {   position: fixed;   display: block;   top: 0;   left: 0;   width: 100%;   height: 75px;   margin: 0;   padding: 0 25px;   box-sizing: border-box;   z-index: 99; } .nav a {   display: inline-block;   height: 75px;   line-height: 75px;   font-size: 30px;   padding: 0 25px;   color: #0050e6;   text-decoration: none;   cursor: pointer;   text-align: center;     transition: all 0.32s ease; } body:not(.menu-active) .nav a.menu-activator:hover {   transform: rotate(90deg); } body.menu-active .nav a.menu-activator {   transform: rotate(90deg); } .nav a.white {   color: #FAFAFA; } body.menu-active .nav a.white {   color: #0065fd;   transition: all 0.15s ease; } .nav a.link {   float: right;   position: relative;   text-align: center; } .nav a.link i {   position: absolute;   display: block;   transform: translateX(-50%);     transition: all 0.32s ease; } .nav a.link i.hidden {   opacity: 0;   pointer-events: none; } .nav a.link:hover i {   opacity: 0;   pointer-events: none; } .nav a.link:hover i.hidden {   opacity: 1;   pointer-events: auto; } .nav i.ion-cube {   display: inline-block;   position: absolute;   height: 75px;   line-height: 75px;   font-size: 35px;   left: 50%;   transform: translateX(-50%); } .container .inner .panel {   position: relative;   box-sizing: border-box;   height: 100%;   width: 60%;   float: left;   transform: skew(-20deg); } .container .inner .panel.panel-left {   margin-left: -10%; } .container .inner .panel .panel-content {   position: absolute;   width: 100%;   height: 100%;   left: 50%;   top: 50%;   transform: translateX(-50%) translateY(-50%) skew(20deg); } .container .inner .panel.panel-left .panel-content .image-background {   position: absolute;   width: 100%;   height: 100%;   left: 50%;   top: 50%;   opacity: 0.95;   background-image: url('http://uplusion23.net/images/RickGenestSm.png');   background-position: center bottom;   background-repeat: no-repeat;   background-size: 50%;   transform: translateX(-50%) translateY(-50%); } .container .inner .panel.panel-right {   margin-right: -10%;   background: rgb(0, 68, 255); } .container .inner .panel.panel-right .panel-content .form {   display: block;   position: absolute;   margin: 0 auto;   width: 300px;   min-height: 400px;   top: 50%;   left: 50%;   transform: translateX(-50%) translateY(-25%); } .container .inner .panel.panel-right .panel-content .form h1 {   display: block;   margin: 0 0 45px 0;   color: #B1B1B1;   font-weight: 200;   font-size: 18px; } .group {   position: relative;   margin-bottom: 25px; } input {   font-size: 13px;     padding: 15px 10px 10px 5px;   display: block;   width: 300px;   border: none;   outline: none;   border-bottom: 1px solid #B1B1B1;   color: #B1B1B1;   background: rgba(0, 89, 255, 0);   opacity: 0.5;   transition: 0.2s ease; } input:focus {   outline: none;   opacity: 1; } label {   color: #B1B1B1;   font-size: 13px;   font-weight: normal;   position: absolute;   pointer-events: none;   left: 5px;   top: 15px;   opacity: 0.5;   transition: 0.2s ease all;   -moz-transition: 0.2s ease all;   -webkit-transition: 0.2s ease all; } /* active state */ input:focus ~ label, input:valid ~ label {   top: -10px;   font-size: 12px;   color: #B1B1B1;   opacity: 1; } .highlight {   position: absolute;   height: 60%;   width: 100px;   top: 25%;   left: 0;   pointer-events: none;   opacity: 0.5; } /* active state */ input:focus ~ .highlight {   -webkit-animation:inputHighlighter 0.3s ease;   -moz-animation:inputHighlighter 0.3s ease;   animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter {   from { background:#B1B1B1; }   to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter {   from { background:#B1B1B1; }   to { width:0; background:transparent; } } @keyframes inputHighlighter {   from { background:#B1B1B1; }   to { width:0; background:transparent; } } a.send-btn {   float: right;   color: #B1B1B1;   transition: 0.2s ease; } a.send-btn:hover {   color: #FAFAFA;   cursor: pointer; } .menu {   position: fixed;   top: 0;   left: -100%;   width: 100%;   height: 100%;   box-sizing: border-box;   overflow-x: hidden;   overflow-y: auto;     transition: all 0.33s ease; } .menu::before {   content: '';   display: block;   width: 100%;   height: 100%;   position: absolute;   top: 0;   left: 0;   background: rgb(0, 89, 255);     transition: all 0.45s ease; } body.menu-active .menu {   left: 0; } body.menu-active .menu::before {   background: rgba(0, 119, 255, 0.9); } </style> <div class="nav">     <a href="#" class="menu-activator"><i class="ion-ios-more"></i></a>     <i class="ion-cube"></i>     <a href="#" class="white link"><i class="ion-ios-redo-outline"></i><i class="ion-ios-redo hidden"></i></a>   </div>   <div class="container">     <div class="inner">       <div class="panel panel-left">         <div class="panel-content">           <div class="image-background">           </div>         </div>       </div>       <div class="panel panel-right">         <div class="panel-content">           <div class="form">             <h1>Leave a comment</h1>             <div class="group">                    <input type="text" required>               <span class="highlight"></span>               <label>Your name</label>             </div>             <div class="group">                    <input type="text" required>               <span class="highlight"></span>               <label>Your email</label>             </div>             <a class="send-btn">Send</a>           </div>         </div>       </div>     </div>   </div>   <div class="menu"></div>   <script>       $(".menu-activator").on("click", function() {   $("body").toggleClass("menu-active"); });   </script>

<style> @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); body {     margin:0;     padding:0;     width:100%;     height:100vh;     font-family:serif;     background:linear-gradient(0deg,#6b3aff 50%,#fff 50%,#fff);     font-family:'Source Sans Pro', sans-serif; } .wrapper{     position:absolute ;     top:50%;     left:50%;     transform:translate(-50%,-50%);     width:300px;     padding:40px;     box-sizing:border-box ;     background:#fff;     box-shadow:0px 10px 30px rgba(0,0,0,.5);     border-radius:5px; } .wrapper h2{     color:#666;     margin:0;     padding:0;     text-transform:uppercase ;     text-align:center ;     font-size:30px; } .inp-field{     position:relative ;     width:100%;     margin-top:30px; } .inp-field input, .inp-field textarea{     width:100%;     padding:5px 0;     box-sizing:border-box ;     text-transform:uppercase ;     background:transparent ;     border:none;     outline:none ;     border-bottom:1px solid #666;     font-weight:700;     resize:none; } .inp-field label{     position:absolute ;     top:0;     left:0;        padding:5px 0;     pointer-events:none;     color:#666;     font-weight:700;     text-transform:uppercase ;     transition:.5s; } .inp-field input:focus + label, .inp-field textarea:focus + label, .inp-field input:valid + label, .inp-field textarea:valid + label{     top:-23px;     padding:2px 5px;     background:#ff006a;     color:#fff;     border-radius:4px; } .btn{     margin-top:20px;     background:#ff006a;     color:#fff;     padding:15px 30px;     border:none ;     outline:none ;     border-radius:30px;     text-transform:uppercase ;     font-weight:700;     float:right ; } .btn:hover{     background:#6b3aff; } small{     font-size:10px; } a{     color:#ff006a;     text-decoration:none;     font-weight:800; } </style>   <div class="wrapper">         <h2>Contact Us</h2>                 <form >             <div class="inp-field">                 <input type="text" required />                 <label>Name</label>             </div>             <div class="inp-field">                 <input type="email" required />                 <label>Email</label>             </div>             <div class="inp-field">                 <input type="tel" required />                 <label>Phone</label>             </div>             <div class="inp-field">             <textarea rows="5" required></textarea>                 <label>Message</label>             </div>             <input class="btn" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>         </form>        </div>

So  hey guys i hope that it will  be help you guys a lot.  If you face  any problem or need tips than please comment below.  Thanks,  please stay with us.