Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Drive Signups with a Signup Footer Form

Driving subscriptions to your newsletter involves many calls-to-action and having a footer form on your web pages is a crucial CTA...

Driving subscriptions to your newsletter involves many calls-to-action and having a signup footer form on your web pages is crucial to driving signups. In this article, Solodev will provide you with the code you need to add a customizable signup footer form to your website.

Below is the HTML, CSS, and JavaScript required to add a subscription footer form to your website.

Step 1 - Add the HTML below above the footer of your web page

<section>
  <div class="ct-form ct-form-newsletter ct-js-form" data-h5-instanceid="0">
    <div class="container">
      <form action="" method="post">
        <div class="row">
          <div class="col-md-3">
            <span>subscribe to receive the latest news, events & updates.</span>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label class="sr-only" for="newsletterFooter">Enter your email address</label> <input name="newsletterEmail" id="newsletterFooter" class="form-control h5-email validate[required]" placeholder="Enter your email address" type="text" value="" >
            </div>
          </div>
          <div class="col-sm-6 col-md-3">
            <button class="btn btn-transparent btn-lg" type="submit">subscribe</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

Step 2 - Add the CSS below to the main stylesheet of your website

.ct-form-newsletter {
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background-color: #157174;
  padding: 50px 0;
}
.ct-form-newsletter span {
  display: block;
  font-size: 0.820em;
  margin-bottom: 20px;
  text-align: left;
  line-height: 24px;
  margin-top: 10px;
}
.ct-form-newsletter .form-group {
  margin-bottom: 0;
}
.ct-form-newsletter input {
  height: auto;
  font-size: inherit;
  background-color: transparent;
  padding: 22px 12px 21px 30px;
  margin-bottom: 20px;
}
.form-control {
  color: #ebebeb;
  color: rgba(235, 235, 235, 0.87);
  border-radius: 0;
  border-color: #fff;
}
.ct-form-newsletter .btn {
  padding: 20px 65px;
}
.btn-transparent {
  background-color: transparent;
  border: 5px solid #fff;
}
.btn {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.950em;
  text-transform: uppercase;
  border-radius: 0;
}
.newsletter-footer {
  color: #fff  
}
.placeholder {
  background-color: #fff;  
}
input.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
input.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
input.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
input.form-control:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
@media only screen and (min-width: 768px){
  .ct-form-newsletter {
    text-align: left;
  }
  .ct-form-newsletter input {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px){
  .ct-form-newsletter span {
    margin-bottom: 0;
  }
}

Step 3 - Add the includes below to the page where your footer form lives

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="signup-footer-form.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Terms Privacy Policy Contact