It's no surprise that having footer forms on all of your web pages increases website conversions. Since there are more places for site visitors to convert, by default the probability of them converting 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 article, Solodev will teach you how to add a multimedia footer form to your web pages.
For detailed instructions, view Solodev's Creating a Multimedia Footer Form for your Website article.
Try out a working example on JSFiddle.
The footer form contains the following basic HTML markup.
<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;"> 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>
All required CSS is in the file footer-form.css
This tutorial utilizes the following third party resources.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="footer-form.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>