Create a Simple HTML5 Contact Form

After reading up on HTML5 and hearing all the buzz, I decided to take a few minutes and create a simple form to help me learn a little more about it and maybe share a few things along the way. Accompanying me are 12 new input types, most of which I don’t use in this form, but are pretty snazzy.

There’s new input types

At the time of this post the input types being supported by the newer browsers are email, url, tel, search, number, and range. The types only supported by Opera are date, datetime, datetime-local, month, week, and time.

What’s so great about them?  Well, the thing that sticks out the most to me so far is Mobile Safari’s integration with the e-mail, tel, and url input types.  If you are using an iPhone and hit a HTML5 form field utilizing an url type your keyboard will display the special keyboard with a “.com” button.  This doesn’t really help people with .net domain extensions, but it’s a step in the right direction.  The same goes with email types – a keyboard with an “@” button will appear making it easier to fill out.  The tel input type will display the iPhone’s number pad.

Getting started

To get started we need to build a basic HTML5 page and a form that utilizes the new input types and the stylesheet to keep it looking good.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Form</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="contact-form">    

<form id="contact" method="post" action="">
<fieldset>    

<label for="name">Name</label>
<input type="text" name="name">

<label for="email">E-mail</label>
<input type="email" name="email">

<label for="phone">Phone</label>
<input type="text" name="phone">

<label for="website">Website</label>
<input type="url" name="url">

<label for="message">Question/Comment</label>
<textarea name="message"></textarea>

<input type="submit" name="submit" id="submit" value="Send Message" />

</fieldset>
</form>

</div><!-- /end #contact-form -->

</body>
</html>

Let’s add some placeholders

More than likely you have seen placeholders that up until now have been strictly JavaScript driven.  With HTML5, we only have to use JavaScript as a fall back.

<label for="name">Name</label>
<input type="text" name="name" placeholder="Full Name">

<label for="email">E-mail</label>
<input type="email" name="email" placeholder="name@domain.com">

<label for="phone">Phone</label>
<input type="tel" name="phone" placeholder="ex. (555) 555-5555">

<label for="website">Website</label>
<input type="url" name="url" placeholder="http://">

Use Modernizr to handle the fallbacks

I’ve been using Modernizr as a fallback because, well, it makes my life easy.  It will detect if a browser supports a HTML5 feature and if it doesn’t, it allows you to handle it appropriately.  To handle the placeholder fallback we are going to use Modernizr and mix in some jQuery goodness with the placeholder plugin by Daniel Stocks.

<script src="js/jquery.placeholder.js"></script>
<script src="js/modernizr-min.js"></script>
<script>
if (!Modernizr.input.placeholder){
 $('input[placeholder], textarea[placeholder]').placeholder();
}
</script>

Client-side Validation

HTML5 offers some great validation, but unfortunately it’s currently only fully supported by Opera.  Firefox should have it in version 4 and Chrome has it halfway implemented which really doesn’t make sense to me.  While testing native validation on this form, Chrome will validate the form and won’t allow it to be submitted, but will not display a message telling the user why.  This can be confusing and it’s why I am using a jQuery validation plugin for it.  Start by adding the validation class to the fields.  The title will display the error message text that your user will see.

<input type="text" name="name" placeholder="Full Name" title="Enter your name" class="required">

<input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email">

In the final front-end step I’ll use the jQuery form plugin in conjunction with the validation plugin to pass the form to the server side process.php via ajaxSubmit.

<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
url: 'process.php',
success: function() {
$('#contact').hide();
$('#contact-form').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
}
});
}
});
});
</script>

That’s pretty much it

HTML5 offers a ton a robust new features and I have barely grazed the surface with its capabilities in this tutorial.  I’m sure there will be more to share along the way.  I’d like to give a special thanks to Chris Coyier for letting me reference his tutorial for help with the ajax portion of this post.

The download includes a stylesheet to spruce up the new form and a basic server side form processor, but you might want to apply some server side validation as well.

View Demo

Download Files

Leave a Comment

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

*