"Contact Form Resposive with animation"
Bootstrap 3.3.0 Snippet by jarivas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Questrial|Droid+Sans|Alice' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div></div>
<img id="postcard" src="http://upload.wikimedia.org/wikipedia/commons/6/6d/FolliesBergereBoxCostume.jpg" alt="postcard" class="img-responsive move">
<div id="content" >
<h1> Contact me </h1>
<form role="form">
<div class="form-group">
<label for="username" class="iconic user" > Name <span class="required">*</span></label>
<input type="text" class="form-control" name="username" id="username" required="required" placeholder="Hi friend, how may I call you ?">
</div>
<div class="form-group">
<label for="usermail" class="iconic mail-alt"> E-mail address <span class="required">*</span></label>
<input type="email" class="form-control" name="usermail" id="usermail" placeholder="I promise I hate spam as much as you do" required="required">
</div>
<div class="form-group">
<label for="subject" class="iconic quote-alt"> Subject </label>
<input type="text" class="form-control" name="subject" id="subject" required="required" placeholder="What would you like to talk about?">
</div>
<div class="form-group">
<label for="message" class="iconic comment"> Message </label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* generic */
body {
color: #3F3F3F;
font-family: 'Droid Sans',Tahoma,Arial,Verdana sans-serif;
font-size: 16px;
background: #3F3F3F;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
@font-face {
font-family: 'IconicStroke';
src: url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.eot');
src: url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.woff') format('woff'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.ttf') format('truetype'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.svg#IconicStrokeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align: center;
font-size: 40px;
padding: 0;
margin: 0 0 20px 0;
position: relative;
color: #8C8C8C;
}
/* * have a nice ampersand *
================================================== */
h1:after {
font-size: 25px;
color: #D6CFCB;
content: '&';
text-align: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: