Skip to main content

Hero Subscribe

Find your audience, engage your customers, and build your brand with Space's subscribe forms.

Hero subscribe #1

Contact Us

Should you have questions or concerns, contact us

We are a creative studio focusing on culture, luxury, editorial & art. Somewhere between sophistication and simplicity.

Office hours:
Monday - Friday: 09:00 AM - 06:00 PM Closed on Sunday & Holidays

London, England

Unit 25 Suite 3, 925 Prospect PI,
Beach Resort, 23001

Phone number

+01 (0) 333 444 55

HTML:

              
                <!-- Contact Us Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row justify-content-lg-between">
                    <div class="col-md-6 mb-9 mb-md-0">
                      <!-- Title -->
                      <div class="mb-7">
                        <span class="u-label u-label--sm u-label--purple mb-3">Contact Us</span>
                        <h2 class="h3">Should you have questions or concerns, contact us</h2>
                        <p>We are a creative studio focusing on culture, luxury, editorial & art. Somewhere between sophistication and simplicity.</p>
                      </div>
                      <!-- End Title -->

                      <!-- Google Map -->
                      <div class="bg-white shadow-sm rounded p-2 mb-5">
                        <div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9 min-height-280 rounded"
                             data-type="custom"
                             data-lat="40.674"
                             data-lng="-73.946"
                             data-zoom="12"
                             data-title="Agency"
                             data-styles='[["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]], ["", "labels", [{"visibility":"on"}]], ["water", "", [{"color":"#bac6cb"}]] ]'
                             data-pin="true"
                             data-pin-icon="../assets/img/map-markers/map-marker1.png"></div>
                      </div>
                      <!-- End Google Map -->

                      <!-- Info -->
                      <div class="media">
                        <h5 class="h6 d-flex mr-3">Office hours:</h5>
                        <div class="media-body">
                          <small class="d-block text-muted">Monday - Friday: 09:00 AM - 06:00 PM</small>
                          <small class="d-block text-muted">Closed on Sunday & Holidays</small>
                        </div>
                      </div>
                      <!-- End Info -->
                    </div>

                    <div class="col-md-6 col-lg-5 d-flex align-items-end gradient-overlay-half-dark-v2 bg-img-hero height-600 px-0" data-bg-img-src="../assets/img/500x700/img1.jpg">
                      <div class="w-100 text-center shadow-sm p-5">
                        <!-- Title -->
                        <div class="mb-5">
                          <h3 class="text-white">London, <strong class="text-primary">England</strong></h3>
                          <p class="text-white">Unit 25 Suite 3, 925 Prospect PI,<br>Beach Resort, 23001</p>
                        </div>
                        <!-- End Title -->

                        <!-- Info -->
                        <div class="mb-5">
                          <h4 class="h6 text-primary">Phone number</h4>
                          <span class="d-block text-white">+01 (0) 333 444 55</span>
                        </div>
                        <!-- End Info -->

                        <!-- Input -->
                        <form class="js-validate js-form-message">
                          <div class="js-focus-state input-group form form--no-brd form--no-addon-brd">
                            <input type="email" class="form-control form__input" name="email" required
                                   placeholder="Enter your email address"
                                   aria-label="Enter your email address">
                            <span class="input-group-append form__append">
                              <button type="submit" class="btn btn-sm btn-primary">Subscribe</button>
                            </span>
                          </div>
                        </form>
                        <!-- End Input -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Contact Us Section -->
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
              <script src="../../assets/vendor/gmaps/gmaps.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.validation.js"></script>
              <script src="../../assets/js/helpers/hs.focus-state.js"></script>
              <script src="../../assets/js/helpers/hs.g-map.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                // initialization of google map
                function initMap() {
                  $.HSCore.components.HSGMap.init('.js-g-map');
                }

                $(document).on('ready', function () {
                  // initialization of form validation
                  $.HSCore.components.HSValidation.init('.js-validate');

                  // initialization of forms
                  $.HSCore.helpers.HSFocusState.init();
                });
              </script>

              <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
            
          

Hero subscribe #2

HTML:

              
                <div class="container space-2 space-3--lg">
                  <!-- Form -->
                  <form class="js-validate w-lg-80 mx-lg-auto">
                    <div class="form-row">
                      <div class="col-sm-4 mb-3 mb-sm-0">
                        <!-- Input -->
                        <div class="js-form-message">
                          <div class="js-focus-state input-group form">
                            <div class="input-group-prepend form__prepend">
                              <span class="input-group-text form__text">
                                <span class="fa fa-user form__text-inner"></span>
                              </span>
                            </div>
                            <input type="text" class="form-control form__input" name="username" required
                                   placeholder="Name"
                                   aria-label="Name"
                                   data-msg="Name must contain only letters.">
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-sm-4 mb-3 mb-sm-0">
                        <!-- Input -->
                        <div class="js-form-message">
                          <div class="js-focus-state input-group form">
                            <div class="input-group-prepend form__prepend">
                              <span class="input-group-text form__text">
                                <span class="fa fa-envelope form__text-inner"></span>
                              </span>
                            </div>
                            <input type="email" class="form-control form__input" name="email" required
                                   placeholder="Email"
                                   aria-label="Email"
                                   data-msg="Please enter a valid email address.">
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-sm-4">
                        <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                      </div>
                    </div>
                  </form>
                  <!-- End Form -->
                </div>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.validation.js"></script>
              <script src="../../assets/js/helpers/hs.focus-state.js"></script>

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

                  // initialization of forms
                  $.HSCore.helpers.HSFocusState.init();
                });
              </script>
            
          

Hero subscribe #3

* 14 day free trial, no credit card required.

HTML:

              
                <div class="container text-center space-2">
                  <!-- Form -->
                  <form class="js-validate form-row justify-content-md-center mb-4">
                    <div class="col-7 col-md-6 col-lg-4">
                      <!-- Input -->
                      <div class="js-form-message">
                        <div class="js-focus-state input-group form">
                          <div class="input-group-prepend form__prepend">
                            <span class="input-group-text form__text">
                              <span class="fa fa-user form__text-inner"></span>
                            </span>
                          </div>
                          <input type="text" class="form-control form__input" name="username" required
                                 placeholder="Name"
                                 aria-label="Name"
                                 data-msg="Name must contain only letters.">
                        </div>
                      </div>
                      <!-- End Input -->
                    </div>

                    <div class="col-5 col-md-3 col-lg-2">
                      <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                    </div>
                  </form>
                  <!-- End Form -->

                  <p class="small mb-0">* 14 day free trial, no credit card required.</p>
                </div>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.validation.js"></script>
              <script src="../../assets/js/helpers/hs.focus-state.js"></script>

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

                  // initialization of forms
                  $.HSCore.helpers.HSFocusState.init();
                });
              </script>
            
          

Hero subscribe #4

Sign up for newsletter

Keep an eye out for our new deals rolling out this year!

HTML:

              
                <!-- CTA Section -->
                <div class="container space-2">
                  <div class="row align-items-md-center">
                    <div class="col-md-6 mb-5 mb-md-0">
                      <h2 class="h4 mb-1">Sign up for newsletter</h2>
                      <p class="mb-0">Keep an eye out for our new deals rolling out this year!</p>
                    </div>

                    <div class="col-md-6">
                      <!-- Form -->
                      <form class="js-validate">
                        <div class="js-form-message">
                          <div class="js-focus-state input-group form">
                            <input type="email" class="form-control form__input" name="email" required
                                   placeholder="Email address"
                                   aria-label="Email address"
                                   data-msg="Please enter a valid email address.">
                            <div class="input-group-append form__append">
                              <button type="submit" class="btn btn-block btn-primary btn-wide">Subscribe</button>
                            </div>
                          </div>
                        </div>
                      </form>
                      <!-- End Form -->
                    </div>
                  </div>
                </div>
                <!-- End CTA Section -->
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.validation.js"></script>
              <script src="../../assets/js/helpers/hs.focus-state.js"></script>

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

                  // initialization of forms
                  $.HSCore.helpers.HSFocusState.init();
                });
              </script>
            
          

Hero subscribe #5

Image Description

Start talking to your users today

14 day free trial. No credit card required.

HTML:

              
                <!-- Subscribe Section -->
                <div class="bg-purple">
                  <div class="container space-2">
                    <div class="row justify-content-md-center align-items-md-center">
                      <div class="col-md-4 col-lg-3 d-none d-md-inline-block">
                        <img class="img-fluid" src="../assets/svg/components/news-illustration.svg" alt="Image Description">
                      </div>

                      <div class="col-md-8 col-lg-6 offset-lg-1">
                        <!-- Title -->
                        <div class="mb-5">
                          <h2 class="text-white mb-1">Start talking to your users today</h2>
                          <p class="lead text-light">14 day free trial. No credit card required.</p>
                        </div>
                        <!-- End Title -->

                        <!-- Input -->
                        <form class="js-validate js-form-message mb-2">
                          <div class="js-focus-state input-group form">
                            <input type="email" class="form-control form__input" name="email" required
                                   placeholder="Enter company email address"
                                   aria-label="Enter company email address">
                            <span class="input-group-append form__append">
                              <button type="submit" class="btn btn-sm btn-primary btn-wide">Start Free Trial</button>
                            </span>
                          </div>
                        </form>
                        <!-- End Input -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Subscribe Section -->
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.validation.js"></script>
              <script src="../../assets/js/helpers/hs.focus-state.js"></script>

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

                  // initialization of forms
                  $.HSCore.helpers.HSFocusState.init();
                });
              </script>
            
          

Hero subscribe #6

Track & trace

Enter your Tracking number to track your delivery.

HTML:

              
                <!-- CTA Section -->
                <div class="bg-purple text-white">
                  <div class="container space-1">
                    <div class="row justify-content-lg-between align-items-lg-center">
                      <div class="col-lg-5">
                        <h3 class="h4 mb-0">Track & trace</h3>
                        <p class="lead text-white mb-0">Enter your Tracking number to track your delivery.</p>
                      </div>

                      <div class="col-lg-5">
                        <!-- Input -->
                        <div class="input-group form">
                          <div class="input-group-prepend form__prepend">
                            <span class="input-group-text form__text">
                              <span class="fas fa-truck-loading text-purple" id="keywordInputAddon"></span>
                            </span>
                          </div>
                          <input type="text" class="form-control form__input" placeholder="1283791HJK128" aria-label="1283791HJK128" aria-describedby="keywordInputAddon">
                        </div>
                        <!-- End Input -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End CTA Section -->