Logo v4.1
图片描述内容

没结果

  • 获取支持
  • 预览演示
Logo v4.1
  • 文档
  • 代码片段
  • 代码片段
  • 介绍
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Content
  • 功能
    一般 统计 Step 导航(标签)
  • Icon Blocks
  • Cards
    Grid List
  • Directory
    Grid List
  • 客户评价
  • 博客s
    Grid List
  • Tables
  • E-commerce
  • 价格
  • Team Sections
  • 面包屑
  • 号召性用语(CTA)
  • Modals
  • 证券投资
  • 画廊
  • 客户
  • Countdown
  • FAQ
  • Lists
  • 折叠/手风琴
  • Comments
  • 反馈 & 评论
  • User Profile
  • 侧边栏示例
  • 日历视图
  • 通知
  • 内容部分
  • Forms
  • 身份验证
  • 反馈
  • Filters
  • Search
  • Directory
  • 订阅
  • 账户中心
  • Wizard & Steps
  • 联系方式/页脚
  • 联系方式
  • Footer

Forms: Feedback

Component #1

  • 预览
  • HTML

Submit your application


Links


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


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

  • 预览
  • HTML
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">名字</label>
                            <input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="名字" aria-label="名字">
                          </div>
                          <!-- End Form -->
                        </div>

                        <div class="col-sm-6">
                          <!-- Form -->
                          <div class="mb-4">
                            <label class="form-label" for="hireUsFormLasttName">姓氏</label>
                            <input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="姓氏" aria-label="姓氏">
                          </div>
                          <!-- End Form -->
                        </div>
                      </div>
                      <!-- End Form -->

                      <!-- Form -->
                      <div class="mb-4">
                        <label class="form-label" for="hireUsFormWorkEmail">邮箱地址</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

  • 预览
  • HTML

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">名字</label>
                                  <input type="text" class="form-control form-control-lg" name="blogContactsFirstName" id="blogContactsFormFirstName" placeholder="名字" aria-label="名字">
                                </div>

                                <div class="col-sm-6">
                                  <label class="form-label" for="blogContactsFormLasttName">姓氏</label>
                                  <input type="text" class="form-control form-control-lg" name="blogContactsLastName" id="blogContactsFormLasttName" placeholder="姓氏" aria-label="姓氏">
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form -->
                              <span class="d-block">
                                <label class="form-label" for="blogContactsFormEmail">你的邮箱</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

  • 预览
  • HTML
  • JS
Autofill application

Save time by importing your resume.

Import resume from
图片描述内容 My Computer 图片描述内容 Dropbox 图片描述内容 Google Drive

个人资料rmation

Add phone

Profile

Browse your files or drag' n' drop here

Details

Browse your files or drag' n' drop here
              
                <!-- 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="图片描述内容"> 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="图片描述内容"> 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="图片描述内容"> 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">名字</label>
                            <input type="text" class="form-control" name="applyForJobNameFirstName" id="applyForJobFirstName" placeholder="名字" aria-label="名字">
                          </div>
                          <!-- End Form -->
                        </div>

                        <div class="col-sm-6">
                          <!-- Form -->
                          <div class="mb-4">
                            <label class="form-label" for="applyForJobLasttName">姓氏</label>
                            <input type="text" class="form-control" name="applyForJobNameLastName" id="applyForJobLasttName" placeholder="姓氏" aria-label="姓氏">
                          </div>
                          <!-- End Form -->
                        </div>
                      </div>
                      <!-- End Form -->

                      <!-- Form -->
                      <div class="mb-4">
                        <label class="form-label" for="applyForJobEmail">邮箱地址</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>