Directory Form Layouts
Component #1
<!-- Form -->
<form>
<div class="mb-5">
<h6>Submit your application</h6>
</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="[email protected]" aria-label="[email protected]">
</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="+1 (062) 109-9222" aria-label="+1 (062) 109-9222">
</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">
<h6>Links</h6>
</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">
<h6>Before sending your application, please let us know...</h6>
</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">
<h6>Additional information</h6>
</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 btn-lg" href="#">Submit application</a>
</div>
</form>
<!-- End Form -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF CUSTOM FILE
// =======================================================
new HSFileAttach('.js-file-attach')
})()
</script>