Drive Signups with Stylish Footer Forms

Drive more conversions on your website by including a signup form on every page of your website.

Drive more signup conversions on your website by including a signup form on every page of your website. Users are 31% more likely to signup for your product or service if there is an easy-to-use form to signup on every page of your website rather than a dedicated page they are required to navigate to.

Below is the HTML, CSS, and file includes required to add a stylish signup form to your website.

Step 1 - Add the HTML below at the end of your web page content

<section class="form-section">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h3>Sign up for WebCorpCo Today!</h3>
        <form action="" method="post" id="footer-form">
          <div class="row">
            <div class="col-md-3 video-form-fields">
              <div class="form-group has-error has-danger">
                <label for="your_email" class="sr-only">What is your email?</label> <input type="email" name="member_email" class="form-control" id="member_email2" placeholder="Work Email" required>
              </div>
            </div>
            <div class="col-md-3 video-form-fields">
              <div class="form-group has-error has-danger">
                <label for="visitor_company" class="sr-only">What company do you work for?</label> <input type="text" class="form-control" name="member_company" id="visitor_company" placeholder="Company" required>
              </div>
            </div>
            <div class="col-md-3 video-form-fields">
              <div class="form-group has-error has-danger">
                <label for="visitor_company" class="sr-only">What is your job title?</label> <input type="text" class="form-control" name="member_company" id="visitor_company" placeholder="Job Title" required>
              </div>
            </div>
            <div class="col-md-3 video-form-fields">
              <input type="hidden" name="mode" value="saveVisitor" id="mode"> <button type="submit" id="Submit2" class="btn btn-primary btn-solodev">Get Started</button>
            </div>
          </div>
        </form>
      </div>
      <div class="clearfix"></div>
      <p class="small-text">By clicking "Get Started" I agree to WebCorpCo's <a href="">Terms of Service.</a></p>
    </div>
  </div>
  <div class="clearfix"></div>
</section>
<footer class="ct-footer text-center-sm text-center-xs">
  <div class="container">
    <div class="row ct-u-paddingBottom40">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ct-footer-header">Services</div>
        <ul class="ct-footer-list list-unstyled">
          <li>
            <a href="#">Design</a>
          </li>
          <li>
            <a href="#">Marketing</a>
          </li>
          <li>
            <a href="#">Sales</a>
          </li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ct-footer-header">Learn More</div>
          <ul class="ct-footer-list list-unstyled">
            <li>
              <a href="#">Company</a>
            </li>
            <li>
              <a href="#">Clients</a>
            </li>
            <li>
              <a href="#">News</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ct-footer-header">Join Us</div>
        <ul class="ct-footer-list list-unstyled">
          <li>
            <a href="#">Facebook</a>
          </li>
          <li>
            <a href="#">LinkedIn</a>
          </li>
          <li>
            <a href="#">Twitter</a>
          </li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ct-footer-header">Get in Touch</div>
        <div class="address">
          <strong>Headquarters</strong><span>123 Easy Street</span><span>Orlando, FL 32801</span>
        </div>
      </div>
    </div>
  </div>
  <div class="ct-post_footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-4 text-center ct-u-paddingTop10">
          <p>© 2016 WebCorpCo. All Rights Reserved.</p>
        </div>
        <div class="col-sm-6 col-md-4 text-center ct-u-paddingTop10">
          <ul class="list-unstyled list-inline">
            <li>
              <a href="#">Site Map</a>
            </li>
            <li>
              <a href="#">Privacy Policy</a>
            </li>
            <li>
              <a href="#">Contact Us</a>
            </li>
          </ul>
        </div>
        <div class="col-sm-12 col-md-4 text-center ct-u-paddingTop10">
          <p>Powered by <a href="//www.webcorpco.com" target="_blank">WebCorpCo</a></p>
        </div>
      </div>
    </div>
  </div>
</footer>

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

section.form-section {
  background-color: #0489b7;
  padding: 40px 15px;
}
section.form-section h3 {
  color: #fff;
  font-size: 40px;
  text-align: center;
  font-weight: 400;
  margin: 20px 0 35px;
  text-transform: capitalize;
}
section.form-section input {
  height: 55px;
  width: 100%;
  color: #a1a1a1;
  margin-bottom: 20px;
  padding-left: 20px;
  font-size: 16px;
  background-color: rgb(18, 89, 113);
  border-color: rgb(0, 189, 255);
}
section.form-section a {
  color: #fff;
  text-decoration: underline;
}
.form-section .selectResponse {
  display: inline-block;
  width: 100%;
  min-width: 100%;
  vertical-align: middle;
  margin: 0;
}
.selectResponse {
  margin-top: 4px;
  display: inline-block;
  min-width: 350px;
  vertical-align: middle;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
  cursor: pointer;
}
section.form-section .selectize-input {
  color: #fff;
  margin-bottom: 20px;
}
section.form-section .selectize-input {
  padding-left: 20px;
}
section.video-section .video-form input, 
section.video-section .video-form .selectize-input, 
section.form-section .selectize-input {
  width: 100% !important;
  height: 55px !important;
  padding: 0 0 0 20px;
  border-radius: 0;
  font-size: 15px;
  line-height: 54px;
  text-align: left;
  color: #a1a1a1;
  background-color: #125971;
  border-color: #00bdff;
}
.form-section .selectize-input, 
.form-section .selectize-control.single .selectize-input.input-active {
  background: #073444;
  border-color: rgb(0, 189, 255);
}
section.form-section #Submit2 {
  font-size: 20px;
  text-transform: none;
  background-color: #ef9919;
  color: #fff;
  border: none;
  width: 100%;
  height: 55px;
  margin-right: 20px;
}
ol, 
ul {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
section.form-section p.small-text {
  text-align: center;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 14px;
}
section.form-section p {
  color: #fff;
  text-transform: uppercase;
  padding: 10px 0 20px 15px;
  font-weight: bold;
}
/* ================================
  # Footer styles
================================= */
.ct-footer-header {
  font-family: 'Open Sans Condensed', sans-serif;
}
.address,
.address .address-disclaimer {
  font-size: 1.4rem;
}
.address strong {
  font-weight: 700;
  display: block;
}
.address span.footer-form {
  color: #0079c2;
}
.address a {
  font-size: 1.9rem;
  font-weight: 600;
  display: block;
  padding-bottom: 20px;
  padding-bottom: 2rem;
}
.address a:hover {
  text-decoration: underline;
}
.address span {
  display: block;
  margin-top: 0.5rem;
}
.address .address-disclaimer {
  font-weight: 600;
}
.ct-select .selectize-input {
  line-height: .7;
}
.ct-footer {
  background-color: #111;
  color: #cbc9c9;
  padding-top: 4rem;
}
.ct-footer p {
  font-size: 1.4rem;
  color: #f9f9f9;
}
.ct-footer-header {
  color: #00bff3;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  padding: 3rem 0 2.5rem;
}
.ct-footer-list li a {
  font-size: 1.4rem;
  color: #cbc9c9;
}
.ct-footer-list li a:hover,
.ct-footer .ct-post_footer a:hover {
  text-decoration: underline;
}
.ct-footer-list li + li {
  margin-top: 0.5rem;
}
.ct-footer .ct-post_footer {
  background-color: #252525;
  color: #fff;
  padding: 2rem 0;
  font-family: 'Arial';
  font-size: 1.3rem;
  margin-top: 4rem;
}
.ct-footer .ct-post_footer ul.list-inline {
  font-size: 1.2rem;
}
.ct-footer .ct-post_footer p {
  margin: 0;
  margin: 0;
  font-size: inherit;
}
.ct-footer .ct-post_footer ul li {
  position: relative;
}
.ct-footer .ct-post_footer ul li + li {
  padding-left: 1.7rem;
  margin-left: 0.5rem;
}
.ct-footer .ct-post_footer ul li + li:before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  height: 60%;
  width: 0.1rem;
  background: #fff;
}
address {
  font-size: 1.4rem;
}
address b {
  font-size: inherit;
  text-transform: uppercase;
}
address span {
  display: block;
  margin-top: 0.5rem;
}
/* ================================
  # Media Queries
================================= */
@media screen and (max-width: 768px) {
  .col-xs-12 {
    text-align: center;
  }
}

Step 3 - Add the includes below to the web pages where your signup forms will live

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

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

Drive Signups with Stylish Footer Forms

Step 1 - Add the HTML below at the end of your web page content

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

Step 3 - Add the includes below to the web pages where your signup forms will live

Sign up to explore

Platform

Explore

Company