Envato Elements
How-To Tutorials
Courses
eBooks
Envato Studio
Community
Forum
Pricing
Help
Subscribe
Sign In
Search Envato Tuts+ Advertisement
CODE > WEB DEVELOPMENT
Build a Neat HTML5 Powered Contact Form by Michael Barrett 7 Jun 2011
Web Development Ajax
PHP
FEED
Difficulty: Beginner Length: Long Languages: English
HTML5
CSS
JavaScript
Front-End
LIKE
FO LLO W
FO LLO W
Weekly email summary
Back-End
jQuery
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Email Address
Update me weekly
Advertisement
Download Attachment
Translations Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too! Translate this post Powered by
In this tutorial, we are going to learn how to create a swanky HTML5 AJAX powered contact form. The form will use some of the new HTML5 input Advertisement
elements and attributes, and will be validated using the browser's built-in form validation. We will use jQuery and Modernizr to help out with the older browsers, and PHP on the server side to validate the input. Before getting going with this tutorial, have a look at our HTML5 Templates, as a quality theme might be a good option for your next project. Also note that, if you're not sure how to do this even after reading the tutorial, there are plenty of experienced service providers over on Envato Studio who can help you. For example, dasdesign will customize any type of HTML or HTML5 templates, including updates on CSS (style sheets), PHP (contact forms), and jQuery files. He can complete the job for just $50, and has a 100%
WATCH ANY COURSE NOW
satisfaction rating from 18 completed jobs.
Subscribe to Access
Step 1: Getting Started To begin, we need to setup our directory and files. To get started, I highly recommend the HTML5 boilerplate. This is a really good starting point for any HTML5 project and will save you a great deal of time. For this tutorial I chose 'BOILERPLATE CUSTOM'.
For more information on the HTML5 boilerplate check out this guide on Nettuts+. Once downloaded and unpacked, delete everything but index.html and the and js folders. I also added a folder called img and a PHP file called
css
process.php
. We will use the img folder for storing image assets for our form,
and process.php to handle all the server-side logic for the contact form. Here is what my directory structure looks like now:
That's all we need to get started! The HTML5 boilerplate includes an awesome CSS reset with sensible defaults and includes all the JS libraries (jQuery & Modernizr) we are going to be using today. All our JS files and CSS files have been hooked up in the index file. Now, it's time to move on to the markup.
Step 2: The Form Open index.html , and remove everything within the #container element. We'll put our contact form inside this div : 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
Get In Touch! Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possibl
- There were some problems with your form submission: