Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="en" class="no-js">
3
 
4
    <head>
5
 
6
        <meta charset="utf-8">
7
        <title>Flat Contact Form</title>
8
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
        <meta name="description" content="">
10
        <meta name="author" content="">
11
 
12
        <!-- CSS -->
13
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Patua+One'>
14
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400'>
15
        <link rel="stylesheet" href="assets/css/reset.css">
16
        <link rel="stylesheet" href="assets/css/style.css">
17
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:100' rel='stylesheet' type='text/css'>
18
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -class="subject"->
19
        <!--[if lt IE 9]>
20
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
21
        <![endif]-->
22
 
23
    </head>
24
 
25
    <body>
26
 
27
        <div class="page-container">
28
            <form class='contact-us' action="" method="post">
29
                <h1>Contact Us!</h1>
30
              <hr />
31
              <br />
32
                <input type="text" name="name" class="name" placeholder="Name">
33
                <input type="text" name="email" class="email" placeholder="Email">
34
                <input type="text" name="subject" class="subject" placeholder="Subject">
35
                <textarea name="message" class="message" placeholder="Message"></textarea>          
36
                <button type="submit">Send Message</button>
37
            </form>
38
        </div>
39
 
40
        <!-- Javascript -->
41
        <script src="assets/js/jquery-1.8.2.min.js"></script>
42
        <script src="assets/js/jquery.backstretch.min.js"></script>
43
        <script src="assets/js/scripts.js"></script>
44
 
45
    </body>
46
 
47
</html>
48
 
 
CSS 
/*
1
/*
2
 *
3
 * Template Name: Flat Contact Form
4
 * Description: Flat Contact Form
5
 * Author: Luckkeyy Singh
6
 * Author URI: http://www.bloggingtronx.com
7
 *
8
 * Modified By: The-First-Tiger
9
 */
10
 
11
 
12
body {
13
    background: #eee;
14
    font-family: 'Roboto Slab', serif;
15
    font-weight: 400;
16
    text-align: left;
17
    -webkit-font-smoothing: antialiased;
18
}
19
 
20
::-moz-selection { background: #f8cc37; color: #4b2813; text-shadow: 0 2px 0 #fce653; }
21
::selection { background: #f8cc37; color: #4b2813; text-shadow: 0 2px 0 #fce653; }
22
 
23
.page-container {
24
    margin: 0 auto;
25
    padding: 60px 0 20px 0;
26
}
27
 
28
.contact-us {
29
    position: relative;
30
    width: 400px;
31
    margin: 0 auto;
32
    background: #fff;
33
}
34
 
35
hr {
36
  color: #eee;
37
  background-color: #eee;
38
  height: 1px;
39
  border: none;
40
}
41
 
42
.contact-us h1 {
43
    height: 50px;
44
    margin-bottom: 30px;
45
    background: #fff;
46
    font-family: 'Roboto Slab', serif;
47
    font-size: 30px;
48
    color: #bbb;
49
    text-transform: uppercase;
50
    line-height: 80px;
51
    text-align: center;  
52
}
53
 
54
.contact-us input {
55
    width: 302px;
56
    height: 38px;
57
    margin: 0 0 20px 30px;
58
    padding: 0 18px;
59
    background: #fdfdfd;
60
    border: 1px solid #eee;
61
    font-family: 'Roboto Slab', serif;
62
    font-size: 15px;
63
    color: #000;
64
    outline: none;
65
}
66
 
67
.contact-us input:-moz-placeholder { color: #000; }
68
.contact-us input:-ms-input-placeholder { color: #000; }
69
.contact-us input::-webkit-input-placeholder { color: #000; }
70
 
71
.contact-us textarea {
72
    width: 302px;
73
    height: 92px;
74
    margin: 0 0 20px 30px;
75
    padding: 10px 18px 0 18px;
76
    background: #fdfdfd;
77
    border: 1px solid #eee;
78
    font-family: 'Roboto Slab', serif;
79
    font-size: 15px;
80
    color: #000;
81
    outline: none;
82
}
83
 
84
.contact-us textarea:-moz-placeholder { color: #000; }
85
.contact-us textarea:-ms-input-placeholder { color: #000; }
86
.contact-us textarea::-webkit-input-placeholder { color: #000; }
87
 
88
.contact-us button {
89
    width: 402px;
90
    margin-left: -1px;
91
    height: 70px;
92
    margin-top: 14px;
93
    padding: 0;
94
    background: #fff;
95
    border: 1px solid #eee;
96
    cursor: pointer;
97
    font-family: 'Roboto Slab', serif;
98
    font-size: 24px;
99
    color: #bbb;
100
    text-transform: uppercase;
101
    line-height: 70px;
102
    text-align: center;  
103
}
104
 
105
.contact-us button:hover {
106
    background: #fbfbfb;
107
    color: #e67632;  
108
}
109
 
110
.contact-us button {
111
    -o-transition: all .3s;
112
    -moz-transition: all .3s;
113
    -webkit-transition: all .3s;
114
    -ms-transition: all .3s;
115
}
116
 
117
.contact-us p {
118
    margin: 0 30px;
119
    padding-bottom: 30px;
120
    font-size: 15px;
121
    color: #cc9471;
122
    line-height: 30px;
123
}
124
 
125
.error {
126
    display: none;
127
    position: absolute;
128
    left: 390px;
129
    height: 44px;
130
    padding: 0 25px;
131
    background: #f8cc37;
132
    font-size: 15px;
133
    color: #4b2813;
134
    font-style: italic;
135
    line-height: 44px;
136
    white-space: nowrap;
137
}
138
 
139
.error::before {
140
    content: '';
141
    position: absolute;
142
    top: 17px;
143
    left: -15px;
144
    border: 5px solid rgba(248, 204, 55, 0);
145
    border-right: 10px solid #f8cc37;
146
}
 

Another Flat Contact Form

CSSDeck G+