It has taken more time than I expected to complete this tutorial, because I kept on adding more and more features to our contact form.

Starting with the idea of just a simple HTML5 contact form, later thought of adding AJAX form submission and later came the idea of supporting JavaScript disabled browsers and much more.

What is HTML5 ? Can we use it in our project ?

HTML5 is the next generation of HTML.

HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders ,date pickers and color pickers; others are more subtle.

For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means we can create a more improved Forms for our website, even if some of our visitors are stuck on IE 6.

In our contact form we are going to use input controls namely email ,required, url and phone. Yeah That’s it, but its good enough to make a really good contact form.

What is AJAX ?

AJAX can create a highly responsive web interface and increase the user experience.Using AJAX the form can be submitted without Page reload which makes our form much more friendly.

Browser Support

The CSS styling has been coded in such a way that the page looks exactly same in all popular web browsers.Although the form uses AJAX form submission, if JavaScript has been disabled in a web browser then a normal contact form will be rendered.

To sum up this is an ultimate contact form which can be seamlessly integrated to any web

site and works totally fine in any browser providing a cool user interface.

Including the code on this page would make the very post very long, so please download the source code and refer to it.The code has been heavily commented and would pose no difficulty to use it in your website.

<?php
$to = "your_email_address";//enter your email address
?>

Download

Live Demo

Next tutorial will be back with an interesting tutorial, meanwhile keep updated with all our tutorials by :

• Subscribe to RSS feeds
• Subscribe via email
• Subscribe via SMS

If you have any problems using the downloaded files, then leave a comment below.

Want more improvisations on this script, or want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

Copyright protected by Digiprove © 2011 Praveen Gowda I VSome Rights Reserved

Related posts: