1. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing 1 HTML5 Forms Make Life Easy For Your Mobile Users Tom Bowen President Web Site Optimizers @WSOMarketing www.websiteoptimizers.com January 23, 2014

2. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 2 Mobile Keyboards – Which Experience Would You Prefer? OR

3. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 3 Type = "Email" What It Does Defaults a mobile keyboard to one with keys commonly used in an email. Keyboard Typically Includes: "At" sign (@) Period (.) button Some layouts have a ".com" button

4. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 4 Type = "URL" What It Does Similar to email type, displays a keyboard designed for easy input of web addresses. Keyboard Typically Includes: Slash (/) button “.com” button Period (.) button

5. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 5 Type = "number" What It Does Defaults keypad to the Numeric keypad. Keyboard Typically Includes: Numbers 0 through 9 Commonly used punctuation keys Or

6. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 6 Type = "tel" What It Does Restricts mobile users to numbers only. Use with caution. Only for inputs restricted to positive integers (quantities, unformatted SSN, etc.) Keyboard Typically Includes: Numbers 0 through 9 Plus (+), asterisk (*), and pound (#) Remember! Only limits inputs on (some) smartphones, and users can still paste other text.

7. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 7 Setting Focus On Forms Automatically Autofocus Attribute Add to field you want user to begin with when filling out the form. Very helpful for users who use tab key to move between fields of a form. Sets focus immediately, no waiting for page to load. No need for JavaScript to set focus.

8. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 8 Guard Against User Mistakes With Easy Form Validation Form Validation HTML5 browsers validate for required fields. HTML5 browsers validate new input types for format. Use novalidate attribute to stop a field, or the entire form from validating by the browser.

9. © 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing Slide 9 Implement These Changes Today! Upgrading your forms is a no-brainer! Positive Experience = Happy Customers = More Conversions These changes are EASY! Low risk – backward compatible to non-HTML5 browsers Simple beginning step toward focusing on your mobile users.