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

  • http://keytheory.com Kenny Harper

    Great tutorial. Very contact form and thorough write up. Thanks for your efforts!

  • Pingback: How To Create A HTML5 Contact Form | Bloggermint

  • http://keivamp.com keivamp

    your awesome…Thanks!

  • http://tricksorkut.blogspot.com/ Paul Santosh

    how to do this in Google’s Blogger???????????

    • Anonymous

      Paul, I haven’t messed with Blogger too much. Maybe Wufoo would be a better option?

      • http://tricksorkut.blogspot.com/ Paul Santosh

        I tried it….
        -Thank you

  • Steve

    Very nice, I have it working but I am struggling a little with some things u might be able to help with.

    1) I am working locally (Running Apache on MAC OSX) when submitting the file there is no validation even if nothing in the fields.

    2) When I do move this over to my Go Daddy webserver, will everything work out of the box? Or do I need to hook up the PHP somehow with my server there somehow

    As you can tell a bit of a noob, so any advice is appreciated.

    Thanks

    • http://twitter.com/landonmiller Landon Miller

      Steve, the validation should work even locally. Just upload the files contained in the zip file to your GoDaddy Linux server and you’ll be all set – it’ll work out of the box.

      • Steve

        Hi Landon,

        Thanks for the quick reply. I still seem to be having an issue.

        My site is in dev stage, so I thought it might have been not working due to the fact I was either working locally or testing on a sub-domain. I now temporarily moved over everything over to production and put a htaccess pass on it. The validation works fine on the first 2 fields but when I press send I get the thank you screen but never get any email.

        Just to confirm the email address that it should be going to is defined in the process.php? correct?

        Thanks in advance for any help

      • Steve

        Sorry I forgot to add but there is a php file called webformmailer.php on the godaddy box. I am not sure if this has anything to do with why it is not working. Maybe I need to hook up the wires now the files are up there, but as you say it should work out of the box which would be perfect!

      • Steve

        Hi,

        Sorry for wasting your time…There must have been some bottle neck or delay as the mails are after coming in now. All works…What would be cool is if there is a possibility of implementing some human checker on the frontend before submitting. Not a captcha but a simpler version such as adding 2 numbers together.

        Thanks

  • Steve

    Hi,

    I actually figured out the first part. In my HTML doc I had the scripts called just after the closing head tag. I moved them near the top right after the styles are called and this fixed it!

    So now if I could get some help with part 2 that would be great.

    Thanks

  • Nadia

    Hi landon, really great tutorial…but when I try and use the form inside a modal window it does not seem to want to close…is it possible to do this?…thanks..nadia

    • Anonymous

      Try adding target=”_parent” to the tag

  • Stephen

    Hello Landon,
    Very good tut – thank you! especially for an extreme novice ;)

    One question please, I want to use this contact form on several pages – each with a different subject is this possible using only the one process.php ? the recipient will be the same in all cases.

    Or should I just include in the form a simple drop down box with options like in xhtml?

    Regards from Greece,
    Stephen.

    • Anonymous

      You could add a hidden input area with the subject you would like for each
      form. Then send that value to your process.php file, that way you won’t
      need more than one.

      • Stephen

        Thank you Landon,
        I posted my question late last night when I was too tired to think – today I came to the same conclusion that you propose and it works very well.
        I also added a subject field in the process.php

        $subject = strip_tags($_POST['subject']);
        “Name: $namenEmail: $emailnSubject: $subjectnDate: $datenMessage: $messagen”,

        Again I thank you and have bookmarked your site to browse at my leisure.
        Regards,
        Stephen.

  • http://twitter.com/JamesTaylorweb James Taylor

    Very informative and concise overview of HTML5 forms. Well done!

  • http://twitter.com/JamesTaylorweb James Taylor

    Very informative and concise overview of HTML5 forms. Well done!

  • http://www.dimios.weebly.com dimios

    looks fantastic, I already translated the error messages to Greek and anything else was needed. Also I edited the style.css to fit my needs. But as I am new with contact forms and I have never worked on .php I have no idea to make one and have it work. Is there anyone who can post any basic example how the process.php should be in order to work with this form?

    Thanks in advance.

  • Stephen

    Yasu apo Athina,
    This is what I use

    <?php
    // Get Data
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $subject = strip_tags($_POST['subject']);
    $date = strip_tags($_POST['date']);
    $message = strip_tags($_POST['message']);
    echo $REMOTE_ADDR;

    // Send Message
    mail( "YOUR@EMAIL.com", "GTM Contact",
    "Name: $namenEmail: $emailnSubject: $subjectnDate: $datenIp of sender: $REMOTE_ADDRnMessage $messagen",

    "From: ” );
    ?>

    I wanted to receive several fields, like the subject line date etc but also the IP of the sender

    • http://www.dimios.weebly.com dimios

      ok, I am confused now! :)
      First of all “geia sou apo” Uk Stephen.

      Here is what I use:

      // Get Data
      $name = strip_tags($_POST['name']);
      $email = strip_tags($_POST['email']);
      $url = strip_tags($_POST['url']);
      $message = strip_tags($_POST['message']);

      // Send Message
      mail( “name@gmail.com”,”Contact Form Submission”,
      “Name: $namenEmail: $emailnWebsite: $urlnMessage: $messagen”,
      “From: Forms ” );
      ?>

      As you can see I want to use only the basic (name,email,website,message) the only I missing from the GET DATA section is the last line – echo $REMOTE_ADDR; – which I have no idea what it does, can u tell me? Then in the other section we are very close but you have “GTM Contact” where I have “Contact Form Submission” and to be honest I have also no idea what both do and what the difference. Also what is the last line “From: “, I should have my email again? and how do u get the IP, which line gives you that?
      The way I am using it explains why it does not work for me?

      cheers

  • http://www.dimios.weebly.com dimios

    any help?

  • Sam

    test

  • http://www.blandydoes.co.uk Richard Bland

    You know what this really is a great contact form tutorial, I have bookmarked and shared…

  • daniel bueno gonzalez

    Muy interesante desde mexico…

  • http://twitter.com/j_mes James Loveridge

    Landon,

    First things first. What a great contact form tutorial that you have written here. I’m sure a lot of people really appreciate this if they’re a beginner in php or jQuery contact forms.

    Secondly, could you please shed some light on the append function? I am having problems with getting the gratitude text to show up when the contact form has been submitted, when integrating it into my own website which has other jQuery applications running at the same time.

    I look forward to hearing back from you.

  • http://www.facebook.com/profile.php?id=1060091322 Patrick Chuprina

    Hi,

    I’m having  issue with your contact form on one site, but on no others and I don’t understand why.  At first it was one or two a day, this morning I woke up with 10!

    On the one site I keep receiving blank form replies!  I’ve double checked the code and it seems to be okay.  I have no idea what i could be missing, or if i missed coded something, or any steps I may need to rectify the situation.

    Any help would be appreciated.

    http://chuprinacreative.com/contact.php

    PChuprina

    • Anonymous

      Patrick,

      In my example I have included some basic PHP form processing in the
      process.php file, but it doesn’t provide server-side validation. If you
      implement some server-side validation this will solve your issue.

  • http://www.facebook.com/profile.php?id=1060091322 Patrick Chuprina

    Thanks.  How would you recommend I go about doing this?

  • http://www.facebook.com/profile.php?id=1060091322 Patrick Chuprina

    How would you recommend I do this.

  • David Karlins

    Helpful – and interesting. But…. you can’t convert a PHP file to an app with PhoneGap, can you?

  • Alex

    Hey, 

    This tutorial is pretty fab, i have it all embedded, loaded to my fasthosts server and even sending the emails, but when i open the emails, it comes up with an error. Fasthosts recommend the code  below, but it doesnt work, even when i adapt it with your process.php file.

    Any tips would be greatfully appreciated.

    $email_from = “email@yourdomain.com”; ini_set(“sendmail_from”, “$email_from”);You need to add a fifth “-f” parameter to the sendmail function. This will set the name of the from address. mail($email_to, $email_subject, $email_message, $headers, ‘-f’.$email_from);

  • Aganator

    How do you change the color around the active text box? I am wanting it to match the color scheme of my site.

    • Anonymous

      By changing the color of the border on input[type="text"]:active

  • Sylwia

    Thanks for this form, really helpful. I have question: how to avoid of clicking send button more than once when I’m showing the msg sending above the form not on a new page.

  • http://twitter.com/TheVictoriaPod Joseph Wachira

    Awesome, Thanks

  • Unbenannt

    Hello!

    Great tutorial, thanks! But I have a question… in Germany we use umlauts like ä, ü, …. How can I add these to the contact form? So if the person uses words with them, I can see it in the mail instead of “À” for example.

  • Pingback: 20 Awesome HTML5 Web Forms Tutorials

  • http://twitter.com/calliope8muse Calliope Georgousi

    hey Landonmiller a praise and a query

    Praise: what a nice website, greatly detailed and simple tutorial easy to follow and alter

    Query: 
    excuse my ignorance but where is process.php ? 
    why locally I get a message that process cannot be found? 
    should I expect it working once the website is uploaded maybe? 
    what if I wanted to link your list and script with wufoo? 
    I tried replacing the wufoo action link to action=” ” on the form you have empty but I still get an error on the post key on wufoo 

  • Tuck Bloor

    Thank you for this

  • http://www.webdesignsydney.org Pakasnica

    Mate,
    Validation is not good, what about Australian emails .com.au ?
    Ned

  • http://www.phoechan.com phoechan

    Thanks  for your share :)

  • Pingback: 20 CSS3 and HTML5 Web Forms Tutorials

  • chip

    hi
    great form thanks.

    i want to add checkboxes – which i’ve managed on the html side – but not sure what to add in the process.php file

    help is appreciated!

  • Cka1ber

    Landon,

    Beautiful post. One of the more simplistic posts I have read regarding HTML5. Thank you my friend!

  • http://twitter.com/presos1 Phil Sing the Kingg

    How do I load this in HTML? Where do I put the PHP? I am new to coding.

  • Shake

    How do I do 2 things
    1) send this to an email address (dont i have to add something to form action)
    2) restrict people to enter a value

    • Anonymous

      You can edit the process.php file to adjust the email address.

  • Nathan

    Does index.php have to be in .php or can it be .html?

    • Anonymous

      It can be .html, but you’ll still need to reference process.php in the submitHandler of the validation.

  • Nator

    My website host doesn’t allow the mail() due to abuse concerns. Is there any fallback on this (alternative)?

    • Anonymous

      You could always try using a library like PHPMailer or an app like Postmark. Personally, I’m a big fan of Postmark.

  • http://profile.yahoo.com/RATMMDTJCQE6WWZRCMXX46UJWM MP3 M

    Clera & Nice! One question, when i get message from visitor, some characters are strange. Can you help me, where and what to change for East European UTF-8?

  • Pioneer_marketing

    Works Really Well even customized to CSS. Testing seems to submit as the screen refreshes with a blank form. Checking receipt of email now. So far so good! Thanks SO Much for this helpful form!

    • Anonymous

      You’re welcome!

  • Gust

    not working in IE8 with latest jquery

  • stone4heart

    this nice and easy form, i found that TEL field does not have validation and if i add required class in HTMLcode then is says ‘this field is required’ but it also accepts characters easily i was assuming it will only accept numeric.

  • Matt

    Sorry this may seem like a dumb question, but how will this submit the form? Do I need an existing process.php? Alot of the tutorials I found only tell you how to structure and style the HTML and CSS, but how do I make the actual form work?

    • Anonymous

      I have included one with the files so that it works out of the box, but you may want to add validation. This tutorial was written awhile back so it may be time to revisit and update the post.

  • ddddd

    asfdfa

  • No

    You can request the process.php directly: yourdomain.com/process.php to send A LOT of emails.

    Security fail!
    What about PHP Header Injection?

    • Anonymous

      The process.php file is a simple example for this tutorial to illustrate how it works, but you can edit it to your liking. You’ll notice that there isn’t any server side validation, which I would also recommend.

  • Rweideman

    Landon, great form and thanks… I am trying to send the form to a Gmail account. Are there settings in Gmail i need to configure to make it work? SMTP. Thanks

  • Olivia

    Thanks for not styling with tables.

  • Kleo

    It works great. Please continue in this way. I will visit you again. Thanks

  • http://www.facebook.com/5thcoffey Jonathan Coffey

    anyone have an idea how to remove the orange color in the input fields when on focus? I need to replace this coloring

  • Tom Suurling

    Hi Landon,

    I would like to use this form. It looks nice and i would like to add this form into a html page. But when i copy the code from the index.php to my html file it doesn’t work.
    What do i have to do to make this work in a html file?

    Thanx,

    Tom

  • korin

    really great… I’ve been looking for quite a long time for something easy to customize, understand and implement. Thank you!

  • Pingback: Week 01/04/2013 – 07/04/2013 | Mathew Teague CS39930

  • maureen

    Hi, I tried your codes but I am not receiving the email. Am I doing something wrong? Oh I transferred the codes from you index.php to my html file.

    I still get the ‘thanks your request has been sent’ but i did not receive the email.

    Help?

  • Bongo

    I love this thing….thanks a mill dude

  • Phillip

    Why does the contact form have a horizontal format? Isn’t that a new style? Also, when I run it in Web developer 2010, it complains that jQuery is Undefined and it rejects the Placeholder elements.

  • Doug Hoff

    I’m pretty sure the word ‘robust’ exists solely for programmers. Seriously, everything is always so “robust” when it comes to programming. Have you ever heard anyone else use that term for anything else? REALLY SICK OF IT!!!!!!!!!!

  • Malvin

    After I submit, it does not send an email to my email address