Web forms that don’t suck

Responsive, accessible, mobile-first, and progressively enhanced forms

Web forms can be tricky business. Luckily there are some really smart guys out there keen to solve the challenges associated with doing web forms well. Making forms easy to fill out on touch device, making them easy to navigate for people using assistive devices, making them easy to visually scan, and making the look clean on any device is tall order to fill. Wish I could say I had the brains to figure this all out on my own but that just wouldn’t be true.

A little while back I ran across a great presentation by Aaron Gustafson on accessible, mobile-friendly forms entitled Falling in Love With Forms. He provided a lot of great information on how make forms not suck. Here is a series of form elements inspired by this presentation.

See the Pen Accessible, responsive, mobile-first forms by Mike Donahue (@mdonahue37) on CodePen.

More recently I came across an article on uxmovement.com entitled Why Infield Top Aligned Form Labels are Quickest to Scan that looked at the usability different form styles. They found that including in-field labels (not in the input element) top, left aligned were faster to scan and reduced visual noise. This codepen is based on those findings.

See the Pen More responsive, accessible, mobile first forms by Mike Donahue (@mdonahue37) on CodePen.

This is proof of concept and I’ve no doubt there are several other ways to handle this. There are few kinks I”ve yet to smooth out, if you see them and have some advice let me know. What are your thoughts or best practices on web forms in todays multi-device reality?

Published by

Mike Donahue

Just a guy that's passionate about creating useful, usable and desirable experiences for all humans. I love nature and wildlife photography, it's my source of artistic expression and inner peace. I live and play in South Florida with my wife Nikki and our girls (dogs) Layla and Cassidy.

Leave a Reply

Your email address will not be published. Required fields are marked *