Form Layouts

Component #1

Write to us E-mail message
                    
                      <!-- Contacts Form -->
                      <form class="js-validate" novalidate="novalidate">
                        <h5 class="font-size-18 font-weight-medium mb-4">Write to us E-mail message</h5>
                        <div class="row">
                            <!-- Input -->
                            <div class="col-sm-6 mb-3">
                              <div class="js-form-message">
                                <label class="input-label font-size-15 font-weight-medium font-size-15 font-weight-medium">
                                  Your name
                                </label>

                                <input type="text" class="form-control rounded-0" name="name" placeholder="" aria-label="Jeff Fisher" required="" data-msg="Please enter your name.">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="col-sm-6 mb-3">
                              <div class="js-form-message">
                                <label class="input-label font-size-15 font-weight-medium">
                                  Your email address
                                </label>

                                <input type="email" class="form-control rounded-0" name="email" placeholder="" aria-label="jackwayley@gmail.com" required="" data-msg="Please enter a valid email address.">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="col-sm-12 mb-3">
                              <div class="js-form-message">
                                <label class="input-label font-size-15 font-weight-medium">
                                  Subject
                                </label>

                                <input type="text" class="form-control rounded-0" name="subject" placeholder="" aria-label="Web design" required="" data-msg="Please enter a subject.">
                              </div>
                            </div>
                            <!-- End Input -->
                        </div>

                        <!-- Input -->
                        <div class="js-form-message mb-3">
                            <label class="input-label font-size-15 font-weight-medium">
                              Your Message
                            </label>

                            <div class="input-group">
                              <textarea class="form-control rounded-0" rows="8" name="text" placeholder="" aria-label="Hi there, I would like to ..." required="" data-msg="Please enter a reason."></textarea>
                            </div>
                        </div>
                        <!-- End Input -->

                        <div>
                            <button type="submit" class="btn btn-primary px-3 transition-3d-hover border-radius-sm font-size-1">
                                <span class="mx-1">Send Message</span>
                            </button>
                        </div>
                      </form>
                      <!-- End Contacts Form -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Vodi -->
                      <script src="../../assets/js/hs.validation.js"></script>

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