SXSW 2011: Be a Lead Generation Superstar with HTML5 Forms

Chris Coyier
Lead Hucklebucker
Wufoo (@wufoo)

Kevin Hale
Infinity Box Inc

Organizations involved with HTML5

http://w3c.com
http://whatwg.org

Timeline

  • 1990-1995 HTML
  • 1997 HTML3.2
  • 1998 HTML4
  • 2000 XHTML 1.0
  • 2003 XForms: client side validation, but requires a plugin
  • 2004 WHATWG Forms: can’t we just fix HTML? YES!

What is WHATWG?

  • Opera approached W3C with new specifications to work  with current means of HTML. However, W3C basically said no. So, Opera got Safari, Opera, and Firefox involved and formed WHATWG. And then once they had all them, W3C changed their minds and adopted this idea too.

WHATWG Core Principles

  • Backwards Compatible
  • Specifications and Implementations Need to Match
  • More Detailed Specifications

Best Practices for Lead Generation

A lead is information you collect from a user that allows you to take your interaction with them to the next level. Typical Shareware games do 0.5% conversion rate. Flickr is estimated at 5-10%. AdultFriendFinder does 10-22% conversion rate. Amazon.com does a 17.2% conversation rate. And TurboTax online does a 70% online conversion rate.

Steps to Increase your Conversion Rate

  • Labels: the closer the label is to the field, the faster they can process the information.
  • Columns: single column fields do better than double.
  • Number of Fields
  • Pagination: Make sure you establish the progress in which they’re through the form. The moment you don’t they’ll stop.

Types of Speed

  • Infrastructure Speed: how long it takes for the form/page to load from the server to the user.
  • Navigation Speed: how many fields are there? How long will it take to physically go through the form.
  • Cognitive Speed: how much text is there for them to read?
  • Input Speed: are answers pre-selected, or are they not?
  • Validation Speed: how long does it take the user to understand the error?

HTML Composition

  • Semantics
  • Offline Storage
  • Device Access
  • Connectivity
  • Multimedia
  • 3D Graphics
  • Performance
  • CSS3
  • …but what about Forms?

HTML Bad News

  • Very inconsistent browser support even among leading browsers
  • It’s buggy
  • the UI for much of it is ugly
  • The UX for much of it is iffy
  • You’re going to need to write JavaScript fallbacks

Good News

  • You can still use HTML5 form features to make your forms better
  • Some features you can use without thinking twice (eg. type=tel)
  • There are JavaScript fallbacks

Demos

See References below; especially HTML5 Forms Readiness Chart.

So What’s It Missing We’d Like?

  • Implement More of the Spec. Please.
  • Ability to Style Errors and Widgets
  • IE9… Where are you?
  • Drawing Field
  • Location Field
  • WYSIWYG Textarea
  • Access to Camera and Microphones
  • JSON and/or XML as Encoding Type

References

  • HTML5 Forms Readiness Chart
  • Modernizr: To be backwards compatible select Input Type, Input Attributes, and both options under Other.
  • Yepnope.js: If the feature isn’t there, you can load backwards compatible scripts. This is AWESOME!
  • TeleJect: Allows you to get an actual address of a LAT/LONG from the geoLocation data through Google Maps API.

Leave a Reply