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

Convert More Website Visitors with Footer Forms

Data shows that adding a footer contact form to every page of your website increases conversions by 31%.

In part I of our lead generation series, we will teach you how to convert more visitors to your website into customers. When navigating a majority of websites you'll find they each have one constant, dedicated contact us page. Data, however, shows that adding a footer contact form to every page of your website actually increases conversions by 31% as users are more likely to contact you if doing so is easy and does not require visiting a dedicated web page. If you're in the lead generation business, as most websites are, adding a footer contact form to your web pages is highly advised to increase conversions.

Below we have included the code and CSS you need to add a basic Bootstrap contact footer form to your web pages.

Step 1 - Add the HTML below just above the footer of your web pages.

<section id="evaluation">
  <div class="container">
    <form id="contentForm" name="contentForm" enctype="multipart/form-data" method="post" action="" data-h5-instanceid="0" novalidate="novalidate">
      <h2 class="text-uppercase ct-header ct-header--smaller ct-header--underline">We are ready for your next project</h2>
      <div class="form-divider"></div>
      <p id="eval-anchor">Thanks again for looking over our website and considering us for help with your project. Please take a moment and fill out as much of the form below as you can, and someone will quickly respond to your inquiry.</p>
      <div class="row">
        <div class="col-md-8">
          <div class="form-group">
            <label class="sr-only" for="name">Name</label>
            <input name="name" id="name" class="form-control validate[required]" type="text" value="" placeholder="Name *">
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label class="sr-only" for="email">Email</label>
            <input name="email" id="email" class="form-control validate[required,custom[email]]" type="email" value="" placeholder="Email *">
            <input type="hidden" name="formfields[fromEmail]" id="fromEmail" value="">
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label class="sr-only" for="phone">Phone</label>
            <input name="phone" id="phone" class="form-control h5-phone validate[required,custom[phone]]" type="tel" value="" placeholder="Phone *"> 
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label class="sr-only" for="company">Company / Organization</label>
            <input name="company" id="company" class="form-control validate[required]" type="text" value="" placeholder="Company / Organization *">
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label class="sr-only" for="projecttype">Topic</label>
            <select class="form-control selectized" id="projecttype" name="Project Type" placeholder="Topic" tabindex="-1"> 
              <option value="">Your Topic</option>
              <option value="Topic Type 1">Project Type 1</option>
              <option value="Topic Type 2">Project Type 2</option>
              <option value="Topic Type 3">Project Type 3</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="form-group form-group--wide">
        <label class="sr-only" for="details">How Can We Help You?</label>
        <textarea name="details" rows="5" id="details" class="form-control validate[required]" placeholder="How Can We Help You? *" cols="30">[Add a closing textarea tag here]
        <button class="btn btn-primary btn-form" type="submit">Send</button>
      </div>
    </form>

  </div>
</section>

The above HTML simply sets up the basic structure of the form.

Step 2 - Add the following references to Bootstrap and jQuery in the header of your web pages.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>

Bootstrap is used for the wrapping container, effectively making the form fully responsive.

Step 3 - Download the CSS below and include it in your web page

footer-form.css

The CSS ensures that the form's input fields are stylized to effectively capture the user's attention. Feel free to change the various colors based upon your website's color scheme.

Step 4 - Add validation to the form via jQuery Validation Engine.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css">

Generally speaking, most forms need validation to ensure all necessary fields are filled prior to submission. jQuery Validation Engine provides a convenient way to validate fields.

Step 5 - Add optional styling to your dropdown select options via Selectize.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/js/selectize.js"></script>

Unfortunately, you cannot stylize select options with traditional CSS. Selectize.js is a unique script which allows you to recreate dropdown options and apply appropriate styling.

Step 6 - Initialize the jQuery Validation Engine and Selectize Plugins.

<script>
  $(document).ready(function(){
    $("#contentForm").validationEngine('attach', {});
    $('#projecttype').selectize();
  });
</script>

You can customize the form to meet the needs of your business and swap out form fields with the fields you want from your leads. Now you have a running start to start converting more leads that visit your website! Enjoy!

Download from Github

Share on Facebook Tweet It

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