Hero Subscribe

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

Hero subscribe #1

Stay in the know

Get special offers on the latest developments from Front.

Image Description 
<!-- Subscribe Section -->
<div class="position-relative space-bottom-2">
  <div class="container space-top-2 space-top-md-3">
    <!-- Title -->
    <div class="text-center w-md-60 mx-auto mb-7">
      <h2 class="text-primary"><span class="font-weight-semi-bold">Stay</span> in the know</h2>
      <p>Get special offers on the latest developments from Front.</p>
    </div>
    <!-- End Title -->

    <!-- Subscribe Form -->
    <div class="w-md-50 w-lg-40 mx-auto">
      <form class="js-validate js-form-message">
        <label class="sr-only" for="subscribeSrEmailExample1">Enter your email address</label>
        <div class="input-group input-group-lg input-group-borderless input-group-pill shadow-sm">
          <input type="email" class="form-control" name="email" id="subscribeSrEmailExample1" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeButtonExample1" required>
          <div class="input-group-append">
            <button class="btn btn-white text-primary" type="submit" id="subscribeButtonExample1">
              <span class="fas fa-paper-plane"></span>
            </button>
          </div>
        </div>
      </form>
    </div>
    <!-- End Subscribe Form -->
  </div>

  <!-- SVG Shape -->
  <div id="SVGirregularShape2Bottom" class="svg-preloader w-100 position-absolute right-0 bottom-0 left-0 z-index-n1">
    <figure class="ie-irregular-shape-2-bottom">
      <img class="js-svg-injector" src="../../assets/svg/components/irregular-shape-2-bottom.svg" alt="Image Description"
           data-parent="#SVGirregularShape2Bottom">
    </figure>
  </div>
  <!-- End SVG Shape -->
</div>
<!-- End Subscribe Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });

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

Hero subscribe #2

Image Description

Stay in the know

Subscribe now and get special offers along with newsworthy updates on the latest developments from Front.

<!-- Subscribe Section -->
<div id="SVGsubscribeExample1" class="svg-preloader gradient-half-primary-v1">
  <div class="container space-2">
    <div class="row justify-content-lg-end align-items-lg-center">
      <div class="col-lg-7 mb-7 mb-lg-0">
        <!-- SVG Icon -->
        <figure class="ie-subscribe-illustration">
          <img class="js-svg-injector" src="../../assets/svg/illustrations/subscribe.svg" alt="Image Description"
               data-parent="#SVGsubscribeExample1">
        </figure>
        <!-- End SVG Icon -->
      </div>

      <div class="col-lg-5">
        <div class="pl-lg-4">
          <!-- Title -->
          <div class="mb-5">
            <h2 class="text-white">
              <strong class="font-weight-semi-bold">Stay</strong> in the know
            </h2>
            <p class="text-white-70">Subscribe now and get special offers along with newsworthy updates on the latest developments from Front.</p>
          </div>
          <!-- End Title -->

          <!-- Subscribe Form -->
          <form class="js-validate js-form-message">
            <label class="sr-only" for="heroSubscribeSrEmailExample2">Your email address</label>
            <div class="input-group input-group-lg input-group-borderless input-group-pill">
              <input type="email" class="form-control" name="email" id="heroSubscribeSrEmailExample2" placeholder="Your email address" aria-label="Your email address" aria-describedby="heroSubscribeButtonExample2" required>
              <div class="input-group-append">
                <button class="btn btn-white text-primary" type="submit" id="heroSubscribeButtonExample2">
                  <span class="fas fa-paper-plane"></span>
                </button>
              </div>
            </div>
          </form>
          <!-- End Subscribe Form -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Subscribe Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });

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

Hero subscribe #3

Subscribe

Stay in the know

Get special offers on the latest developments from Front.

Be the lucky user to earn $1000 bonus now!

Be the lucky user to earn $1000 bonus now!

Image Description
Image Description
Image Description 
<!-- Subscribe Section -->
<div id="SVGsubscribeExample2" class="svg-preloader overflow-hidden">
  <div class="position-relative gradient-half-primary-v1 overflow-hidden space-top-2 space-bottom-3 space-top-md-3 space-bottom-md-4">
    <div class="container">
      <div class="row justify-content-md-center">
        <div class="col-md-9 col-lg-7 col-xl-6 offset-xl-2">
          <!-- Title -->
          <div class="text-center mb-4">
            <span class="btn btn-xs btn-soft-white btn-pill mb-2">Subscribe</span>
            <h2 class="h1 text-white"><span class="font-weight-semi-bold">Stay</span> in the know</h2>
            <p class="lead text-white-70">Get special offers on the latest developments from Front.</p>
          </div>
          <!-- End Title -->

          <!-- Subscribe Form -->
          <form class="js-validate js-form-message">
            <label class="sr-only" for="subscribeSrEmailExample3">Enter your email address</label>
            <div class="input-group input-group-lg input-group-borderless">
              <input type="email" class="form-control" name="email" id="subscribeSrEmailExample3" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeButtonExample3" required
                     data-msg="Please enter a valid email address.">
              <div class="input-group-append">
                <button type="submit" class="btn btn-warning btn-wide" id="subscribeButtonExample3">Join Front</button>
              </div>
            </div>
          </form>
          <!-- End Subscribe Form -->

          <!-- Info -->
          <div class="d-block d-xl-none">
            <small class="form-text text-white-70 mb-0">Be the lucky user to earn <span class="text-white font-weight-semi-bold">$1000</span> bonus now!</small>
          </div>
          <!-- End Info -->
        </div>

        <div class="col-xl-2 d-none d-xl-inline-block mt-auto mb-7">
          <div class="position-relative p-3">
            <p class="small text-white-70 mb-0">Be the lucky user to earn <span class="text-white font-weight-semi-bold">$1000</span> bonus now!</p>

            <!-- SVG Shape -->
            <figure class="position-absolute top-0 right-0 left-0">
              <img class="js-svg-injector" src="../../assets/svg/components/comment.svg" alt="Image Description"
                   data-parent="#SVGsubscribeExample2">
            </figure>
            <!-- End SVG Shape -->
          </div>
        </div>
      </div>
    </div>

    <!-- SVG Phone Mockup -->
    <div class="d-none d-lg-block u-devices-v2__phone u-devices-v2__phone--left-position">
      <figure class="w-75 u-devices-v2__phone-svg ie-devices-v2-iphone">
        <img class="js-svg-injector" src="../../assets/svg/components/iphone.svg" alt="Image Description"
             data-img-paths='[
               {"targetId": "#SVGiphoneImg1", "newPath": "../../assets/img/282x500/img3.jpg"}
             ]'
             data-parent="#SVGsubscribeExample2">
      </figure>
    </div>
    <!-- End SVG Phone Mockup -->
  </div>

  <!-- SVG Background -->
  <figure class="position-absolute right-0 bottom-0 left-0 z-index-2">
    <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
         data-parent="#SVGsubscribeExample3">
  </figure>
  <!-- End SVG Background Section -->
</div>
<!-- End Subscribe Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });

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

Hero subscribe #4

Subscribe

Stay in the know

Subscribe now and get special offers on the latest developments from Front.

Image Description 
<!-- Subscribe Section -->
<div class="position-relative">
  <div class="container space-2 space-md-3">
    <div class="w-md-80 w-lg-50 text-center mx-md-auto">
      <!-- Title -->
      <div class="mb-9">
        <span class="btn btn-xs btn-soft-primary btn-pill mb-2">Subscribe</span>
        <h2 class="font-weight-normal">Stay in the know</h2>
        <p class="mb-0">Subscribe now and get special offers on the latest developments from Front.</p>
      </div>
      <!-- End Title -->

      <!-- Input -->
      <form class="js-validate js-form-message">
        <label class="sr-only" for="subscribeSrEmailExample4">Enter your email address</label>
        <div class="input-group">
          <input type="text" class="form-control" name="name" id="subscribeSrEmailExample4" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeEmailButton" required
                 data-msg="Please enter a valid email address."
                 data-error-class="u-has-error"
                 data-success-class="u-has-success">
          <div class="input-group-append">
            <button type="submit" class="btn btn-primary" id="subscribeEmailButton">Subscribe</button>
          </div>
        </div>
      </form>
      <!-- End Input -->
    </div>
  </div>
  <!-- End Subscribe Section -->

  <!-- SVG Icon -->
  <div class="container">
    <div id="SVGsubscribe3" class="svg-preloader w-lg-80 mx-lg-auto">
      <figure class="ie-subscribe-1">
        <img class="js-svg-injector" src="../../assets/svg/flat-icons/subscribe-1.svg" alt="Image Description"
             data-parent="#SVGsubscribe3">
      </figure>
    </div>
  </div>
  <!-- End SVG Icon -->
</div>
<!-- Subscribe Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });
  });
</script>
Copy

Hero subscribe #5

London, UK

153 Williamson Plaza, Maggieberg, MT 09514

Phone number

+1 (062) 109-9222
Image Description 
<div id="SVGwave1BottomShape" class="col-lg-5 svg-preloader d-flex align-items-end bg-img-hero gradient-overlay-half-primary-v1 min-height-550 rounded-top-pseudo" style="background-image: url(../../assets/img/615x750/img4.jpg);">
  <!-- Contacts Info -->
  <div class="position-relative w-100 text-center p-5 pb-9">
    <!-- Info -->
    <div class="mb-5">
      <h2 class="text-white font-weight-semi-bold mb-0">London, <span class="text-warning">UK</span></h2>
      <p class="text-white-70">153 Williamson Plaza, Maggieberg, MT 09514</p>
    </div>
    <!-- End Info -->

    <!-- Info -->
    <div class="mb-5">
      <h3 class="h6 text-white">Phone number</h3>
      <span class="d-block h5 text-warning">+1 (062) 109-9222</span>
    </div>
    <!-- End Info -->

    <!-- Subscribe Form -->
    <form class="js-validate js-form-message">
      <label class="sr-only" for="heroSubscribeSrEmail">Enter your email address</label>
      <div class="input-group input-group-lg input-group-borderless input-group-pill">
        <input type="email" class="form-control" name="email" id="heroSubscribeSrEmail" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="heroSubscribeButtonExample4" required>
        <div class="input-group-append">
          <button class="btn btn-white text-primary" type="submit" id="heroSubscribeButtonExample4">
            <span class="fas fa-paper-plane"></span>
          </button>
        </div>
      </div>
    </form>
    <!-- End Subscribe Form -->
  </div>
  <!-- End Contacts Info -->

  <!-- SVG Bottom Shape -->
  <figure class="position-absolute right-0 bottom-0 left-0">
    <img class="js-svg-injector" src="../../assets/svg/components/wave-4-bottom-sm.svg" alt="Image Description"
         data-parent="#SVGwave1BottomShape">
  </figure>
  <!-- End SVG Bottom Shape -->
</div>
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });

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

Hero subscribe #6

Get email alerts for similar jobs

We have 1000+ similar open jobs.

<!-- Subscribe -->
<div class="bg-primary text-white shadow-primary-lg text-center shadow rounded p-5">
  <h3 class="h5">Get email alerts for similar jobs</h3>
  <p class="text-white-70 mb-4">We have 1000+ similar open jobs.</p>

  <!-- Form Input -->
  <form class="js-validate js-form-message" novalidate="novalidate">
    <label class="sr-only" for="subscribeSrEmail">Your email address</label>
    <div class="input-group">
      <input type="text" class="form-control" name="name" id="subscribeSrEmail" placeholder="Your email address" aria-label="Enter your email address" aria-describedby="subscribeEmailButtonExample2" required="" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
      <div class="input-group-append">
        <button type="submit" class="btn btn-success" id="subscribeEmailButtonExample2">
          <span class="fas fa-angle-right"></span>
        </button>
      </div>
    </div>
  </form>
  <!-- End Form Input -->
</div>
<!-- End Subscribe -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });
  });
</script>
Copy