jsFiddle Bootstrap 3.3.6 + jQuery 2.2 + FontAwesome
Bootstrap and jQuery and FontAwesome jsFiddle template - maxcdn complete
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form action="" id="FormMessage" method="post">
<div style="max-width:700px;">
<div id="DivMessage" class="txt-l" style="max-width:600px;">
<div class="row" style="margin:0px;">
<div class="col-sm-6" style="padding:0px;">
<input name="InputName" id="InputName" class="name" type="text" width="100%" placeholder="Your name" required>
</div>
<div class="col-sm-6" style="padding:0px;">
<input name="InputEmail" id="InputName" class="email" type="text" width="100%" placeholder="Your email" required>
</div>
</div>
<div>
<input name="InputSubject" id="InputSubject" class="subject" type="text" placeholder="Subjet" required>
</div>
<div>
<textarea name="TextareaBody" id="TextareaBody" class="message" rows="7" placeholder="Your Message" required></textarea>
</div>
<div class="pad-t-20 txt-c">
<button id="BtMessage" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</form>
CSS
body {
padding: 40px;
}
.name, .email, .subject, .message {
padding: 0 0 0 20px;
background: #f8f8f8;
width:100%;
margin: 0;
border-radius:0;
height: 50px;
border: 1px solid rgba(0,0,0,.1);
}
.email {
border-left:0;
}
.subject {
border-top:0;
}
.message {
height: 13em;
border-top:0;
resize:vertical;
padding: 20px 20px 20px 20px;
}
.name:focus, .email:focus, .subject:focus, .message:focus {
outline: none;
background: #ffffff;
color: rgba(51,51,51,.8);
}
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:none;
}
textarea:required {
box-shadow:none;
}
textarea:invalid {
box-shadow:none;
}