The best forms are the ones with the fewest inputs. This Slide will cover designing efficient forms, validating them effectively, and keeping the user informed along the way.

1. Forms
What are the
best practices?
How can you
improve today?!

2. How do
you nail
Forms?
Image Credit: https://www.flickr.
com/photos/russell_darnell/5547532092

3. Every page in
commerce is
trying to
convert.
+Ido Green
@greenido
ido-green.appspot.com

4. Forms
in
General

5. How
Design efficient
form
eCommerce
Autofill rocks!
Next
Gold Elements!

6. How?!

7. Take
advantage of
the device

8. ● Use existing data to
pre-populate fields
● Ensure forms are
auto-fillable by
browsers

9. ● Show users how far
along they are
● Don’t break the
“back” button

10. Provide visual
calendars when
selecting dates

11. How to
choose
the best
input
type?

12. HTML5 input types
url emailTel
More types: https://goo.gl/Hg7HOO

13. Offer suggestions during input with datalist
Live example: https://goo.gl/RdwFhd
<label for="frmFavChocolate">Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmChocolate"
list="chocType">
<datalist id="chocType">
<option value="white">
<option value="milk">
<option value="dark">
</datalist>
(!) The datalist values are provided as suggestions. Users are not restricted to the suggestions provided.

14. HTML5 input types
url emailTel
More types: https://goo.gl/Hg7HOO

15. Optimize text
entry
Let the
browser help
you on-board
users

16. Dropdowns Should be the UI of Last Resort
Luke Wroblewski - http://goo.gl/7ZmQ4J

17. Better password form fields
More: https://aerotwist.com/blog/better-password-form-fields/

18. Label and Name Inputs
More: https://goo.gl/TqLAh2
● Use labels on form
inputs, and make them
visible.
● Use placeholders to
provide guidance.
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address"
required id="frmAddressS"
placeholder="123 Any Street"
autocomplete="shipping street-address">

19. Label and Name Inputs
More: https://goo.gl/TqLAh2
Leverage the browser’s ability to
auto-complete the form
a. Use established name's for
elements
b. Include the
autocomplete attribute.

20. Provide real-time validation
Leverage the browser's built-in validation attributes like:
● pattern - <input type="text" pattern="^d{5,6}(?:[-s]d{4})?$" ...>
● required - <input type="text" required pattern= "^...$" ...>
● min / max - <input type="number" min="1" max="13" step="0.5" ...>
More: https://goo.gl/f8N29E

21. Provide real-time validation
● Use JavaScript and the
Constraints Validation API
for complex validation.
● manage focus when
validation fails.
● Autocorrect when you can!

22. Provide real-time validation
● Show validation errors in
real time: bit.ly/form-
validation
● If the user tries to submit
an invalid form, show all
fields they need to fix.

23. eCommerce

24. Google Confidential and Proprietary
86%
spent in apps
14%
spent in the
browser
Smartphone users spend most of their time in apps
Google Confidential and ProprietarySource: Flurry 2014

26. Google Confidential and Proprietary
94%
of users look to
take commercial
action via the
mobile web
Reach more users looking to spend money
Source: Google/Ipsos 2014 Google Confidential and Proprietary

27. use
autocomplete
types
30% increase in form fill speed
when using Autofill
(*Chrome usage data)
Optimize for
Autofill
More: https://goo.gl/CGzH9g

28. 4x Increase
in
conversion
66-93% of
Mobile
Commerce
Mobile
Optimized
sites
*Flurry & Business Insider *Forbes - goo.gl/pIbSlz
Forms are the ‘gatekeeper’ for anything (=signup, payment, information etc’)

29. The Future?!
Web
Components

30. Web Components - Save you leg work!
● Custom elements can bake in best practices, cutting down
on boilerplate and missed opportunities
● Polymer has built a dedicated set of ECommerce
elements, a.k.a. “Gold Elements” which you can use in
any application
● Live Example

31. github.com/notwaldorf/polymer-gold-elements-demo

32. <gold-cc-input name=”cc”></gold-cc-input>
<label for="frmCCNum">Card Number</label>
<input name="cc" id="frmCCNum"
autocomplete="cc-number">
Functionally
equivalent

33. <gold-cc-input name=”cc” error-message=”Try again” auto-validate></gold-cc-input>
● Built-in support for auto-fill
● Auto-validation attributes
● Display card types
● Custom error messages

34. Resources

35. 25 Principles
goo.gl/5MbvDK

36. Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/

37. Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank
you!