Form - Subscribe
Component #1
Ready to growth your business?
Your website is fully responsive so visitors can view your content from their choice of device.
<!-- 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 -->
<!-- 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-dark 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 -->
<!-- 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 -->
<!-- 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 -->
<!-- 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
<!-- 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 -->
<!-- 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 -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FORM VALIDATION
// =======================================================
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>