Job Application Form for Website
This HTML form is used to submit an application for a job and will be posted on our website. You can use this form to embed on your website to receive job or any kind of submissions from end-users or visitors.
<div class="formbold-main-wrapper"><!-- Author: FormBold Team --><!-- Learn More: https://formbold.com --><div class="formbold-form-wrapper"><img src="your-image-here.jpg"><form action="https://formbold.com/s/FORM_ID" method="POST"><div class="formbold-input-flex"><div><label for="firstname" class="formbold-form-label"> First Name </label><inputtype="text"name="firstname"id="firstname"placeholder="Your first name"class="formbold-form-input"/></div><div><label for="lastname" class="formbold-form-label"> Last Name </label><inputtype="text"name="lastname"id="lastname"placeholder="Your last name"class="formbold-form-input"/></div></div><div class="formbold-input-flex"><div><label for="email" class="formbold-form-label"> Email </label><inputtype="email"name="email"id="email"placeholder="example@email.com"class="formbold-form-input"/></div><div><label class="formbold-form-label">Gender</label><select class="formbold-form-input" name="occupation" id="occupation"><option value="male">Male</option><option value="female">Female</option><option value="others">Others</option></select></div></div><div class="formbold-mb-3 formbold-input-wrapp"><label for="phone" class="formbold-form-label"> Phone </label><div><inputtype="text"name="areacode"id="areacode"placeholder="Area code"class="formbold-form-input formbold-w-45"/><inputtype="text"name="phone"id="phone"placeholder="Phone number"class="formbold-form-input"/></div></div><div class="formbold-mb-3"><label for="age" class="formbold-form-label"> Applying for Position: </label><inputtype="text"name="age"id="age"class="formbold-form-input"/></div><div class="formbold-mb-3"><label for="dob" class="formbold-form-label"> When can you start? </label><input type="date" name="dob" id="dob" class="formbold-form-input" /></div><div class="formbold-mb-3"><label for="address" class="formbold-form-label"> Address </label><inputtype="text"name="address"id="address"placeholder="Street address"class="formbold-form-input formbold-mb-3"/><inputtype="text"name="address2"id="address2"placeholder="Street address line 2"class="formbold-form-input"/></div><div class="formbold-mb-3"><label for="message" class="formbold-form-label">Cover Letter</label><textarearows="6"name="message"id="message"class="formbold-form-input"></textarea></div><div class="formbold-form-file-flex"><label for="upload" class="formbold-form-label">Upload Resume</label><inputtype="file"name="upload"id="upload"class="formbold-form-file"/></div><button class="formbold-btn">Apply Now</button></form></div></div><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Inter', sans-serif;}.formbold-mb-3 {margin-bottom: 15px;}.formbold-main-wrapper {display: flex;align-items: center;justify-content: center;padding: 48px;}.formbold-form-wrapper {margin: 0 auto;max-width: 570px;width: 100%;background: white;padding: 40px;}.formbold-img {display: block;margin: 0 auto 45px;}.formbold-input-wrapp > div {display: flex;gap: 20px;}.formbold-input-flex {display: flex;gap: 20px;margin-bottom: 15px;}.formbold-input-flex > div {width: 50%;}.formbold-form-input {width: 100%;padding: 13px 22px;border-radius: 5px;border: 1px solid #dde3ec;background: #ffffff;font-weight: 500;font-size: 16px;color: #536387;outline: none;resize: none;}.formbold-form-input::placeholder,select.formbold-form-input,.formbold-form-input[type='date']::-webkit-datetime-edit-text,.formbold-form-input[type='date']::-webkit-datetime-edit-month-field,.formbold-form-input[type='date']::-webkit-datetime-edit-day-field,.formbold-form-input[type='date']::-webkit-datetime-edit-year-field {color: rgba(83, 99, 135, 0.5);}.formbold-form-input:focus {border-color: #6a64f1;box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);}.formbold-form-label {color: #07074D;font-weight: 500;font-size: 14px;line-height: 24px;display: block;margin-bottom: 10px;}.formbold-form-file-flex {display: flex;align-items: center;gap: 20px;}.formbold-form-file-flex .formbold-form-label {margin-bottom: 0;}.formbold-form-file {font-size: 14px;line-height: 24px;color: #536387;}.formbold-form-file::-webkit-file-upload-button {display: none;}.formbold-form-file:before {content: 'Upload file';display: inline-block;background: #EEEEEE;border: 0.5px solid #FBFBFB;box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.25);border-radius: 3px;padding: 3px 12px;outline: none;white-space: nowrap;-webkit-user-select: none;cursor: pointer;color: #637381;font-weight: 500;font-size: 12px;line-height: 16px;margin-right: 10px;}.formbold-btn {text-align: center;width: 100%;font-size: 16px;border-radius: 5px;padding: 14px 25px;border: none;font-weight: 500;background-color: #6a64f1;color: white;cursor: pointer;margin-top: 25px;}.formbold-btn:hover {box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);}.formbold-w-45 {width: 45%;}</style>