Forms: Feedback
Component #1
<!-- Form -->
<form id="applyForJob" class="js-validate">
<div class="mb-5">
<h3>Submit your application</h3>
</div>
<!-- Form -->
<div class="row mb-3">
<label for="resumeCVCareersForm" class="col-sm-4 col-form-label">Resume/CV</label>
<div class="col-sm-8">
<input type="file" class="js-file-attach form-control" id="resumeCVCareersForm" name="resumeCVCareersFormName">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="fullNameCareersForm" class="col-sm-4 col-form-label">Full name</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="fullNameCareersForm" name="fullNameCareersFormName" placeholder="Jacob Williams" aria-label="Jacob Williams">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="emailCareersForm" class="col-sm-4 col-form-label">Email</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="emailCareersForm" name="emailCareersFormName" placeholder="example@site.com" aria-label="example@site.com">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="phoneCareersForm" class="col-sm-4 col-form-label">Phone</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="phoneCareersForm" name="phoneCareersFormName" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="currentCompanyCareersForm" class="col-sm-4 col-form-label">Current company</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="currentCompanyCareersForm" name="currentCompanyCareersFormName" placeholder="Google" aria-label="Google">
</div>
</div>
<!-- End Form -->
<hr class="my-5 my-sm-10">
<div class="mb-5">
<h3>Links</h3>
</div>
<!-- Form -->
<div class="row mb-3">
<label for="linkedinURLCareersForm" class="col-sm-4 col-form-label">LinkedIn URL</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="linkedinURLCareersForm" name="linkedinURLCareersFormName" placeholder="www.linkedin.com/jacob" aria-label="www.linkedin.com/jacob">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="twitterURLCareersForm" class="col-sm-4 col-form-label">Twitter URL</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="twitterURLCareersForm" name="twitterURLCareersFormName" placeholder="www.twitter.com/jacob" aria-label="www.twitter.com/jacob">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="githubURLCareersForm" class="col-sm-4 col-form-label">GitHub URL</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="githubURLCareersForm" name="githubURLCareersFormName" placeholder="www.github.com/jacob" aria-label="www.github.com/jacob">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="portfolioURLCareersForm" class="col-sm-4 col-form-label">Portfolio URL</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="portfolioURLCareersForm" name="portfolioURLCareersFormName" placeholder="www.mysite.com/jacob" aria-label="www.mysite.com/jacob">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="otherWebsiteCareersForm" class="col-sm-4 col-form-label">Other website</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="otherWebsiteCareersForm" name="otherWebsiteCareersFormName" placeholder="www.site.com" aria-label="www.site.com">
</div>
</div>
<!-- End Form -->
<hr class="my-5 my-sm-10">
<div class="mb-5">
<h3>Before sending your application, please let us know...</h3>
</div>
<!-- Form -->
<div class="row mb-3">
<label for="desiredSalaryCareersForm" class="col-sm-4 col-form-label">Desired Salary</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="desiredSalaryCareersForm" name="desiredSalaryCareersFormName" placeholder="Type your response" aria-label="Type your response">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="availableStartDateCareersForm" class="col-sm-4 col-form-label">Available Start Date</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="availableStartDateCareersForm" name="availableStartDateCareersFormName" placeholder="Type your response" aria-label="Type your response">
</div>
</div>
<!-- End Form -->
<hr class="my-5 my-sm-10">
<div class="mb-5">
<h3>Additional information</h3>
</div>
<!-- Form -->
<div class="mb-3">
<label for="additionalInfoCareersForm" class="form-label visually-hidden">Additional information</label>
<textarea class="form-control" name="additionalInfoCareersFormName" id="additionalInfoCareersForm" placeholder="Add a cover letter or anything else you want to share." aria-label="Add a cover letter or anything else you want to share." rows="5"></textarea>
</div>
<!-- End Form -->
<div class="d-grid text-center mt-7">
<a class="btn btn-primary" href="#">Submit application</a>
</div>
</form>
<!-- End Form -->
Component #2
<!-- Form -->
<div class="container content-space-2 content-space-lg-3">
<!-- Form -->
<div class="mx-auto" style="max-width: 35rem;">
<!-- Form -->
<form>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormFirstName">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormWorkEmail">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormCompanyName">Company name <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyName" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
<!-- Select -->
<div class="mb-4">
<label class="form-label" for="hireUsFormBudget">Budget</label>
<select name="hireUsFormNameBudget" id="hireUsFormBudget" class="form-select form-select-lg" aria-label="Tell us about your budget">
<option selected>Tell us about your budget</option>
<option value="1">$1,000 - $10,000</option>
<option value="2">$10,000 - $20,000</option>
<option value="3">$20,000 - $30,000</option>
<option value="4">$30,000 - $40,000</option>
<option value="5">$40,000 - $50,000</option>
<option value="6">$50,000 - and more</option>
</select>
</div>
<!-- End Select -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormDetails">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
</div>
<!-- End Form -->
<div class="d-grid mb-2">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<span class="form-text">We'll get back to you in 1-2 business days.</span>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Form -->
</div>
<!-- End Form -->
Component #3
Post a comment
<!-- Post a Comment -->
<div class="container content-space-2">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Post a comment</h2>
</div>
<!-- End Heading -->
<div class="row justify-content-lg-center">
<div class="col-lg-8">
<!-- Card -->
<div class="card card-lg border shadow-none">
<div class="card-body">
<form>
<div class="d-grid gap-4">
<!-- Form -->
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<label class="form-label" for="blogContactsFormFirstName">First name</label>
<input type="text" class="form-control form-control-lg" name="blogContactsFirstName" id="blogContactsFormFirstName" placeholder="First name" aria-label="First name">
</div>
<div class="col-sm-6">
<label class="form-label" for="blogContactsFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="blogContactsLastName" id="blogContactsFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<span class="d-block">
<label class="form-label" for="blogContactsFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="blogContactsEmailName" id="blogContactsFormEmail" placeholder="email@site.com" aria-label="email@site.com">
</span>
<!-- End Form -->
<!-- Form -->
<span class="d-block">
<label class="form-label" for="blogContactsFormComment">Comment</label>
<textarea class="form-control form-control-lg" id="blogContactsFormComment" name="blogContactsCommentName" placeholder="Leave your comment here..." aria-label="Leave your comment here..." rows="5"></textarea>
</span>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Post a Comment -->
Component #4
Autofill application
Save time by importing your resume.
My Computer
Dropbox
Google Drive
<!-- Content -->
<div class="container content-space-1 content-space-b-lg-3">
<div class="w-lg-75 mx-lg-auto">
<!-- Card -->
<div class="card card-bordered mb-10">
<div class="card-body">
<div class="row align-items-sm-center">
<div class="col-sm mb-2 mb-sm-0">
<h5 class="card-title text-uppercase">
<i class="bi-lightning-charge-fill me-1"></i> Autofill application
</h5>
<p class="card-text small">Save time by importing your resume.</p>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<!-- Dropdown -->
<div class="dropdown">
<a class="btn btn-primary" href="#" id="jobImportResumeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
Import resume from <i class="bi-chevron-down small ms-1"></i>
</a>
<div class="dropdown-menu" aria-labelledby="jobImportResumeDropdown">
<a class="dropdown-item" href="#">
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/vendor/bootstrap-icons/icons/laptop.svg" alt="Image Description"> My Computer
</a>
<a class="dropdown-item" href="#">
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description"> Dropbox
</a>
<a class="dropdown-item" href="#">
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/google-drive-icon.svg" alt="Image Description"> Google Drive
</a>
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
<!-- Form -->
<form>
<div class="mb-4">
<h3>Personal information</h3>
</div>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobFirstName">First name</label>
<input type="text" class="form-control" name="applyForJobNameFirstName" id="applyForJobFirstName" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobLasttName">Last name</label>
<input type="text" class="form-control" name="applyForJobNameLastName" id="applyForJobLasttName" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobEmail">Email address</label>
<input type="email" class="form-control" name="applyForJobNameEmail" id="applyForJobEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="js-add-field mb-4"
data-hs-add-field-options='{
"template": "#addPhoneFieldTemplate",
"container": "#addPhoneFieldContainer",
"defaultCreated": 0
}'>
<label class="form-label" for="applyForJobPhone">Phone <span class="form-label-secondary">(Optional)</span></label>
<div class="input-group">
<input type="text" class="js-input-mask form-control" name="applyForJobNamePhone" id="applyForJobPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"mask": "+{0}(000)000-00-00"
}'>
<!-- Select -->
<select class="form-select" name="applyForJobPhoneSelect" style="max-width: 8rem;">
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
<!-- End Select -->
</div>
<!-- Container For Input Field -->
<div id="addPhoneFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus-circle me-1"></i> Add phone
</a>
</div>
<!-- End Form -->
<!-- Add Phone Input Field -->
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
<div class="input-group input-group-add-field">
<input type="text" class="js-input-mask form-control" data-name="applyForJobNameAdditionalPhone" id="applyForJobAdditionalPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"mask": "+{0}(000)000-00-00"
}'>
<!-- Select -->
<select class="form-select" data-name="applyForJobAdditionalPhoneSelect" style="max-width: 8rem;">
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
<!-- End Select -->
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="bi-x-lg"></i>
</a>
</div>
</div>
<!-- End Add Phone Input Field -->
<hr class="my-7">
<div class="mb-4">
<h3>Profile</h3>
</div>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobSummary">Summary</label>
<textarea class="form-control" name="applyForJobSummaryName" id="applyForJobSummary" placeholder="In a few words, tell us about yourself" aria-label="In a few words, tell us about yourself" rows="6"></textarea>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label">Resume/CV and Cover Letter <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
<div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
<div class="dz-message">
<span class="d-block mb-1">Browse your files</span>
<span class="d-block text-muted small">or drag' n' drop here</span>
</div>
</div>
</div>
<!-- End Form -->
<hr class="my-7">
<div class="mb-4">
<h3>Details</h3>
</div>
<div class="mb-1">
<label class="input-label">Do you have the right to work in the UK?</label>
</div>
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusYesBtnRadio" autocomplete="off">
<label class="btn btn-sm" for="applyForJobWorkStatusYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusNoBtnRadio" autocomplete="off">
<label class="btn btn-sm" for="applyForJobWorkStatusNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
</div>
<!-- End Radio Button Group -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobNoticePeriod">Notice period</label>
<input type="text" class="form-control" name="applyForJobNameNoticePeriod" id="applyForJobNoticePeriod" placeholder="2 months" aria-label="2 months">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label">Upload your portfolio <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
<div id="portfolioAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
<div class="dz-message">
<span class="d-block mb-1">Browse your files</span>
<span class="d-block text-muted small">or drag' n' drop here</span>
</div>
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="applyForJobExpectedSalary">Expected salary</label>
<input type="text" class="form-control" name="applyForJobNameExpectedSalary" id="applyForJobExpectedSalary" placeholder="$5k-$7k" aria-label="$5k-$7k">
</div>
<!-- End Form -->
<div class="mb-1">
<label class="input-label">Do you have experience designing for mobile?</label>
</div>
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceYesBtnRadio" autocomplete="off">
<label class="btn btn-sm" for="applyForJobWorkExperienceYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceNoBtnRadio" autocomplete="off">
<label class="btn btn-sm" for="applyForJobWorkExperienceNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
</div>
<!-- End Radio Button Group -->
<div class="d-grid mt-5">
<button type="submit" class="btn btn-primary btn-lg">Send application</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- Content -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script src="../assets/vendor/imask/dist/imask.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
// INITIALIZATION OF ADD FIELD
// =======================================================
new HSAddField('.js-add-field', {
addedField: field => {
HSCore.components.HSMask.init(field.querySelector('.js-input-mask'))
}
})
// INITIALIZATION OF DROPZONE
// =======================================================
HSCore.components.HSDropzone.init('.js-dropzone')
// INITIALIZATION OF INPUT MASK
// =======================================================
HSCore.components.HSMask.init('.js-input-mask')
})()
</script>