Form Layouts: Feedback
Component #1
Apply
<!-- Content -->
<div class="container content-space-1">
<!-- Header -->
<div class="text-center mb-7">
<div class="mb-3">
<a class="link link-secondary" href="../page-careers-role-overview.html"><i class="bi-arrow-left small me-1"></i> Product Manager</a>
</div>
<h1>Apply</h1>
</div>
<!-- End Header -->
<div class="w-lg-75 mx-lg-auto">
<!-- Card -->
<div class="card card-shadow">
<div class="card-body p-sm-7 p-md-10">
<form>
<div class="mb-5">
<h4 class="card-title">1. Personal details</h4>
<p class="card-text">We'll need these details in order to be able to contact you.</p>
</div>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="careersApplyFormFirstName">First name</label>
<input type="text" class="form-control form-control-lg" name="careersApplyFormNameFirstName" id="careersApplyFormFirstName" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="careersApplyFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="careersApplyFormNameLastName" id="careersApplyFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="careersApplyFormEmail">Email address</label>
<input type="email" class="form-control form-control-lg" name="careersApplyFormNameWorkEmail" id="careersApplyFormEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="careersApplyFormPhone">Phone</label>
<input type="text" class="form-control form-control-lg" name="careersApplyFormNamePhone" id="careersApplyFormPhone" placeholder="Phone" aria-label="Phone">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="careersApplyFormlinkedinURL">LinkedIn URL</label>
<input type="text" class="form-control" id="careersApplyFormlinkedinURL" name="careersApplyFormlinkedinURLName" placeholder="www.linkedin.com/jacob" aria-label="www.linkedin.com/jacob">
</div>
<!-- End Form -->
<hr class="my-md-7">
<div class="mb-5">
<h4 class="card-title">2. Profile</h4>
</div>
<!-- Form -->
<div class="mb-4">
<label for="careersApplyFormFile" class="js-file-attach form-label"
data-hs-file-attach-options='{
"textTarget": "[for=\"careersApplyFormFile\"]"
}'>Résumé / CV</label>
<input class="form-control" type="file" id="careersApplyFormFile">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label for="careersApplyFormAdditionalInfo" class="form-label">Personal summary</label>
<textarea class="form-control" name="careersApplyFormAdditionalInfoName" id="careersApplyFormAdditionalInfo" 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 -->
<hr class="my-md-7">
<div class="mb-5">
<h4 class="card-title">3. Submit application</h4>
<p>In order to contact you with future jobs that you may be interested in, we need to store your personal data.</p>
<p>If you are happy for us to do so please click the checkbox below.</p>
</div>
<!-- Check -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="careersAppleFormPrivacyCheck" name="careersAppleFormPrivacyCheck">
<label class="form-check-label" for="careersAppleFormPrivacyCheck">Allow us to process your personal information.</label>
</div>
<!-- End Check -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit application</button>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Content -->
Component #2
Post a comment
<!-- Post a Comment -->
<div class="container">
<!-- Heading -->
<div class="w-lg-65 text-center mx-lg-auto mb-7">
<h3>Post a comment</h3>
</div>
<!-- End Heading -->
<div class="row justify-content-lg-center">
<div class="col-lg-8">
<!-- Card -->
<div class="card card-lg card-bordered 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" 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" 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" 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" 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">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Post a Comment -->