# Forms: Feedback

## Component #1

- Preview
- HTML

### Submit your application

Resume/CV
Full name
Email
Phone
Current company

### Links

LinkedIn URL
Twitter URL
GitHub URL
Portfolio URL
Other website

### Before sending your application, please let us know...

Desired Salary
Available Start Date

### Additional information

Additional information
Submit application

                    <!-- 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

- Preview
- HTML

First name
Last name
Email address
Company name (Optional)
Budget
Details
We'll get back to you in 1-2 business days.

                    <!-- 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

- Preview
- HTML

## Post a comment

First name
Last name
Your email 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

- Preview
- HTML
- JS

##### Autofill application

Save time by importing your resume.

Import resume from
My Computer Dropbox Google Drive

### Personal information

First name
Last name
Email address
Phone (Optional)
Add phone

### Profile

Summary
Resume/CV and Cover Letter
Browse your files or drag' n' drop here

### Details

Do you have the right to work in the UK?
Yes No
Notice period
Upload your portfolio
Browse your files or drag' n' drop here
Expected salary
Do you have experience designing for mobile?
Yes No

                    <!-- 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="../node_modules/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="../node_modules/dropzone/dist/min/dropzone.min.js"></script>
                    <script src="../node_modules/imask/dist/imask.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.bs-dropdown.js"></script>
                    <script src="../assets/js/hs.dropzone.js"></script>
                    <script src="../assets/js/hs.imask.js"></script>

                    <!-- 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>