content logo

Bootstrap Forms:

Bootstrap 5 Responsive Employment Form with Validation

Have you ever filled out the employment form? If your answer is yes, you may have faced a form like below. The Bootstrap 5 Responsive Employment Form with Validation looks like the same form that we mentioned. This Employment Form Code is so long and is so useful. If you have a company and you want to hire a new employee, this Employment Registration Form can help you to choose the best person. By using this form, you will be aware of your employee’s personal information.  Plus, this code can save your time and you are able to choose the person in a short time.

As the preview represents, this Bootstrap 5 Form Effect has a blue background and there is a large title at the top of the page. There is a large white page on the blue background and all writings are black. You can see many fields in this HTML Application Form that represents the person’s personal information. These fields have borders and the person who wants to be hired should fill in all blanks. This page is a complete form and you can see several types of questions. These questions are considered about personality, hobbies, education, and profession.

#

Employment Form Code

#

Employment Registration Form

#

Bootstrap 5 Form Effect

#

HTML Application Form

<!-- This script got from frontendfreecode.com -->
<div class="rapid_contact_form" id="rapid_contact_form_rp_471152">
    <div class="form-title">
        <h1>Employment Application</h1>
    </div>
    <hr>
    <div class="form-container">
        <div class="tsb ">
            <form enctype="multipart/form-data" id="rp_471152" method="post" onsubmit="return rp_checkCaptcha('rp_471152');" class="needs-validation" novalidate="">
                <div class="tsb intro_text "></div>
                <input type="hidden" name="form-validated" id="form-validated" value="0">
                <h3>Applicant Information</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="firstname">First Name</label>
                        <input class="form-control" name="firstname" id="firstname" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your first name</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="middlei">Middle Initial</label>
                        <input class="form-control" name="middlei" id="middlei" type="text" required="" min="1" max="1">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your middle initial</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="lastname">Last Name</label>
                        <input class="form-control" name="lastname" id="lastname" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your last name</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="phonefirst">Primary Phone Number</label>
                        <input class="form-control" name="phonefirst" id="phonefirst" type="tel" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your primary phone number</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="phonesecond">Secondary Phone Number</label>
                        <input class="form-control" name="phonefirst" id="phonefirst" type="tel">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your primary phone number</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="email">Email Address</label>
                        <input class="form-control" name="email" id="email" type="email">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your email</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="address">Address</label>
                        <input class="form-control" name="address" id="address" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your address</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="city">City</label>
                        <input class="form-control" name="city" id="city" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your city</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="state">State</label>
                        <input class="form-control" name="state" id="state" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your state</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="zipcode">Zipcode</label>
                        <input class="form-control" name="zipcode" id="zipcode" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your zipcode</div>
                    </div>
                    <div class="col-sm-4">
                        <label for="isofage" class="form-label">Are you 18 years or older?</label>
                        <select class="form-control" name="isofage" id="isofage" required="">
                            <option value="No">No</option>
                            <option value="Yes">Yes</option>
                        </select>
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please select an option</div>
                    </div>
                    <div class="col-sm-4">
                        <label for="lawfully" class="form-label">Are you prevented from lawfully becoming employed in this country because of Visa or Immigration status?</label>
                        <select class="form-control" name="lawfully" id="lawfully" required="">
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please select an option</div>
                    </div>
                </div>
                <hr>
                <h3>Employment Desired</h3>
                <div class="row">
                    <div class="col-sm-6">
                        <div id="ftd-desiredposition">
                            <label for="desiredposition" class="form-label">Desired Position</label>
                            <div id="fin-desiredposition">
                                <input class="form-control" name="desiredposition" id="desiredposition" type="text" required="">
                            </div>
                        </div>
                        <div id="ftd-datecanstart">
                            <label for="datecanstart" class="form-label">Date you can start</label>
                            <div id="fin-datecanstart">
                                <input class="form-control" name="datecanstart" id="datecanstart" type="date" required="">
                            </div>
                        </div>
                        <div id="ftd-salarydesired">
                            <label for="wagedesired" class="form-label">Wage desired</label>
                            <div id="fin-salarydesired">
                                <input class="form-control" name="wagedesired" id="wagedesired" type="number" required="" step="0.01" min="0" max="100">
                            </div>
                        </div>
                        <div id="ftd-referredby">
                            <label for="referredby" class="form-label">Referred by</label>
                            <div id="fin-referredby">
                                <input class="form-control" name="referredby" id="referredby" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="ftd-appliedbefore">
                            <label for="appliedbefore" class="form-label">Have you ever applied to this company before?</label>
                            <div id="fin-appliedbefore">
                                <select class="form-control" name="appliedbefore" id="appliedbefore">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div id="ftd-waswithuswhen">
                            <label for="waswithuswhen" class="form-label">If yes, when?</label>
                            <div id="fin-waswithuswhen">
                                <input class="form-control" name="waswithuswhen" id="waswithuswhen" type="text">
                            </div>
                        </div>
                        <div id="ftd-felony">
                            <label for="felony" class="form-label">Have you been convicted of a felony or misdemeanor that has not been expunged by a court?</label>
                            <div id="fin-felony">
                                <select class="form-control" name="felony" id="felony">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div id="ftd-hasfelony">
                            <label for="hasfelony" class="form-label"> If yes, explain:</label>
                            <div id="fin-hasfelony">
                                <input class="form-control" name="hasfelony" id="hasfelony" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Education</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <h6>Highschool / GED</h6>
                        <div id="ftd-edu_highschool">
                            <label for="edu_highschool" class="form-label">Name</label>
                            <input name="edu_highschool" id="edu_highschool" class="form-control" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_hs_location">
                            <label for="edu_hs_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_hs_location" id="edu_hs_location" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_hs_grad">
                            <label for="edu_hs_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_hs_grad" id="edu_hs_grad" required="">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_years_left">
                            <label for="edu_hs_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_hs_years_left" id="edu_hs_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_grad_date">
                            <label for="edu_hs_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_hs_grad_date" id="edu_hs_grad_date" type="date" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_degree">
                            <label for="edu_hs_degree" class="form-label">Degree Received</label>
                            <select class="form-control" name="edu_hs_degree" id="edu_hs_degree" required="">
                                <option value="No">Highschool Diploma</option>
                                <option value="Yes">GED</option>
                                <option value="Yes">Other</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>University / College</h6>
                        <div id="ftd-edu_college">
                            <label for="edu_college" class="form-label">Name</label>
                            <input name="edu_college" id="edu_college" class="form-control" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_college_location">
                            <label for="edu_college_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_college_location" id="edu_college_location" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_college_grad">
                            <label for="edu_college_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_college_grad" id="edu_college_grad">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_years_left">
                            <label for="edu_college_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_college_years_left" id="edu_college_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_grad_date">
                            <label for="edu_college_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_college_grad_date" id="edu_college_grad_date" type="date">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_degree">
                            <label for="edu_college_degree" class="form-label">Degree Received</label>
                            <input class="form-control" name="edu_college_degree" id="edu_college_degree" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_major">
                            <label for="edu_college_major" class="form-label">Major</label>
                            <input class="form-control" name="edu_college_major" id="edu_college_major" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Professional / Vocational</h6>
                        <div id="ftd-edu_other">
                            <label for="edu_other" class="form-label">Name</label>
                            <input name="edu_other" id="edu_other" class="form-control" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_other_location">
                            <label for="edu_other_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_other_location" id="edu_other_location" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_other_grad">
                            <label for="edu_other_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_other_grad" id="edu_other_grad">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_years_left">
                            <label for="edu_other_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_other_years_left" id="edu_other_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_grad_date">
                            <label for="edu_other_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_other_grad_date" id="edu_other_grad_date" type="date">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_degree">
                            <label for="edu_other_degree" class="form-label">Degree Received</label>
                            <input class="form-control" name="edu_other_degree" id="edu_other_degree" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_major">
                            <label for="edu_other_major" class="form-label">Major</label>
                            <input class="form-control" name="edu_other_major" id="edu_other_major" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Professional References</h3>
                <p>Please list three professional references.</p>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref1name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref1name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref1company" class="form-label">Company</label>
                            <input class="form-control" name="ref1company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref1relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref1relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref1phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref1phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref2name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref2name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref2company" class="form-label">Company</label>
                            <input class="form-control" name="ref2company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref2relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref2relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref2phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref2phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref3name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref3name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref3company" class="form-label">Company</label>
                            <input class="form-control" name="ref3company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref3relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref3relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref3phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref3phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Previous Employment</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <h6>Past Employer 1</h6>
                        <div id="ftd-emp1_company">
                            <label for="emp1_company" class="form-label">Company</label>
                            <input class="form-control" name="emp1_company" id="emp1_company" type="text">
                        </div>
                        <div id="ftd-emp1_phone">
                            <label for="emp1_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp1_phone" id="emp1_phone" type="text">
                        </div>
                        <div id="ftr-emp1_address">
                            <label for="emp1_address" class="form-label">Address</label>
                            <input class="form-control" name="emp1_address" id="emp1_address" type="text">
                        </div>
                        <div id="ftr-emp1_supervisor">
                            <label for="emp1_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp1_supervisor" id="emp1_supervisor" type="text">
                        </div>
                        <div id="ftr-emp1_job_title">
                            <label for="emp1_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp1_job_title" id="emp1_job_title" type="text">
                        </div>
                        <div id="ftr-emp1_salary_start">
                            <label for="emp1_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp1_salary_start" id="emp1_salary_start" type="text">
                        </div>
                        <div id="ftr-emp1_salary_ending">
                            <label for="emp1_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp1_salary_ending" id="emp1_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp1_responsibilities">
                            <label for="emp1_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp1_responsibilities" id="emp1_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp1_from">
                            <label for="emp1_from" class="form-label">From</label>
                            <input class="form-control" name="emp1_from" id="emp1_from" type="date">
                        </div>
                        <div id="ftr-emp1_to">
                            <label for="emp1_to" class="form-label">To</label>
                            <input class="form-control" name="emp1_to" id="emp1_to" type="date">
                        </div>
                        <div id="ftr-emp1_reason">
                            <label for="emp1_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp1_reason" id="emp1_reason" type="text">
                        </div>
                        <div id="ftr-emp1_can_contact">
                            <label for="emp1_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp1_can_contact" id="emp1_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Past Employer 2</h6>
                        <div id="ftd-emp2_company">
                            <label for="emp2_company" class="form-label">Company</label>
                            <input class="form-control" name="emp2_company" id="emp2_company" type="text">
                        </div>
                        <div id="ftd-emp2_phone">
                            <label for="emp2_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp2_phone" id="emp2_phone" type="text">
                        </div>
                        <div id="ftr-emp2_address">
                            <label for="emp2_address" class="form-label">Address</label>
                            <input class="form-control" name="emp2_address" id="emp2_address" type="text">
                        </div>
                        <div id="ftr-emp2_supervisor">
                            <label for="emp2_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp2_supervisor" id="emp2_supervisor" type="text">
                        </div>
                        <div id="ftr-emp2_job_title">
                            <label for="emp2_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp2_job_title" id="emp2_job_title" type="text">
                        </div>
                        <div id="ftr-emp2_salary_start">
                            <label for="emp2_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp2_salary_start" id="emp2_salary_start" type="text">
                        </div>
                        <div id="ftr-emp2_salary_ending">
                            <label for="emp2_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp2_salary_ending" id="emp2_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp2_responsibilities">
                            <label for="emp2_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp2_responsibilities" id="emp2_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp2_from">
                            <label for="emp2_from" class="form-label">From</label>
                            <input class="form-control" name="emp2_from" id="emp2_from" type="date">
                        </div>
                        <div id="ftr-emp2_to">
                            <label for="emp2_to" class="form-label">To</label>
                            <input class="form-control" name="emp2_to" id="emp2_to" type="date">
                        </div>
                        <div id="ftr-emp2_reason">
                            <label for="emp2_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp2_reason" id="emp2_reason" type="text">
                        </div>
                        <div id="ftr-emp2_can_contact">
                            <label for="emp2_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp2_can_contact" id="emp2_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Past Employer 3</h6>
                        <div id="ftd-emp3_company">
                            <label for="emp3_company" class="form-label">Company</label>
                            <input class="form-control" name="emp3_company" id="emp3_company" type="text">
                        </div>
                        <div id="ftd-emp3_phone">
                            <label for="emp3_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp3_phone" id="emp3_phone" type="text">
                        </div>
                        <div id="ftr-emp3_address">
                            <label for="emp3_address" class="form-label">Address</label>
                            <input class="form-control" name="emp3_address" id="emp3_address" type="text">
                        </div>
                        <div id="ftr-emp3_supervisor">
                            <label for="emp3_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp3_supervisor" id="emp3_supervisor" type="text">
                        </div>
                        <div id="ftr-emp3_job_title">
                            <label for="emp3_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp3_job_title" id="emp3_job_title" type="text">
                        </div>
                        <div id="ftr-emp3_salary_start">
                            <label for="emp3_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp3_salary_start" id="emp3_salary_start" type="text">
                        </div>
                        <div id="ftr-emp3_salary_ending">
                            <label for="emp3_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp3_salary_ending" id="emp3_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp3_responsibilities">
                            <label for="emp3_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp3_responsibilities" id="emp3_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp3_from">
                            <label for="emp3_from" class="form-label">From</label>
                            <input class="form-control" name="emp3_from" id="emp3_from" type="date">
                        </div>
                        <div id="ftr-emp3_to">
                            <label for="emp3_to" class="form-label">To</label>
                            <input class="form-control" name="emp3_to" id="emp3_to" type="date">
                        </div>
                        <div id="ftr-emp3_reason">
                            <label for="emp3_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp3_reason" id="emp3_reason" type="text">
                        </div>
                        <div id="ftr-emp3_can_contact">
                            <label for="emp3_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp3_can_contact" id="emp3_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Military Service</h3>
                <div class="row">
                    <div class="col-sm-6">
                        <div id="ftd-military_branch">
                            <label for="military_branch" class="form-label">Branch</label>
                            <input class="form-control" name="military_branch" id="military_branch" type="text">
                        </div>
                        <div id="ftd-military_from">
                            <label for="military_from" class="form-label">From</label>
                            <input class="form-control" name="military_from" id="military_from" type="date">
                        </div>
                        <div id="ftd-military_to">
                            <label for="military_to" class="form-label">To</label>
                            <input class="form-control" name="military_to" id="military_to" type="date">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="ftd-military_rank">
                            <label for="military_rank" class="form-label">Rank at Discharge</label>
                            <input class="form-control" name="military_rank" id="military_rank" type="text">
                        </div>
                        <div id="ftd-military_discharge_type">
                            <label for="military_discharge_type" class="form-label">Type of Discharge</label>
                            <input class="form-control" name="military_discharge_type" id="military_discharge_type" type="text">
                        </div>
                        <div id="ftd-military_dd214">
                            <label for="military_dd214" class="form-label">Can you provide a copy of your DD214?</label>
                            <select class="form-control" name="military_dd214" id="military_dd214">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="ftd-military_explain">
                            <label for="military_explain" class="form-label">If other than honorable, explain</label>
                            <input class="form-control" name="military_explain" id="military_explain" type="text">
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Disclaimer</h3>
                <h4>PLEASE READ CAREFULLY AND SIGN THAT YOU UNDERSTAND AND ACCEPT THIS INFORMATION.</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin </p>
                <div class="input-group">
                    <div id="rp_recaptcha" class="g-recaptcha g-recaptcha" data-sitekey="6Lfr6iQUAAAAAHUbtErW7MHmxCGzyYphbZQOljxf" data-theme="light" data-size="normal" data-tabindex="0" data-callback="" data-expired-callback="" data-error-callback="" data-recaptcha-widget-id="0">
                        <iframe style="display: none;"></iframe>
                    </div>
                    <input type="hidden" name="_hasCaptcha" id="_hasCaptcha" value="true">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
* {
	box-sizing: border-box;
}
body, html {
	overflow-x: hidden;
	font-family: "Oxygen", sans-serif;
	font-weight: 400;
}
body {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: linear-gradient( 120deg, #5600ff, #690dff, #7b1aff, #8c27ff, #9c34ff, #aa41ff, #b84eff, #c45bff, #cf68ff, #d975ff, #e282ff, #ea8fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rapid_contact_form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
}
.form-title {
	margin: 50px 0px 35px 0px;
	border-radius: 15px;
}
.form-title h1 {
	font-size: 40pt;
	font-weight: 700;
	color: white;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 767px) {
	.form-title h1 {
		text-align: center;
		font-size: 30pt;
	}
}
@media screen and (max-width: 350px) {
	.form-title h1 {
		font-size: 30pt;
	}
}
.form-container {
	margin-bottom: 50px;
	width: 75%;
	border-radius: 20px;
}
@media screen and (max-width: 1300px) {
	.form-container {
		width: 80%;
	}
}
@media screen and (max-width: 1000px) {
	.form-container {
		width: 90%;
	}
}
form {
	padding: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	border-radius: 20px;
	background: white;
}
@media screen and (max-width: 400px) {
	form {
		padding: 30px 20px;
		box-shadow: none;
	}
}
form p:last-of-type {
	margin-bottom: 20px;
}
form h3 {
	font-size: 30pt;
	font-weight: 400;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}
form h3:last-of-type {
	margin-top: 50px;
	margin-bottom: 10px;
}
form h4 {
	font-size: 16pt;
	margin-bottom: 20px;
}
form h6 {
	font-size: 14pt;
	font-weight: 600;
	margin-top: 30px;
}
@media screen and (max-width: 575px) {
	form h6 {
		margin-top: 50px;
	}
}
form hr {
	margin: 80px 0px 60px 0px;
}
.form-label {
	margin-bottom: 0;
}
.form-control {
	max-width: 400px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
label {
	margin-top: 20px;
	margin-bottom: 3px;
}
select {
	cursor: pointer;
}
form button {
	margin-top: 30px;
}
// Disable form submissions if there are invalid fields
(function () {
    "use strict";
    window.addEventListener(
        "load",
        function () {
            // Get the forms we want to add validation styles to
            var forms = document.getElementsByClassName("needs-validation");
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener(
                    "submit",
                    function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                            document.getElementById("form-validated").value = "0";
                            window.scrollTo(0, 0);
                        } else {
                            document.getElementById("form-validated").value = "1";
                        }
                        form.classList.add("was-validated");
                    },
                    false
                );
            });
        },
        false
    );
})();
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js'></script>
<style>
* {
	box-sizing: border-box;
}
body, html {
	overflow-x: hidden;
	font-family: "Oxygen", sans-serif;
	font-weight: 400;
}
body {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: linear-gradient( 120deg, #5600ff, #690dff, #7b1aff, #8c27ff, #9c34ff, #aa41ff, #b84eff, #c45bff, #cf68ff, #d975ff, #e282ff, #ea8fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rapid_contact_form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
}
.form-title {
	margin: 50px 0px 35px 0px;
	border-radius: 15px;
}
.form-title h1 {
	font-size: 40pt;
	font-weight: 700;
	color: white;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 767px) {
	.form-title h1 {
		text-align: center;
		font-size: 30pt;
	}
}
@media screen and (max-width: 350px) {
	.form-title h1 {
		font-size: 30pt;
	}
}
.form-container {
	margin-bottom: 50px;
	width: 75%;
	border-radius: 20px;
}
@media screen and (max-width: 1300px) {
	.form-container {
		width: 80%;
	}
}
@media screen and (max-width: 1000px) {
	.form-container {
		width: 90%;
	}
}
form {
	padding: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	border-radius: 20px;
	background: white;
}
@media screen and (max-width: 400px) {
	form {
		padding: 30px 20px;
		box-shadow: none;
	}
}
form p:last-of-type {
	margin-bottom: 20px;
}
form h3 {
	font-size: 30pt;
	font-weight: 400;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}
form h3:last-of-type {
	margin-top: 50px;
	margin-bottom: 10px;
}
form h4 {
	font-size: 16pt;
	margin-bottom: 20px;
}
form h6 {
	font-size: 14pt;
	font-weight: 600;
	margin-top: 30px;
}
@media screen and (max-width: 575px) {
	form h6 {
		margin-top: 50px;
	}
}
form hr {
	margin: 80px 0px 60px 0px;
}
.form-label {
	margin-bottom: 0;
}
.form-control {
	max-width: 400px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
label {
	margin-top: 20px;
	margin-bottom: 3px;
}
select {
	cursor: pointer;
}
form button {
	margin-top: 30px;
}
</style>

</head>
<body>
<div class="rapid_contact_form" id="rapid_contact_form_rp_471152">
    <div class="form-title">
        <h1>Employment Application</h1>
    </div>
    <hr>
    <div class="form-container">
        <div class="tsb ">
            <form enctype="multipart/form-data" id="rp_471152" method="post" onsubmit="return rp_checkCaptcha('rp_471152');" class="needs-validation" novalidate="">
                <div class="tsb intro_text "></div>
                <input type="hidden" name="form-validated" id="form-validated" value="0">
                <h3>Applicant Information</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="firstname">First Name</label>
                        <input class="form-control" name="firstname" id="firstname" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your first name</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="middlei">Middle Initial</label>
                        <input class="form-control" name="middlei" id="middlei" type="text" required="" min="1" max="1">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your middle initial</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="lastname">Last Name</label>
                        <input class="form-control" name="lastname" id="lastname" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your last name</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="phonefirst">Primary Phone Number</label>
                        <input class="form-control" name="phonefirst" id="phonefirst" type="tel" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your primary phone number</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="phonesecond">Secondary Phone Number</label>
                        <input class="form-control" name="phonefirst" id="phonefirst" type="tel">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your primary phone number</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="email">Email Address</label>
                        <input class="form-control" name="email" id="email" type="email">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your email</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="address">Address</label>
                        <input class="form-control" name="address" id="address" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your address</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="city">City</label>
                        <input class="form-control" name="city" id="city" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your city</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label" for="state">State</label>
                        <input class="form-control" name="state" id="state" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your state</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="form-label" for="zipcode">Zipcode</label>
                        <input class="form-control" name="zipcode" id="zipcode" type="text" required="">
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill in your zipcode</div>
                    </div>
                    <div class="col-sm-4">
                        <label for="isofage" class="form-label">Are you 18 years or older?</label>
                        <select class="form-control" name="isofage" id="isofage" required="">
                            <option value="No">No</option>
                            <option value="Yes">Yes</option>
                        </select>
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please select an option</div>
                    </div>
                    <div class="col-sm-4">
                        <label for="lawfully" class="form-label">Are you prevented from lawfully becoming employed in this country because of Visa or Immigration status?</label>
                        <select class="form-control" name="lawfully" id="lawfully" required="">
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please select an option</div>
                    </div>
                </div>
                <hr>
                <h3>Employment Desired</h3>
                <div class="row">
                    <div class="col-sm-6">
                        <div id="ftd-desiredposition">
                            <label for="desiredposition" class="form-label">Desired Position</label>
                            <div id="fin-desiredposition">
                                <input class="form-control" name="desiredposition" id="desiredposition" type="text" required="">
                            </div>
                        </div>
                        <div id="ftd-datecanstart">
                            <label for="datecanstart" class="form-label">Date you can start</label>
                            <div id="fin-datecanstart">
                                <input class="form-control" name="datecanstart" id="datecanstart" type="date" required="">
                            </div>
                        </div>
                        <div id="ftd-salarydesired">
                            <label for="wagedesired" class="form-label">Wage desired</label>
                            <div id="fin-salarydesired">
                                <input class="form-control" name="wagedesired" id="wagedesired" type="number" required="" step="0.01" min="0" max="100">
                            </div>
                        </div>
                        <div id="ftd-referredby">
                            <label for="referredby" class="form-label">Referred by</label>
                            <div id="fin-referredby">
                                <input class="form-control" name="referredby" id="referredby" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="ftd-appliedbefore">
                            <label for="appliedbefore" class="form-label">Have you ever applied to this company before?</label>
                            <div id="fin-appliedbefore">
                                <select class="form-control" name="appliedbefore" id="appliedbefore">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div id="ftd-waswithuswhen">
                            <label for="waswithuswhen" class="form-label">If yes, when?</label>
                            <div id="fin-waswithuswhen">
                                <input class="form-control" name="waswithuswhen" id="waswithuswhen" type="text">
                            </div>
                        </div>
                        <div id="ftd-felony">
                            <label for="felony" class="form-label">Have you been convicted of a felony or misdemeanor that has not been expunged by a court?</label>
                            <div id="fin-felony">
                                <select class="form-control" name="felony" id="felony">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div id="ftd-hasfelony">
                            <label for="hasfelony" class="form-label"> If yes, explain:</label>
                            <div id="fin-hasfelony">
                                <input class="form-control" name="hasfelony" id="hasfelony" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Education</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <h6>Highschool / GED</h6>
                        <div id="ftd-edu_highschool">
                            <label for="edu_highschool" class="form-label">Name</label>
                            <input name="edu_highschool" id="edu_highschool" class="form-control" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_hs_location">
                            <label for="edu_hs_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_hs_location" id="edu_hs_location" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_hs_grad">
                            <label for="edu_hs_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_hs_grad" id="edu_hs_grad" required="">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_years_left">
                            <label for="edu_hs_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_hs_years_left" id="edu_hs_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_grad_date">
                            <label for="edu_hs_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_hs_grad_date" id="edu_hs_grad_date" type="date" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_hs_degree">
                            <label for="edu_hs_degree" class="form-label">Degree Received</label>
                            <select class="form-control" name="edu_hs_degree" id="edu_hs_degree" required="">
                                <option value="No">Highschool Diploma</option>
                                <option value="Yes">GED</option>
                                <option value="Yes">Other</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>University / College</h6>
                        <div id="ftd-edu_college">
                            <label for="edu_college" class="form-label">Name</label>
                            <input name="edu_college" id="edu_college" class="form-control" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_college_location">
                            <label for="edu_college_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_college_location" id="edu_college_location" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_college_grad">
                            <label for="edu_college_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_college_grad" id="edu_college_grad">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_years_left">
                            <label for="edu_college_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_college_years_left" id="edu_college_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_grad_date">
                            <label for="edu_college_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_college_grad_date" id="edu_college_grad_date" type="date">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_degree">
                            <label for="edu_college_degree" class="form-label">Degree Received</label>
                            <input class="form-control" name="edu_college_degree" id="edu_college_degree" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_college_major">
                            <label for="edu_college_major" class="form-label">Major</label>
                            <input class="form-control" name="edu_college_major" id="edu_college_major" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Professional / Vocational</h6>
                        <div id="ftd-edu_other">
                            <label for="edu_other" class="form-label">Name</label>
                            <input name="edu_other" id="edu_other" class="form-control" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in your school.</div>
                        </div>
                        <div id="fin-edu_other_location">
                            <label for="edu_other_location" class="form-label">Location</label>
                            <input class="form-control" name="edu_other_location" id="edu_other_location" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill in the location.</div>
                        </div>
                        <div id="ftd-edu_other_grad">
                            <label for="edu_other_grad" class="form-label">Did you graduate?</label>
                            <select class="form-control" name="edu_other_grad" id="edu_other_grad">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_years_left">
                            <label for="edu_other_years_left" class="form-label">If No, # of years left to Graduate</label>
                            <input class="form-control" name="edu_other_years_left" id="edu_other_years_left" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_grad_date">
                            <label for="edu_other_grad_date" class="form-label">Graduation Date</label>
                            <input class="form-control" name="edu_other_grad_date" id="edu_other_grad_date" type="date">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_degree">
                            <label for="edu_other_degree" class="form-label">Degree Received</label>
                            <input class="form-control" name="edu_other_degree" id="edu_other_degree" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-edu_other_major">
                            <label for="edu_other_major" class="form-label">Major</label>
                            <input class="form-control" name="edu_other_major" id="edu_other_major" type="text">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Professional References</h3>
                <p>Please list three professional references.</p>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref1name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref1name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref1company" class="form-label">Company</label>
                            <input class="form-control" name="ref1company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref1relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref1relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref1phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref1phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref2name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref2name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref2company" class="form-label">Company</label>
                            <input class="form-control" name="ref2company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref2relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref2relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref2phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref2phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div id="ftd-ref1name">
                            <label for="ref3name" class="form-label">Full Name</label>
                            <input class="form-control" name="ref3name" id="ref1name" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1company">
                            <label for="ref3company" class="form-label">Company</label>
                            <input class="form-control" name="ref3company" id="ref1company" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1relationship">
                            <label for="ref3relationship" class="form-label">Relationship</label>
                            <input class="form-control" name="ref3relationship" id="ref1relationship" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                        <div id="ftd-ref1phone">
                            <label for="ref3phone" class="form-label">Phone Number</label>
                            <input class="form-control" name="ref3phone" id="ref1phone" type="text" required="">
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Please fill this in.</div>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Previous Employment</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <h6>Past Employer 1</h6>
                        <div id="ftd-emp1_company">
                            <label for="emp1_company" class="form-label">Company</label>
                            <input class="form-control" name="emp1_company" id="emp1_company" type="text">
                        </div>
                        <div id="ftd-emp1_phone">
                            <label for="emp1_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp1_phone" id="emp1_phone" type="text">
                        </div>
                        <div id="ftr-emp1_address">
                            <label for="emp1_address" class="form-label">Address</label>
                            <input class="form-control" name="emp1_address" id="emp1_address" type="text">
                        </div>
                        <div id="ftr-emp1_supervisor">
                            <label for="emp1_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp1_supervisor" id="emp1_supervisor" type="text">
                        </div>
                        <div id="ftr-emp1_job_title">
                            <label for="emp1_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp1_job_title" id="emp1_job_title" type="text">
                        </div>
                        <div id="ftr-emp1_salary_start">
                            <label for="emp1_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp1_salary_start" id="emp1_salary_start" type="text">
                        </div>
                        <div id="ftr-emp1_salary_ending">
                            <label for="emp1_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp1_salary_ending" id="emp1_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp1_responsibilities">
                            <label for="emp1_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp1_responsibilities" id="emp1_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp1_from">
                            <label for="emp1_from" class="form-label">From</label>
                            <input class="form-control" name="emp1_from" id="emp1_from" type="date">
                        </div>
                        <div id="ftr-emp1_to">
                            <label for="emp1_to" class="form-label">To</label>
                            <input class="form-control" name="emp1_to" id="emp1_to" type="date">
                        </div>
                        <div id="ftr-emp1_reason">
                            <label for="emp1_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp1_reason" id="emp1_reason" type="text">
                        </div>
                        <div id="ftr-emp1_can_contact">
                            <label for="emp1_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp1_can_contact" id="emp1_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Past Employer 2</h6>
                        <div id="ftd-emp2_company">
                            <label for="emp2_company" class="form-label">Company</label>
                            <input class="form-control" name="emp2_company" id="emp2_company" type="text">
                        </div>
                        <div id="ftd-emp2_phone">
                            <label for="emp2_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp2_phone" id="emp2_phone" type="text">
                        </div>
                        <div id="ftr-emp2_address">
                            <label for="emp2_address" class="form-label">Address</label>
                            <input class="form-control" name="emp2_address" id="emp2_address" type="text">
                        </div>
                        <div id="ftr-emp2_supervisor">
                            <label for="emp2_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp2_supervisor" id="emp2_supervisor" type="text">
                        </div>
                        <div id="ftr-emp2_job_title">
                            <label for="emp2_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp2_job_title" id="emp2_job_title" type="text">
                        </div>
                        <div id="ftr-emp2_salary_start">
                            <label for="emp2_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp2_salary_start" id="emp2_salary_start" type="text">
                        </div>
                        <div id="ftr-emp2_salary_ending">
                            <label for="emp2_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp2_salary_ending" id="emp2_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp2_responsibilities">
                            <label for="emp2_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp2_responsibilities" id="emp2_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp2_from">
                            <label for="emp2_from" class="form-label">From</label>
                            <input class="form-control" name="emp2_from" id="emp2_from" type="date">
                        </div>
                        <div id="ftr-emp2_to">
                            <label for="emp2_to" class="form-label">To</label>
                            <input class="form-control" name="emp2_to" id="emp2_to" type="date">
                        </div>
                        <div id="ftr-emp2_reason">
                            <label for="emp2_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp2_reason" id="emp2_reason" type="text">
                        </div>
                        <div id="ftr-emp2_can_contact">
                            <label for="emp2_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp2_can_contact" id="emp2_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h6>Past Employer 3</h6>
                        <div id="ftd-emp3_company">
                            <label for="emp3_company" class="form-label">Company</label>
                            <input class="form-control" name="emp3_company" id="emp3_company" type="text">
                        </div>
                        <div id="ftd-emp3_phone">
                            <label for="emp3_phone" class="form-label">Phone</label>
                            <input class="form-control" name="emp3_phone" id="emp3_phone" type="text">
                        </div>
                        <div id="ftr-emp3_address">
                            <label for="emp3_address" class="form-label">Address</label>
                            <input class="form-control" name="emp3_address" id="emp3_address" type="text">
                        </div>
                        <div id="ftr-emp3_supervisor">
                            <label for="emp3_supervisor" class="form-label">Supervisor</label>
                            <input class="form-control" name="emp3_supervisor" id="emp3_supervisor" type="text">
                        </div>
                        <div id="ftr-emp3_job_title">
                            <label for="emp3_job_title" class="form-label">Job TItle</label>
                            <input class="form-control" name="emp3_job_title" id="emp3_job_title" type="text">
                        </div>
                        <div id="ftr-emp3_salary_start">
                            <label for="emp3_salary_start" class="form-label">Starting Salary</label>
                            <input class="form-control" name="emp3_salary_start" id="emp3_salary_start" type="text">
                        </div>
                        <div id="ftr-emp3_salary_ending">
                            <label for="emp3_salary_ending" class="form-label">Ending Salary</label>
                            <input class="form-control" name="emp3_salary_ending" id="emp3_salary_ending" type="text">
                        </div>
                        <div id="ftr-emp3_responsibilities">
                            <label for="emp3_responsibilities" class="form-label">Responsibilities</label>
                            <input class="form-control" name="emp3_responsibilities" id="emp3_responsibilities" type="text">
                        </div>
                        <div id="ftr-emp3_from">
                            <label for="emp3_from" class="form-label">From</label>
                            <input class="form-control" name="emp3_from" id="emp3_from" type="date">
                        </div>
                        <div id="ftr-emp3_to">
                            <label for="emp3_to" class="form-label">To</label>
                            <input class="form-control" name="emp3_to" id="emp3_to" type="date">
                        </div>
                        <div id="ftr-emp3_reason">
                            <label for="emp3_reason" class="form-label">Reason for leaving</label>
                            <input class="form-control" name="emp3_reason" id="emp3_reason" type="text">
                        </div>
                        <div id="ftr-emp3_can_contact">
                            <label for="emp3_can_contact" class="form-label">May we contact your previous employer for a reference?</label>
                            <select class="form-control" name="emp3_can_contact" id="emp3_can_contact">
                                <option value="Yes, At Anytime">Yes, At Anytime</option>
                                <option value="Only if I’m a Finalist Candidate">Only if I’m a Finalist Candidate</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Military Service</h3>
                <div class="row">
                    <div class="col-sm-6">
                        <div id="ftd-military_branch">
                            <label for="military_branch" class="form-label">Branch</label>
                            <input class="form-control" name="military_branch" id="military_branch" type="text">
                        </div>
                        <div id="ftd-military_from">
                            <label for="military_from" class="form-label">From</label>
                            <input class="form-control" name="military_from" id="military_from" type="date">
                        </div>
                        <div id="ftd-military_to">
                            <label for="military_to" class="form-label">To</label>
                            <input class="form-control" name="military_to" id="military_to" type="date">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="ftd-military_rank">
                            <label for="military_rank" class="form-label">Rank at Discharge</label>
                            <input class="form-control" name="military_rank" id="military_rank" type="text">
                        </div>
                        <div id="ftd-military_discharge_type">
                            <label for="military_discharge_type" class="form-label">Type of Discharge</label>
                            <input class="form-control" name="military_discharge_type" id="military_discharge_type" type="text">
                        </div>
                        <div id="ftd-military_dd214">
                            <label for="military_dd214" class="form-label">Can you provide a copy of your DD214?</label>
                            <select class="form-control" name="military_dd214" id="military_dd214">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="ftd-military_explain">
                            <label for="military_explain" class="form-label">If other than honorable, explain</label>
                            <input class="form-control" name="military_explain" id="military_explain" type="text">
                        </div>
                    </div>
                </div>
                <hr>
                <h3>Disclaimer</h3>
                <h4>PLEASE READ CAREFULLY AND SIGN THAT YOU UNDERSTAND AND ACCEPT THIS INFORMATION.</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin
                </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque In egestas erat imperdiet sed euismod nisi porta lorem mollis Morbi tristique senectus et netus Mattis pellentesque id nibh tortor id aliquet lectus proin </p>
                <div class="input-group">
                    <div id="rp_recaptcha" class="g-recaptcha g-recaptcha" data-sitekey="6Lfr6iQUAAAAAHUbtErW7MHmxCGzyYphbZQOljxf" data-theme="light" data-size="normal" data-tabindex="0" data-callback="" data-expired-callback="" data-error-callback="" data-recaptcha-widget-id="0">
                        <iframe style="display: none;"></iframe>
                    </div>
                    <input type="hidden" name="_hasCaptcha" id="_hasCaptcha" value="true">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
// Disable form submissions if there are invalid fields
(function () {
    "use strict";
    window.addEventListener(
        "load",
        function () {
            // Get the forms we want to add validation styles to
            var forms = document.getElementsByClassName("needs-validation");
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener(
                    "submit",
                    function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                            document.getElementById("form-validated").value = "0";
                            window.scrollTo(0, 0);
                        } else {
                            document.getElementById("form-validated").value = "1";
                        }
                        form.classList.add("was-validated");
                    },
                    false
                );
            });
        },
        false
    );
})();
</script>

</body>
</html>
Preview