Free Responsive Contact Form

Free Responsive Contact Form and Landing Page

This is OUTDATED, please find new version here.

Plenty of our campaigns which involve an online sign up or a simple landing page where a potential client provides their details use the Free Responsive Contact Form.

This why we built the Free Responsive Contact Form. It can be styled, adjusted and manipulated to suite any client and capture any data.

Below is a screen capture of the Free Responsive Contact Form viewed on a regular browser.

Free Responsive Contact Form
Below is a screen capture of the Free Responsive Contact Form viewed on a mobile device.

Free Resposive Contact Form

So today we present you with a simple free responsive contact from which can be used for several purposes, here are a couple of uses:

  • Newsletter sign up
  • Client Feedback
  • Contact Request
  • Actual One Page Website

These are just a few but I am sure that their are tons more.

We have built the free responsive contact form using the fantastic 1140 CSS Grid System. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

We decided on this because it is really simple to use and it has been tested across tons of browsers providing compatibility back to IE 6. You can read more about it here.

Secondly we made use of a really simple contact form which we based on a contact from by Chris Coyier. It has been modified of course to be fully responsive and functional across all browser, if you are interested in the simple contact form, you can read about it here.

Requirements for the Free Responsive Contact Form

The Free Responsive From is built with:

  • HTML
  • PHP
  • CSS
  • jQuery

So for you to implement this you will need a working PHP environment but other than this, you are good to go.

All the files that you need are included in the contact form.

Using the Free Responsive Contact Form

The code is very simple and consists of the following parts:

  • index.php
    This is the physical landing page, here you can change the logo, fields, copy, etc…
  • style.css
    Here you can style the different elements on the website. Note that there is also two other style sheets for IE and the layout, I would not recommend messing withn these.
  • contactengine.php
    This is where you will add the email details such as the sent from email address and the send to address, all the code is thoroughly commented, so you will see what needs to be done once you open the file.
  • contactthanks.php
    Here you can add a thank you message.

So be sure to style the form according to your likes, change the page title and description, remove the  <meta name=”robots” content=”noindex”> (if applicable)  and it is very important to change the email addresses in the contactengine.php.

Notes on the Free Responsive Contact Form

It does not have a Captcha function built in. The reason why we omitted this si because we mostly use this form for campaigns and not as a permanent feature on any of our websites.

We have not been bombarded by SPAM and due to the short term nature of the Free Responsive Contact Form, it is normally taken offline by the time that SPAM bots do get wind of it.

We mostly use the Free Responsive Contact Form as a click through for email campaigns to serve as an RSVP or newsletter sign up but you are free to user it as you like.

So if you have any questions regarding the Free Responsive Contact Form, contact us and if you are looking form something similar which packs a bit more punch or customised, let us know, the Howl Media team si here for you.

The Email which you receive will look like this:

Free Responsive Contact From Email Preview

Click here to Download the Free Responsive Contact Form

Click here to Demo the Free Responsive Contact Form

Posted in CSS, Freebies, HTML, Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>