Submit Form Example

HTML <body>

<div class="cwrapper">
  <div class="content vcenter">
    <img class="sxswlogo" src="http://45.55.0.102/wp-content/uploads/2016/01/SXSW_Logo.png" alt="SXSW_Logo">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <form>   
      <i id="star" class="fa fa-star-o"></i>
      <input name="name" type="text" placeholder="Name" />   
      <input name="email" type="text" placeholder="Email" />
      <input type="submit" value="Submit!"/>
    </form>
    <p class="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

CSS <style>

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

* {padding:0; margin:0; box-sizing:border-box; font-family: 'Montserrat', Arial, Helvetica, sans-serif;}
body {background: #F9F9F9 url('http://azmind.com/wp-content/uploads/2012/10/subtle-pattern-2.jpg') repeat;}

.cwrapper {height:100vh; letter-spacing:-1px; color:#4ECDC4;}
.content {width:100%; text-align:center; color:#333; background-color:#FFF; padding:25px;}
	.content.vcenter {position:relative; top:50%; max-width:450px; margin:0 auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}
	.content .sxswlogo {width:400px;}
	.content h2 {font-size:2.5em;}
	.content p {font-size:1.2em;}
.content form {margin-top:25px;}
	.content form #star {font-size:1.5em; margin-bottom:25px;}
	.content form input {border-radius:5px; line-height:22px; border:2px solid #81bc00; transition:all 0.3s; padding:13px; margin-bottom:15px; width:100%; outline:0;}
	.content form input:focus {border:2px solid #A35378;}
	.content form input[type="submit"] {border:none; background-color:#81bc00; color:#FFF; font-size:1.5em; padding:16px;}
		.content form input[type="submit"]:hover {background-color:#21bc00; cursor:pointer;}
	.content p.foot {font-size:0.7em; color:#999;}

JS <script> (jQuery supported)

Give us some feedback, any feedback, we just want feedback!

Submit Form Example

Branch Project