"Simplest contact form"
Bootstrap 3.1.0 Snippet by explotter

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Contact us</legend> <!-- Personal Title--> <div class="form-group"> <label class="col-md-4 control-label" for="personal-title">Personal Title</label> <div class="col-md-8"> <select id="personal-title" name="personal-title" class="form-control"> <option class="lt" value="--">none</option> <option class="lt" value="Mr.">Mr.</option> <option class="lt" value="Mrs.">Mrs.</option> <option class="lt" value="Miss.">Miss.</option> <option class="lt" value="Dr.">Dr.</option> </select> </div> </div> <!-- First Name input--> <div class="form-group"> <label class="col-md-4 control-label" for="first-name">First Name</label> <div class="col-md-8"> <input id="first-name" name="first-name" type="text" placeholder="First Name" class="form-control"> </div> </div> <!-- Middle Name input--> <div class="form-group"> <label class="col-md-4 control-label" for="middle-name">Middle Name</label> <div class="col-md-8"> <input id="middle-name" name="middle-name" type="text" placeholder="Middle Name" class="form-control"> </div> </div> <!-- First Name input--> <div class="form-group"> <label class="col-md-4 control-label" for="last-name">Last Name</label> <div class="col-md-8"> <input id="last-name" name="last-name" type="text" placeholder="Last Name" class="form-control"> </div> </div> <hr /> <!-- Email input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">Your E-mail</label> <div class="col-md-8"> <input id="email" name="email" type="text" placeholder="Your email" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="phone">Your Phone Number</label> <div class="col-md-8"> <input id="phone" name="phone" type="text" placeholder="Your Phone Number" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="birthday">Date of Birth</label> <div class="col-md-8"> <input id="birthday" name="birthday" type="text" placeholder="Date of Birth - dd/mm/YYYY" class="form-control"> </div> </div> <hr /> <!-- Citizenship--> <div class="form-group"> <label class="col-md-4 control-label" for="citizenship">Citizenship</label> <div class="col-md-8"> <select id="Citizenship" name="Citizenship" class="form-control"> <option class="lt" value="--">none</option> <option class="lt" value="Aruba">Aruba</option> </select> </div> </div> <!-- Education Level--> <div class="form-group"> <label class="col-md-4 control-label" for="education-level">Education Level</label> <div class="col-md-8"> <select id="education-level" name="education-level" class="form-control"> <option class="lt" value="--">none</option> <option class="lt" value="B.Sc.">B.Sc.</option> <option class="lt" value="M.Sc.">M.Sc.</option> <option class="lt" value="Ph.D">Ph.D</option> <option class="lt" value="Proffesor">Proffesor</option> </select> </div> </div> <!-- Address --> <div class="form-group"> <label class="col-md-4 control-label" for="adrress">Your adrress</label> <div class="col-md-8"> <textarea class="form-control" id="adrress" name="adrress" placeholder="Please enter your address here..." rows="5"></textarea> </div> </div> <!-- City of Residence --> <div class="form-group"> <label class="col-md-4 control-label" for="city">City of Residence</label> <div class="col-md-8"> <input id="city" name="city" type="text" placeholder="City of Residence" class="form-control"> </div> </div> <!-- Zip Code --> <div class="form-group"> <label class="col-md-4 control-label" for="zipcode">Zipcode</label> <div class="col-md-8"> <input id="zipcode" name="zipcode" type="text" placeholder="Zipcode" class="form-control"> </div> </div> <!-- country-of-residence--> <div class="form-group"> <label class="col-md-4 control-label" for="country">Country</label> <div class="col-md-8"> <select id="country" name="country" class="form-control"> <option class="lt" value="--">none</option> <option class="lt" value="Aruba">Aruba</option> </select> </div> </div> <!-- country-of-residence--> <div class="form-group"> <label class="col-md-4 control-label" for="country">CV (Word or PDF)</label> <div class="col-md-8"> <label class="btn btn-default" for="my-file-selector"> <input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').html($(this).val());"> Select </label> <span class='label label-info' id="upload-file-info">(Allowed File Types Are: .pdf, .doc, .docx, .jpeg, .jpg, .png )</span> </div> </div> <hr /> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Submit application</button> </div> </div> </fieldset> </form> </div> </div> </div> </div>
body {padding-top:20px;}

Related: See More


Questions / Comments: