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.
Below is a screen capture of the Free Responsive Contact Form viewed on a mobile device.
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:
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:
This is the physical landing page, here you can change the logo, fields, copy, etc…
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.
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.
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:
Click here to Download the Free Responsive Contact Form
Click here to Demo the Free Responsive Contact Form