Form - Subscribe

Component #1

Image Description Image Description
Image Description

Ready to growth your business?

Your website is fully responsive so visitors can view your content from their choice of device.

Image Description Image Description
Image Description
                    
                      <!-- Subscription Section -->
                      <div class="overflow-hidden space-top-lg-3 space-bottom-lg-1">
                        <div class="position-relative">
                          <div class="container-fluid space-2 space-lg-0">
                            <div class="row justify-content-sm-center align-items-lg-center text-center">
                              <div class="col-lg-4 d-none d-lg-block">
                                <!-- Device Mockup -->
                                <div class="transform-rotate-3">
                                  <div class="device device-ipad">
                                    <img class="device-ipad-frame" src="../../assets/svg/components/ipad.svg" alt="Image Description">
                                    <img class="device-ipad-screen" src="../../assets/img/533x711/img1.jpg" alt="Image Description">
                                  </div>

                                  <figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1 mr-n8 mb-n5">
                                    <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
                                  </figure>
                                </div>
                                <!-- End Device Mockup -->
                              </div>

                              <div class="col-sm-8 col-lg-4">
                                <!-- Title -->
                                <div class="mb-5">
                                  <h2 class="h1">Ready to growth your business?</h2>
                                  <p>Your website is fully responsive so visitors can view your content from their choice of device.</p>
                                </div>
                                <!-- End Title -->

                                <!-- Form -->
                                <form class="js-validate">
                                  <label class="sr-only" for="signupSrEmailExample4">Email</label>
                                  <div class="input-group">
                                    <input type="email" class="form-control" name="email" id="signupSrEmailExample4" placeholder="Email" aria-label="Email" required>
                                    <div class="input-group-append">
                                      <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                                    </div>
                                  </div>
                                </form>
                                <!-- End Form -->
                              </div>

                              <div class="col-lg-4 d-none d-lg-block">
                                <!-- Device Mockup -->
                                <div class="max-w-33rem w-100 transform-rotate-2 ml-auto">
                                  <div class="device device-iphone-x">
                                    <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
                                    <img class="device-iphone-x-screen" src="../../assets/img/407x867/img5.jpg" alt="Image Description">
                                  </div>

                                  <figure class="max-w-19rem w-100 position-absolute top-0 left-0 z-index-n1 mt-n5 ml-n5">
                                    <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
                                  </figure>
                                </div>
                                <!-- End Device Mockup -->
                              </div>
                            </div>
                          </div>

                          <div class="d-none d-lg-block bg-light content-centered-y w-100 h-75 z-index-n1"></div>
                        </div>
                      </div>
                      <!-- End Subscription Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

Component #2

Like what you're reading? Subscribe to our top stories.

                    
                      <div class="card bg-img-hero bg-navy text-white text-center p-4 my-4" style="background-image: url(../../assets/svg/components/abstract-shapes-1.svg);">
                        <h4 class="text-white mb-3">Like what you're reading? Subscribe to our top stories.</h4>

                        <!-- Form -->
                        <form class="js-validate w-md-75 mx-md-auto">
                          <div class="js-form-message">
                            <div class="d-flex align-items-center">
                              <label class="sr-only" for="subscribeSrArticle">Subscribe</label>
                              <div class="input-group">
                                <input type="email" class="form-control" id="subscribeSrArticle" placeholder="Your email" aria-label="Your email">
                              </div>
                              <button type="submit" class="btn btn-light ml-3">Submit</button>
                            </div>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

Component #3

Stay in the know

Get special offers on the latest developments from Front.

                    
                      <!-- Subscribe Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-60 text-center mx-auto mb-7">
                          <h2>Stay in the know</h2>
                          <p>Get special offers on the latest developments from Front.</p>
                        </div>
                        <!-- End Title -->

                        <div class="w-lg-40 mx-lg-auto">
                          <!-- Form -->
                          <form class="js-validate">
                            <div class="form-row">
                              <div class="col-sm col-md-6 col-lg mb-2">
                                <div class="js-form-message">
                                  <label class="sr-only" for="signupSrEmailExample1">Your email</label>
                                  <div class="input-group">
                                    <input type="email" class="form-control" name="email" id="signupSrEmailExample1" placeholder="Your email" aria-label="Your email" required
                                           data-msg="Please enter a valid email address.">
                                  </div>
                                </div>
                              </div>

                              <div class="col-sm-auto">
                                <button type="submit" class="btn btn-primary btn-block">Get Started</button>
                              </div>
                            </div>
                          </form>
                          <!-- End Form -->
                        </div>
                      </div>
                      <!-- End Subscribe Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

Component #4

Subscribe

Get the latest from Front

You can unsubscribe at any time. Read our privacy policy

                    
                      <!-- Stories Section -->
                      <div class="container space-2">
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto">
                          <div class="mb-5">
                            <span class="d-block small font-weight-bold text-cap mb-2">Subscribe</span>
                            <h2>Get the latest from Front</h2>
                          </div>

                          <!-- Form -->
                          <form class="js-validate mb-2">
                            <label class="sr-only" for="signupSrEmailExample2">Email</label>
                            <div class="input-group">
                              <input type="email" class="form-control" name="email" id="signupSrEmailExample2" placeholder="chkray@gmail.com" aria-label="chkray@gmail.com" required>
                              <div class="input-group-append">
                                <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                              </div>
                            </div>
                          </form>
                          <!-- End Form -->

                          <p class="small">You can unsubscribe at any time. Read our <a href="#">privacy policy</a></p>
                        </div>
                      </div>
                      <!-- End Stories Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

Component #5

Stay in the know

Get special offers on the latest developments from Front.

See Help Front in action. Get a Demo

Image Description
                    
                      <!-- Subscribe Section -->
                      <div class="position-relative text-center">
                        <div class="container space-2 space-bottom-lg-4">
                          <!-- Title -->
                          <div class="w-md-60 mx-md-auto mb-5 mb-md-7">
                            <h2 class="h1">Stay in the know</h2>
                            <p>Get special offers on the latest developments from Front.</p>
                          </div>
                          <!-- End Title -->

                          <!-- Subscribe Form -->
                          <div class="w-md-75 w-lg-50 mx-md-auto">
                            <form class="js-validate mb-3">
                              <div class="form-row">
                                <div class="col-sm-8 mb-2">
                                  <div class="js-form-message">
                                    <label class="sr-only" for="signupSrEmailExample3">Your email</label>
                                    <div class="input-group input-group-pill">
                                      <input type="email" class="form-control" name="email" id="signupSrEmailExample3" placeholder="Your email" aria-label="Your email" required
                                             data-msg="Please enter a valid email address.">
                                    </div>
                                  </div>
                                </div>

                                <div class="col-sm-4">
                                  <button type="submit" class="btn btn-primary btn-pill btn-wide">Get Started</button>
                                </div>
                              </div>
                            </form>

                            <p>See Help Front in action. <a class="font-weight-bold" href="#">Get a Demo <i class="fas fa-angle-right ml-1"></i></a></p>
                          </div>
                          <!-- End Subscribe Form -->

                          <!-- SVG Illustration -->
                          <div class="d-none d-lg-block position-absolute bottom-0 left-0 max-w-35rem w-100">
                            <img class="img-fluid" src="../../assets/svg/illustrations/mobile-article.svg" alt="Image Description">
                          </div>
                          <!-- End SVG Illustration -->
                        </div>
                      </div>
                      <!-- End Subscribe Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

Component #6

Stay in the know

Get special offers on the latest developments from Front.

                    
                      <!-- Subscribe Section -->
                      <div class="bg-light">
                        <div class="container space-2">
                          <div class="row justify-content-center">
                            <div class="col-md-9 col-lg-6">
                              <!-- Title -->
                              <div class="text-center mb-4">
                                <h2 class="h1">Stay in the know</h2>
                                <p>Get special offers on the latest developments from Front.</p>
                              </div>
                              <!-- End Title -->

                              <!-- Subscribe Form -->
                              <form class="js-validate js-form-message w-lg-85 mx-lg-auto">
                                <label class="sr-only" for="subscribeSrEmail">Email address</label>
                                <div class="input-group input-group-pill">
                                  <input type="email" class="form-control" name="email" id="subscribeSrEmail" placeholder="Email address" aria-label="Email address" aria-describedby="subscribeButton" required
                                         data-msg="Please enter a valid email address.">
                                  <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary px-6" id="subscribeButton">Join</button>
                                  </div>
                                </div>
                              </form>
                              <!-- End Subscribe Form -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Subscribe Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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