Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
  <meta charset="utf-8">
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
  <title>Modal Box Contact Form</title>
10
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
11
</head>
12
<body>
13
  <form action="" class="contact">
14
    <fieldset class="contact-inner">
15
      <p class="contact-input">
16
        <input type="text" name="name" placeholder="Your Name…" autofocus>
17
      </p>
18
 
19
      <p class="contact-input">
20
        <label for="select" class="select">
21
          <select name="subject" id="select">
22
            <option value="" selected>Choose Subject…</option>
23
            <option value="1">I have a suggestion</option>
24
            <option value="1">I found a bug</option>
25
            <option value="1">Other</option>
26
          </select>
27
        </label>
28
      </p>
29
 
30
      <p class="contact-input">
31
        <textarea name="message" placeholder="Your Message…"></textarea>
32
      </p>
33
 
34
      <p class="contact-submit">
35
        <input type="submit" value="Send Message">
36
      </p>
37
    </fieldset>
38
  </form>
39
</body>
40
</html>
41
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2013 Thibaut Courouble
3
 * http://www.cssflow.com
4
 *
5
 * Licensed under the MIT License:
6
 * http://www.opensource.org/licenses/mit-license.php
7
 *
8
 * View the Sass/SCSS source at:
9
 * http://www.cssflow.com/snippets/modal-box-contact-form/demo/scss
10
 *
11
 * Original PSD by Orman Clark: http://goo.gl/Ef98x
12
 */
13
 
14
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
15
 
16
::-moz-focus-inner {
17
  padding: 0;
18
  border: 0;
19
}
20
 
21
:-moz-placeholder {
22
  color: #879fa6 !important;
23
}
24
 
25
::-webkit-input-placeholder {
26
  color: #879fa6;
27
}
28
 
29
:-ms-input-placeholder {
30
  color: #879fa6 !important;
31
}
32
 
33
body {
34
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
35
  color: #404040;
36
  background: #e4ecef;
37
}
38
 
39
input, textarea, select, label {
40
  font-family: inherit;
41
  font-size: 12px;
42
  -webkit-box-sizing: border-box;
43
  -moz-box-sizing: border-box;
44
  box-sizing: border-box;
45
}
46
 
47
.contact {
48
  position: relative;
49
  margin: 20px auto 30px;
50
  padding: 5px;
51
  width: 320px;
52
  background: #eef5f7;
53
  border: 1px solid #cfd5da;
54
  border-bottom-color: #ccd1d6;
55
  border-radius: 3px;
56
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
57
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
58
}
59
 
60
.contact-inner {
61
  padding: 25px;
62
  background: white;
63
  border-radius: 2px;
64
}
65
 
66
.contact:before, .contact:after, .contact-inner:before, .contact-inner:after {
67
  content: '';
68
  position: absolute;
69
  top: 100%;
70
  left: 50%;
71
  margin-left: -6px;
72
  width: 1px;
73
  height: 1px;
74
  border: outset transparent;
75
  border-width: 12px 14px 0;
76
  border-top-style: solid;
77
  -webkit-transform: rotate(360deg);
78
}
79
 
80
.contact:before {
81
  margin-top: 1px;
82
  border-top-color: #d8e1e6;
83
}
84
 
85
.contact-inner:before {
86
  border-top-color: #ccd1d6;
87
}
88
 
89
.contact-inner:after {
90
  margin-top: -1px;
91
  border-top-color: #eef5f7;
92
}
93
 
94
.contact:after {
95
  margin-top: -8px;
96
  border-top-color: white;
97
}
98
 
99
.contact-input {
100
  overflow: hidden;
101
  margin-bottom: 20px;
102
  padding: 5px;
103
  background: #eef7f9;
104
  border-radius: 2px;
105
}
106
 
107
.contact-input > input, .contact-input > textarea {
108
  display: block;
109
  width: 100%;
110
  height: 29px;
111
  padding: 0 9px;
112
  color: #4d5a5e;
113
  background: white;
114
  border: 1px solid #cfdfe3;
115
  border-bottom-color: #d2e2e7;
116
  border-radius: 2px;
117
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
118
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
119
}
120
 
121
.contact-input > input:focus, .contact-input > textarea:focus {
122
  border-color: #93c2ec;
123
  outline: 0;
124
  -webkit-box-shadow: 0 0 0 8px #e1ecf5;
125
  box-shadow: 0 0 0 8px #e1ecf5;
126
}
127
 
128
.lt-ie9 .contact-input > input, .lt-ie9 .contact-input > textarea {
129
  line-height: 27px;
130
}
131
 
132
.contact-input > textarea {
133
  padding: 4px 8px;
134
  height: 90px;
135
  line-height: 20px;
136
  resize: none;
137
}
138
 
139
.select {
140
  display: block;
141
  position: relative;
142
  overflow: hidden;
143
  background: white;
144
  border: 1px solid #d2e2e7;
145
  border-bottom-color: #c5d4d9;
146
  border-radius: 2px;
147
  background-image: -webkit-linear-gradient(top, #fcfdff, #f2f7f7);
148
  background-image: -moz-linear-gradient(top, #fcfdff, #f2f7f7);
149
  background-image: -o-linear-gradient(top, #fcfdff, #f2f7f7);
150
  background-image: linear-gradient(to bottom, #fcfdff, #f2f7f7);
151
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
152
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
153
}
154
 
155
.select:before, .select:after {
156
  content: '';
157
  position: absolute;
158
  right: 11px;
159
  width: 0;
160
  height: 0;
161
  border-left: 3px outset transparent;
162
  border-right: 3px outset transparent;
163
}
164
 
165
.select:before {
166
  top: 10px;
167
  border-bottom: 3px solid #7f9298;
168
}
169
 
170
.select:after {
171
  top: 16px;
172
  border-top: 3px solid #7f9298;
173
}
174
 
175
.select > select {
176
  position: relative;
177
  z-index: 2;
178
  width: 112%;
179
  height: 29px;
180
  line-height: 17px;
181
  padding: 5px 9px;
182
  padding-right: 0;
183
  color: #80989f;
184
  background: transparent;
185
  background: rgba(0, 0, 0, 0);
186
  border: 0;
187
  -webkit-appearance: none;
188
}
189
 
190
.select > select:focus {
191
  color: #4d5a5e;
192
  outline: 0;
193
}
194
 
195
.contact-submit {
196
  text-align: right;
197
}
198
 
199
.contact-submit > input {
200
  display: inline-block;
201
  vertical-align: top;
202
  padding: 0 14px;
203
  height: 29px;
204
  font-weight: bold;
205
  color: #729fb2;
206
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
207
  background: #deeef4;
208
  border: 1px solid #bed6e3;
209
  border-bottom-color: #accbd9;
210
  border-radius: 15px;
211
  cursor: pointer;
212
  background-image: -webkit-linear-gradient(top, #e6f2f7, #d0e6ee);
213
  background-image: -moz-linear-gradient(top, #e6f2f7, #d0e6ee);
214
  background-image: -o-linear-gradient(top, #e6f2f7, #d0e6ee);
215
  background-image: linear-gradient(to bottom, #e6f2f7, #d0e6ee);
216
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
217
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
218
}
219
 
220
.contact-submit > input:active {
221
  color: #6a95a9;
222
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
223
  background: #c9dfe9;
224
  border-color: #a3bed0 #b5ccda #b5ccda;
225
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
226
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
227
}
228
 
 

Modal Box Contact Form

CSSDeck G+