Download Type = "Email" - Web Site Optimizers

HTML5 Forms
Make Life Easy For Your Mobile Users
January 23, 2014
Tom Bowen
President
Web Site Optimizers
@WSOMarketing
www.websiteoptimizers.com
1
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
Mobile Keyboards – Which Experience Would You Prefer?
OR
Slide 2
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
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
<input type="email" name="custemail" />
Slide 3
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
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
<input type="url" name="website" />
Slide 4
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
Type = "number"
What It Does
Defaults keypad to the Numeric keypad.
Keyboard Typically Includes:
•
•
Numbers 0 through 9
Commonly used punctuation keys
<input type="number" name="qty" />
Or
<input type="number" name="qty"
min="12" max="144" step="12"
value="24" />
Slide 5
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
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 (#)
<input type="tel" name="phone" />
Remember!
Only limits inputs on (some) smartphones,
and users can still paste other text.
Slide 6
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
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.
<input name="username" autofocus />
Slide 7
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
Guard Against User Mistakes With Easy Form Validation
Form Validation
HTML5 browsers validate for required fields.
<input name="username" required />
HTML5 browsers validate new input types
for format.
Use novalidate attribute to stop a field, or
the entire form from validating by the
browser.
<input type="email" name="mail"
novalidate />
<form action="formsub.php"
method="post" novalidate/>
Slide 8
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing
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
.
Slide 9
© 2004 – 2014 Web Site Optimizers, LLC | @WSOMarketing