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.

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
35. Multiple Columns
37. # of Fields
39. Pagination
43. Field Size
45. Infrastructure Speed Navigation Speed Cognitive Speed Input Speed Validation Speed Speed
46. State of the Union
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/
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
67. Case Study
68. wufoo.com
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
84. Payments
86. Theme Designer
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