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

Your name:

Your email:

Your feedback:

 

Submit Form Example

Project Description:

Single Page Submit Form Example Responsive Design

Created: 9 Years ago

Last edited: 9 Years ago

Branch Project

Project name:

Project description:

 

Submit Form Example
Branch Project
HTML <body>
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
2
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800' rel='stylesheet' type='text/css'>
3
 
4
<div class="cwrapper">
5
  <div class="content vcenter">
6
    <img class="sxswlogo" src="http://45.55.0.102/wp-content/uploads/2016/01/SXSW_Logo.png" alt="SXSW_Logo">
7
    <h2>Lorem ipsum</h2>
8
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
9
    <form>  
10
      <i id="star" class="fa fa-star-o"></i>
11
      <input name="name" type="text" placeholder="Name" />  
12
      <input name="email" type="text" placeholder="Email" />
13
      <input type="submit" value="Submit!"/>
14
    </form>
15
    <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>
16
  </div>
17
</div>
 
CSS <style>
1
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
2
 
3
 
4
* {padding:0; margin:0; box-sizing:border-box; font-family: 'Montserrat', Arial, Helvetica, sans-serif;}
5
body {background: #F9F9F9 url('http://azmind.com/wp-content/uploads/2012/10/subtle-pattern-2.jpg') repeat;}
6
 
7
.cwrapper {height:100vh; letter-spacing:-1px; color:#4ECDC4;}
8
.content {width:100%; text-align:center; color:#333; background-color:#FFF; padding:25px;}
9
  .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%);}
10
  .content .sxswlogo {width:400px;}
11
  .content h2 {font-size:2.5em;}
12
  .content p {font-size:1.2em;}
13
.content form {margin-top:25px;}
14
  .content form #star {font-size:1.5em; margin-bottom:25px;}
15
  .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;}
16
  .content form input:focus {border:2px solid #A35378;}
17
  .content form input[type="submit"] {border:none; background-color:#81bc00; color:#FFF; font-size:1.5em; padding:16px;}
18
    .content form input[type="submit"]:hover {background-color:#21bc00; cursor:pointer;}
19
  .content p.foot {font-size:0.7em; color:#999;}
 
JS <script> (jQuery supported)
1