Form Layouts - Feedback

Component #1

Browse your files Maximum file size is 1MB
                    
                      <div class="container space-2">
                        <!-- Apply Form -->
                        <form class="js-validate">
                          <div class="row">
                            <div class="col-md-6 mb-3 mb-md-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <label class="input-label" for="fullNameLabel">Full name</label>
                                <div class="input-group">
                                  <input type="text" class="form-control" name="firstName" id="fullNameLabel" placeholder="First Name" aria-label="First Name" required
                                         data-msg="Please enter your frist name.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-md-6 mb-3 mb-md-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <label class="input-label" for="lastNameLabel">Last name</label>
                                <div class="input-group">
                                  <input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Last Name" aria-label="Last Name" required
                                         data-msg="Please enter your last name.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-md-6 mb-3 mb-md-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <label class="input-label" for="emailAddressLabel">Email</label>
                                <div class="input-group">
                                  <input type="email" class="form-control" name="emailAddress" id="emailAddressLabel" placeholder="Email" aria-label="Email" required
                                         data-msg="Please enter a valid email address.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-md-6 mb-3 mb-md-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <label class="input-label" for="urlLabel">URL <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
                                <div class="input-group">
                                  <input type="text" class="form-control" name="URL" id="urlLabel" placeholder="Linkedin" aria-label="Linkedin">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="mb-3 mb-md-5">
                            <!-- Input -->
                            <label class="input-label">Resume/CV and Cover Letter</label>
                            <div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                              <div class="dz-message p-2">
                                <span class="d-block mb-1">Browse your files</span>
                                <small class="d-block text-muted">Maximum file size is 1MB</small>
                              </div>
                            </div>
                            <!-- End Input -->
                          </div>

                          <div class="mb-3 mb-md-5">
                            <!-- Input -->
                            <div class="js-form-message">
                              <label class="input-label">In a few words...</label>
                              <div class="input-group">
                                <textarea class="form-control" rows="6" name="answer" placeholder="How'd you hear about Front?" aria-label="How'd you hear about Front?" required
                                          data-msg="Please enter an answer."></textarea>
                              </div>
                            </div>
                            <!-- End Input -->
                          </div>

                          <div class="text-center">
                            <button type="submit" class="btn btn-primary transition-3d-hover">Submit Application</button>
                          </div>
                        </form>
                        <!-- End Apply Form -->
                      </div>
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

We'll get back to you in 1-2 business days.

                    
                      <!-- Hire Us Form Section -->
                      <div class="container space-2">
                        <form class="js-validate row justify-content-lg-center">
                          <div class="col-lg-8">
                            <!-- Input -->
                            <div class="js-form-message mb-4 mb-md-6">
                              <label class="input-label">Your name</label>
                              <input type="text" class="form-control" name="firstName" placeholder="Jeff Fisher" aria-label="Jeff Fisher" required data-msg="Please enter your frist name.">
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="js-form-message mb-4 mb-md-6">
                              <label class="input-label">Your email address</label>
                              <input type="email" class="form-control" name="emailAddress" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required data-msg="Please enter a valid email address.">
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="mb-4 mb-md-6">
                              <label class="input-label">Your company name <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
                              <input type="text" class="form-control" placeholder="JackWayley Inc." aria-label="JackWayley Inc.">
                            </div>
                            <!-- End Input -->

                            <!-- Platform -->
                            <div class="mb-4 mb-md-6">
                              <label class="input-label">Choose your platform <span class="text-muted font-weight-normal ml-1">(optional)</span></label>

                              <!-- Button Group -->
                              <div class="btn-group btn-group-toggle btn-group-segment d-flex" data-toggle="buttons">
                                <label class="btn flex-fill active">
                                  <input type="checkbox" name="options" id="option1"> Web
                                </label>
                                <label class="btn flex-fill">
                                  <input type="checkbox" name="options" id="option2"> Mobile app
                                </label>
                                <label class="btn flex-fill">
                                  <input type="checkbox" name="options" id="option3"> Others
                                </label>
                              </div>
                              <!-- End Button Group -->
                            </div>
                            <!-- End Platform -->

                            <!-- Budget Custom Select -->
                            <div class="js-form-message mb-4 mb-md-6">
                              <label class="input-label">Tell us about your budget</label>
                              <select class="form-control custom-select" required data-msg="Please select your budget.">
                                <option value="" selected>$20,000 to $50,000</option>
                                <option value="budget1">$20,000 to $50,000</option>
                                <option value="budget2">$100,000 to $200,000</option>
                                <option value="budget3">$200,000+</option>
                              </select>
                            </div>
                            <!-- End Budget Custom Select -->

                            <!-- Input -->
                            <div class="js-form-message mb-4 mb-md-6">
                              <label class="input-label">Tell us about your project</label>
                              <textarea class="form-control" rows="4" name="answer" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required data-msg="Please enter a reason."></textarea>
                            </div>
                            <!-- End Input -->

                            <div class="text-center">
                              <div class="mb-2">
                                <button type="submit" class="btn btn-primary">Let's Start Working Together</button>
                              </div>
                              <p class="small">We'll get back to you in 1-2 business days.</p>
                            </div>
                          </div>
                        </form>
                      </div>
                      <!-- End Hire Us Form Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #3

Tell us about yourself

Whether you have questions or you would just like to say hello, contact us.

We'll get back to you in 1-2 business days.

                    
                      <!-- Contact Form Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <h2>Tell us about yourself</h2>
                          <p>Whether you have questions or you would just like to say hello, contact us.</p>
                        </div>
                        <!-- End Title -->

                        <div class="w-lg-80 mx-auto">
                          <!-- Contacts Form -->
                          <form class="js-validate">
                            <div class="row">
                              <!-- Input -->
                              <div class="col-sm-6 mb-4">
                                <div class="js-form-message">
                                  <label class="input-label">Your name</label>
                                  <input type="text" class="form-control" name="name" placeholder="Jeff Fisher" aria-label="Jeff Fisher" required
                                         data-msg="Please enter your name.">
                                </div>
                              </div>
                              <!-- End Input -->

                              <!-- Input -->
                              <div class="col-sm-6 mb-4">
                                <div class="js-form-message">
                                  <label class="input-label">Your email address</label>
                                  <input type="email" class="form-control" name="email" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                                         data-msg="Please enter a valid email address.">
                                </div>
                              </div>
                              <!-- End Input -->

                              <div class="w-100"></div>

                              <!-- Input -->
                              <div class="col-sm-6 mb-4">
                                <div class="js-form-message">
                                  <label class="input-label">Subject</label>
                                  <input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
                                         data-msg="Please enter a subject.">
                                </div>
                              </div>
                              <!-- End Input -->

                              <!-- Input -->
                              <div class="col-sm-6 mb-4">
                                <div class="js-form-message">
                                  <label class="input-label">Your phone number</label>
                                  <input type="number" class="form-control" name="phone" placeholder="1-800-643-4500" aria-label="1-800-643-4500" required
                                         data-msg="Please enter a valid phone number.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <!-- Input -->
                            <div class="js-form-message mb-6">
                              <label class="input-label">How can we help you?</label>
                              <div class="input-group">
                                <textarea class="form-control" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                          data-msg="Please enter a reason."></textarea>
                              </div>
                            </div>
                            <!-- End Input -->

                            <div class="text-center">
                              <button type="submit" class="btn btn-primary btn-wide transition-3d-hover mb-4">Submit</button>
                              <p class="small">We'll get back to you in 1-2 business days.</p>
                            </div>
                          </form>
                          <!-- End Contacts Form -->
                        </div>
                      </div>
                      <!-- End Contact Form Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #4

                    
                      <div class="container">
                        <!-- Form -->
                        <form class="js-validate">
                          <div class="form-row">
                            <div class="col-sm-6 mb-sm-3">
                              <div class="js-form-message form-group">
                                <label class="input-label">Name</label>
                                <input type="text" class="form-control" name="name" id="inputName" placeholder="Name" aria-label="Name" required
                                       data-msg="Please enter your name.">
                              </div>
                            </div>

                            <div class="col-sm-6 mb-sm-3">
                              <div class="js-form-message form-group">
                                <label class="input-label">Email</label>
                                <input type="email" class="form-control" name="emailAddress" id="emailAddress" placeholder="Email address" aria-label="Email address" required
                                       data-msg="Please enter a valid email address.">
                              </div>
                            </div>

                            <div class="col-12 mb-sm-3">
                              <div class="js-form-message form-group">
                                <label class="input-label">Comment</label>
                                <textarea class="form-control" rows="7" id="descriptionTextarea" placeholder="Comment" required
                                          data-msg="Please enter your message."></textarea>
                              </div>
                            </div>
                          </div>

                          <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>