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%.

Convert More Website Visitors with Footer Forms

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.

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.

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.

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.

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.

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!

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.