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

Flat Ui Contact Form

CSSDeck G+