"bootstrap3 job application form "
Bootstrap 3.3.0 Snippet by ravic9089

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container formsection margintop60 staicp"> <h1 class="noneunder"> Job Application form</h1> </div> <div class="container formsection"> <div class="row margt0"> <div class="col-xs-12 col-sm-9"> <form class="form-horizontal formJob" name="form_jobapplication" id="jobAppForm" action="" method="POST" role="form"> <div class="setup-content" id="" style="display:block;"> <div class="sidehead">Personal Information:</div> <div class="form-group"> <label class="col-xs-12 col-sm-4 col-md-4 com4mod control-label mandatory">Apply For</label> <div class="col-xs-12 col-sm-7 col-md-8 com7mod"> <div class="row checkmargin specify"> <div class="col-sm-12 row-no-padding"> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="sr[]" value="1"><span class="text-sr">SR</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="delevery_man[]" value="2"><span class="text-sr"> DELEVERY MAN</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="accounts[]" value="3"><span class="text-sr"> ACCOUNTS</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="supervisor[]" value="4"><span class="text-sr">SUPERVISOR</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="parking[]" value="5"><span class="text-sr">PACKING</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="store_keeper[]" value="6"><span class="text-sr">STORE KEEPER</span> </label> <label class="col-xs-12 col-sm-6 col-md-3 "> <input type="checkbox" name="driver[]" value="7"><span class="text-sr">DRIVER</span> </label> </div> </div> </div> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Name</label></span> <span> <div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"> <img src="img/user.png"> </span> <input type="text" class="form-control blur" placeholder="Enter Your Name" name="name" required="required"> </div> </div> </span> </div> <!--<div class="form-group"> <label class="col-xs-12 col-sm-4 col-md-4 com4mod control-label mandatory">Last Name</label> <div class="col-sm-1 com1mod padtop20 hidden-xs">:</div> <div class="col-xs-12 col-sm-7 col-md-7 com7mod"> <div class="input-group"> <span class="input-group-addon"> <img src="img/user.png"> </span> <input type="text" class="form-control blur" placeholder="Enter Your LName" name="nameLast" required="required"> </div> </div> </div>--> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">DOB </label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/calender.png"></span> <input class="form-control blur" id="date" type="date" name="bday" placeholder="Enter dob" required="required"> </div> <span id="result" style="color:red"></span> </div> </span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 control-label mandatory">Email Id </label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/profile.png"></span> <input class="form-control blur" id="email" minlength="6" type="mail" name="email" placeholder="Enter Your Email Id" required="required"> </div> <span id="result" style="color:red"></span> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Mobile</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/mobile.png"></span> <input name="mobile" id="mobile" type="number" class="form-control blur" placeholder="Enter Mobile" required=""> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label">Secondary Mobile</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/mobile.png"></span> <input name="secondary_mobile" type="number" class="form-control blur" placeholder="Enter Secondary Mobile"> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Address Details</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon height100"><img src="img/addreess.png"></span> <textarea class="form-control height100 blur" placeholder="please enter your address" minlength="6" name="address" required="required"></textarea> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">State</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/state.png"></span> <select class="form-control myselectclass blur" name="state" required="required"> <option value="">select State</option> <option value="West Bengal">West Bengal</option> <option value="Assam">Assam</option> <option value="Bihar">Bihar</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">City</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/city.png"></span> <input type="text" id="city" name="city" class="form-control blur" placeholder="City" required="required"> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Country</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/country.png"></span> <select class="form-control myselectclass" name="country" required="required"> <option value="1">India</option> <option value="2">Australia</option> <option value="3">China</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Pincode</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/pincode.png"></span> <input type="text" name="pincode" pattern="[0-9]{6,6}" maxlength="6" class="form-control blur" placeholder="Enter Pincode" required="required"> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Religion</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/industrytype.png"></span> <input type="text" name="religion" class="form-control blur" placeholder="Enter Religion" required="required"> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Blood Group</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/state.png"></span> <select id="blood_group" class="form-control blur" name="blood_group" required=""> <option value="">select Blood Group </option> <option value="1">A+</option> <option value="2">A-</option> <option value="3">B+</option> <option value="4">B-</option> <option value="5">AB+</option> <option value="6">AB-</option> <option value="7">O+</option> <option value="8">O-</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Type of Employment</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/user.png"></span> <select id="emp_type" class="form-control blur" name="emp_type" required=""> <option value="">select Education Qualification</option> <option value="1">Full Time</option> <option value="2">Part Time</option> <option value="3">Seasonal</option> <option value="4">Temporary</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Education Qualification</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/education.png"></span> <select id="investor-edu_qual" class="form-control blur" name="qualification" required=""> <option value="">select Education Qualification</option> <option value="1">Other</option> <option value="2">Post graduate</option> <option value="3">Higher Secondary</option> <option value="4">Graduate</option> <option value="5">Diploma</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Occupation</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/user.png"></span> <select id="investor-occupation" class="form-control blur" name="occupation" required="required"> <option value="">select Occupation</option> <option value="1">Student</option> <option value="2">Service</option> <option value="3">Business</option> </select> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Secondary Education</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/occupation.png"></span> <input type="text" id="secondary_education" class="form-control blur" placeholder="Enter Name"> </div> </div></span> </div> <div class="form-group"> <span><label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Higher Secondary Education</label></span> <span><div class="col-xs-10 col-sm-8 col-md-8 com7mod"> <div class="input-group"> <span class="input-group-addon"><img src="img/occupation.png"></span> <input type="text" id="secondary_education" class="form-control blur" placeholder="Enter Name"> </div> </div></span> </div> <!--<div id="businessOccupation" style="display: none;"> <div class="form-group"> <span><label class="col-xs-10 col-sm-8 col-md-8 com4mod control-label"><span class="mandatory">Industry Type (Business In)</span><br><span class="note">Multiple Options Available - MAX 3<br>(Press Control key and select)</span></label></span> <div class="col-xs-10 col-sm-8 com7mod"> <div class="input-group"> <span class="input-group-addon height100"><img src="img/industrytype.png"></span> <select id="industry_type_business" class="form-control height100 blur" multiple="multiple"> <option value="1">Food and Beverage</option> <option value="2">Education</option> </select> </div> </div> </div> </div>--> <div class="form-group"> <label class="col-xs-2 col-sm-4 col-md-4 com4mod control-label mandatory">Summarize your skills or Qualifications</label> <div class="col-xs-10 col-sm-8 com7mod"> <div class="input-group"> <span class="input-group-addon height100"><img src="img/profile.png"></span> <textarea class="form-control height300 blur" placeholder="Write Here" minlength="6" name="skills" required="required"></textarea> </div> </div> </div> <div class="form-group"> <p class="statement">I Authorization investigation of all statements contend in this application for employment as may be necessary in arriving at an employment decision. </p> <!--<p class="datee">Date:..../..../2019 <span class="signtur">Signature</span></p>--> </div> <div class="clearfix"></div> <div class="row colbg"> <center> <button class="btn btn-default nextBtn submitinvestor" id="save1" type="submit">Register</button> </center> </div> </div> </form> </div> </div> </div>
span.input-group-addon img { width: 20px; } span.text-sr { font-size: 11px; } h1.noneunder { text-align: center; font-family:lato; } .sidehead { font-family:; margin-left: 127px; font-size: 27px; margin-top: 40px; margin-bottom:20px; } .formsection .form-control { height: auto; padding: 6px 12px; background: #fbfbfb; -webkit-box-shadow: inset 0 5px 5px 0 rgba(0,0,0,.05); } .height100 { height: 115px!important; vertical-align: top; } .height300{ height: 155px!important; vertical-align: top; } p.statement { font-size: 17px; margin-left: 40px; } p.datee { margin-left: 41px; margin-top: 40px; font-size: 15px; } span.signtur { float: right; } .formsection .btn-default { color: #dc3322; border-color: #dc3322; font-size: 18px; font-family: 'Open Sans Light',serif; padding: 8px 25px; background: blanchedalmond; margin-bottom: 30px; margin-left: 100px; } .formsection .btn-default:hover { color: #fff; background-color: #dc3322; } .input-group-addon { padding: 0px 5px; font-size: 14px; font-weight: 400; line-height: 1; color: #797979; text-align: center; background-color: ; border: 1px solid #ccc; border-radius: 4px; } .sideheadform2 { font-family:; text-align: center; font-size: 27px; margin-top: 40px; margin-bottom:20px; } input#date { padding: 0px 12px; } a { color: #337ab7; text-decoration: none; } a:hover { color: #337ab7; text-decoration: none; } p.sur { margin-left: 222px; text-align: center; margin-top: 84px; font-size: 18px; } p.applicatio { margin-left: 222px; font-size: 18px; text-align: center; } img.img-formm { margin-left: 527px; height: 50px; } input#refno { margin-left: -29px; height: 38px; width: 180px; } label.col-xs-10.col-sm-8.col-md-8.com4mod.control-label.mandatory.ref { margin-left: -27px; } button#save1 { color: #dc3322; border-color: #dc3322; font-size: 18px; font-family: 'Open Sans Light',serif; padding: 8px 25px; background: blanchedalmond; margin-bottom: 30px; margin-left: 198px; margin-top: 10px; } @media only screen and (max-width: 768px) { p.sur { margin-left: -20px; margin-top: 84px; font-size: 18px; } p.applicatio { margin-left: -5px; font-size: 18px; } img.img-formm { margin-left: 144px; height: 50px; } label.col-xs-10.col-sm-8.col-md-8.com4mod.control-label.mandatory.ref { margin-left: 19px; } input#refno { margin-left: 60px; height: 38px; width: 180px; } button#save1 { margin-left: 10px; } } @media only screen and (max-width: 768px) { .sideheadform2 { font-family: ; margin-left: 33px; font-size: 27px; margin-top: 40px; margin-bottom: 20px; } } @media all and (max-width: 768px) { .sidehead { margin-left: 54px; font-size: 26px; margin-top: 40px; margin-bottom: 20px; } .formsection .btn-default { color: #dc3322; border-color: #dc3322; font-size: 18px; font-family: 'Open Sans Light',serif; padding: 8px 25px; background: blanchedalmond; margin-bottom: 30px; margin-left:-10px; } label { font-size: 12px; } }

Related: See More


Questions / Comments: