This is a nice example of a form. They used the contact us page primarily as a place for the contact form, but as you can see they also provided some context (the paragraph at the top) as well as some other ways to contact them via phone or email. Since not everyone likes to fill in web forms, that is a smart solution.
The HTML for this page is well written, clearly considering both older browsers (using
DIV elements and conditional comments) as well as modern browsers that can handle the more advanced features. The page, like all the pages on this site, uses HTML5 sectioning elements to divide up the page. They don’t have headlines in every section, so it doesn’t outline well, but otherwise they used the elements well.
Some Things I Love
I love that this form uses the new
INPUT element types. This means that the form will be more functional on devices like iPhones, where it’s hard to type. Also, you should check out how they lay out the form. First the field names are above each field, making the entire form line up well. Then they used the
FIELDSET element to divide the two columns in the form and so they can use CSS float to create the columns. This is well thought out and implemented.
Some Things I Would Adjust
This design is nice and clean and I like it a lot, but there are a few things I found slightly irksome. For example, the mini form. This seems a bit extraneous on a contact form page like this one. Plus that
ASIDE includes a duplicate navigation link to the page you are on, which is a little confusing. I wish that were removed from the page. Also, there are no images on this page, which makes the page less interesting. Seeing actual photos of Julie and Becky might make the page more visually appealing.
I also wonder why they didn’t indicate required fields. Are none of them required? This is a feature of HTML5 forms that can be really convenient and useful for getting forms that have the right information filled out. They do use the
required attribute in the form fields, but there is nothing on the design to indicate which fields are required. Plus, they don’t use any regular expressions to define how email addresses should look or how phone numbers should be typed in. They might not have a problem with those fields, but the “Quick Contact” form has an example phone number in the placeholder text, so why doesn’t the main contact form?
This is a great example of an HTML5 form. And if you test it in older browsers, you’ll see that even browsers that don’t do HTML5 can handle the new
INPUT types, so there is no downside to using those at all. I hope you are inspired to create a great contact form on your site with HTML5 now too.
Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.