Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Be a Lead Generation Superstar with HTML5 Forms

1519587b1a0febb658c36c94f6272b0d?s=47 Kevin Hale
December 05, 2011

How to Be a Lead Generation Superstar with HTML5 Forms

Some of the most exciting enhancements in HTML5 are centered around the specifications made to improve online forms on the web. These new features have been "coming" for a long time now and we're here to share how you can use these new capabilities to improve your conversion rates and increase your bottom line. We'll look at and share some aggregate data on our end in addition to updating you on the current research and best practices that can come from using these new technologies.

1519587b1a0febb658c36c94f6272b0d?s=128

Kevin Hale

December 05, 2011
Tweet

More Decks by Kevin Hale

Other Decks in Programming

Transcript

  1. HOW TO BE A HTML5 FORMS with LEAD GENERATION SUPERSTAR

  2. Kevin Hale @ilikevests Chris Coyier @chriscoyier Wufoo @wufoo #html5forms

  3. wufoo.com

  4. css-tricks.com

  5. This Workshop

  6. Technology ➙ $$$

  7. Drop Some Knowledge Talk the Talk Walk the Walk Well

    Rehearsed Formulate an Opinion Contribute to Discussion Our Goals For You
  8. A Little History Best Practices State of the Union Conversion

    Excercises Case Study in Conversion Live Form Enhancement Wufoo Wishlist Expect This!
  9. A Little History

  10. Before we go back...

  11. whatwg.org w3c.com

  12. 1990-1995 HTML 1997 HTML3.2 1998 HTML4 2000 XHTML 1.0 2003

    XForms 2004 WHATWG Forms
  13. Backwards Compatible Specifications & Implementations Need to Match More Detailed

    Specifications WHATWG Core Prinicples
  14. 1990-1995 HTML 1997 HTML3.2 1998 HTML4 2000 XHTML Started 2003

    XForms 2004 WHATWG Forms 2006 W3c Change Mind 2007 WHATWG & W3c
  15. Best Practices for Lead Generation

  16. A lead is information you collect from a user that

    allows you to take your interaction with them to the next level.
  17. Shareware 0.5%

  18. Casual Download Games 2%

  19. Other Freemium Services Range from 1.5% to 5% Average Overall

    less than 3%
  20. Flickr 5-10%

  21. AdultFriendFinder 10% - 22%

  22. Habbo : 10% of players Club Penguin : 25% of

    uniques Runescape : 16.6% of uniques Puzzle Pirates : 22% of players
  23. Amazon.com 17.2%

  24. Office Depot 21.1%

  25. ProFlowers 27.3%

  26. Schwan’s 52.5%

  27. TurboTax Online 70%

  28. You can always do beter.

  29. 10% 100% 9% Website Visitors Signup to Trial Login to

    Account 1% 5% .5% Active Users Paying Users Staying Users
  30. Increase Awareness Reduce Friction Preserve Momentum

  31. Lots of Accurate Leads

  32. Field Labels

  33. None
  34. None
  35. Multiple Columns

  36. None
  37. # of Fields

  38. None
  39. Pagination

  40. None
  41. None
  42. None
  43. Field Size

  44. None
  45. Infrastructure Speed Navigation Speed Cognitive Speed Input Speed Validation Speed

    Speed
  46. State of the Union

  47. None
  48. None
  49. Semantics Offline Storage Device Access Connectivity Multimedia 3D Graphics Performance

    CSS3
  50. Semantics Offline Storage Device Access Connectivity Multimedia 3D Graphics Performance

    CSS3 NOT FORMS
  51. wufoo.com/html5/

  52. None
  53. None
  54. Conversion Exercises

  55. required autocomplete=off required type=tel (all six) type=email placeholder with hints

    as to what info is the most useful autocomplete=off
  56. <input type=submit value="Submit Taxes"> <input type=submit formnovalidate value="Save Progress"> pattern="[0-9]{2}-[0-9]{7}"

  57. form autocomplete=off type=url datalist!

  58. accept="image/*" meter search / datalist

  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. Case Study

  68. wufoo.com

  69. None
  70. None
  71. <form>

  72. Text Field

  73. Number Field

  74. Textarea

  75. Date Field

  76. Time Field

  77. Email Field

  78. Phone Field

  79. Website Field

  80. Price Field

  81. Pagination

  82. None
  83. None
  84. Payments

  85. None
  86. Theme Designer

  87. None
  88. Live Demo

  89. Wufoo’s Wishlist

  90. Implement More of the Spec. Please. Ability to Style Errors

    & Widgets IE9...Where are you? Drawing Field Location Field WYSIWYG Textarea Access to Cameras & Microphones JSON and/or XML as Encoding Type
  91. HOW TO BE A HTML5 FORMS with LEAD GENERATION SUPERSTAR