Creating a Multimedia Footer Form for your Website

It’s no surprise that having footer forms on all of your web pages increase website conversions. Since there’s more places for site visitors to convert, by default the probability is higher. How can you make the probability even higher? Making that footer form more than just a one way street can certainly help. Don’t just ask for information, exchange information. While they are filling out the form there may be a graphic or video that entices them even more. Perhaps without the graphic or video, they wouldn’t have even submitted the form.

In this tutorial, Solodev will teach you how to add a multimedia footer form to your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 — footer-form.html

Copy and paste the code below into footer-form.html

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<section class="shade-brand cta" id="form" style="user-select: auto;">
   <div class="container" style="user-select: auto;">
      <div class="row" style="user-select: auto;">
         <div class="col-md-4 hidden-xs hidden-sm text-center" style="user-select: auto;">
            <img src="https://www.solodev.com/assets/blog-2.jpg" alt="" style="user-select: auto;">
         </div>
         <div class="col-md-8 shade-brand" style="user-select: auto;">
            <h2 style="user-select: auto;"> See what data can do for you. </h2>
         </div>
         <div class="col-md-8 shade-brand" style="user-select: auto;">
            <div data-track-position="rolesceomasterform" style="user-select: auto;">
               <div class="master_form_container" style="user-select: auto;">
                  <form accept-charset="UTF-8" name="demo-request" class="validate-form" id="demo-request-form" novalidate="novalidate" >
                     <div class="master_form inline-form" style="user-select: auto;">
                        <!-- Mbox E -->
                        <h3 class="no-margin" style="user-select: auto;">Fill out the form below for instant access to an exclusive video demo.</h3>
                        <!-- Mbox E end -->
                        <div class="row" style="user-select: auto;">
                           <!--First Name-->
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="first_name" class="control-label" style="user-select: auto;">First Name</label>
                              <input id="first_name" class="required form-control noSpace" title="Please enter your first name" placeholder="First Name" name="first_name" type="text" value="" aria-required="true" style="user-select: auto;">
                           </div>
                           <!--Last Name-->
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="last_name" class="control-label" style="user-select: auto;">Last Name</label>
                              <input id="last_name" class="required form-control noSpace" title="Please enter your last name" placeholder="Last Name" name="last_name" type="text" value="" aria-required="true" style="user-select: auto;">
                           </div>
                        </div>
                        <div class="row" style="user-select: auto;">
                           <!--Business Email-->
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="email" class="control-label" style="user-select: auto;">Business Email</label>
                              <input id="email" class="email required form-control" title="Please enter a valid email" placeholder="Business Email" autocomplete="off" name="email" type="email" value="" aria-required="true" style="user-select: auto;">
                           </div>
                           <!--Phone-->
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="phone" class="control-label" style="user-select: auto;">Phone</label>
                              <input id="phone" class="phone required form-control" title="Please enter a valid phone number" placeholder="Phone" name="phone" type="tel" value="" aria-required="true" style="user-select: auto;">
                           </div>
                        </div>
                        <div class="row" style="user-select: auto;">
                           <!--Company-->
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="company" class="control-label" style="user-select: auto;">Company</label>
                              <input id="company" class="required form-control" title="Please enter a valid company" placeholder="Company" autocomplete="off" name="company" type="text" value="" aria-required="true" style="user-select: auto;">
                           </div>
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="title" class="control-label" style="user-select: auto;">Title</label>
                              <input id="title" class="required form-control" title="Please enter a valid job title" placeholder="Title" autocomplete="off" name="title" type="text" value="" aria-required="true" style="user-select: auto;">
                           </div>
                        </div>
                        <div class="row" style="user-select: auto;">
                           <div class="form-group col-sm-6" style="user-select: auto;">
                              <label for="department" class="control-label" style="user-select: auto;">Department</label>
                              <select id="department" title="Please enter a valid department" class="required form-control" name="department" aria-required="true" style="user-select: auto;">
                                 <option value="" selected="selected" style="user-select: auto;">Department</option>
                                 <option value="CEO/C-Suite" style="user-select: auto;">Executive Team</option>
                                 <option value="Customer Service" style="user-select: auto;">Customer Service</option>
                                 <option value="Engineering/Product Development" style="user-select: auto;">Product Development</option>
                                 <option value="Finance" style="user-select: auto;">Finance</option>
                                 <option value="IT" style="user-select: auto;">IT</option>
                                 <option value="Marketing" style="user-select: auto;">Marketing</option>
                                 <option value="Operations" style="user-select: auto;">Operations</option>
                                 <option value="Other" style="user-select: auto;">Other</option>
                                 <option value="Sales and Business Development" style="user-select: auto;">Business Development</option>
                              </select>
                           </div>
                           <div class="form-group col-sm-12" style="user-select: auto;">
                              <label class="show auto-demo-checkbox" style="user-select: auto;"><input id="autoDemoCheckbox" checked="checked" name="custom_demo_request" type="checkbox" value="1" style="user-select: auto;">&nbsp;&nbsp; Customize your demo.</label>
                           </div>
                           <div class="form-group col-sm-6 top-buffer mainformsubmit" style="user-select: auto;">
                      
                              <button class="btn btn-primary" type="submit" id="masterformsubmit" style="user-select: auto;">Watch Demo</button>
               
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

Step 2 — footer-form.css

Download the CSS below and include it in your web page

footer-form.css

Step 3 — Add the includes below

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this tutorial we showed you how to add a responsive footer form to your website with room for a graphic, GIF, or video! Take the design and make it your own!

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.