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
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
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 -->