Forms are everywhere. They’re how we humans share information with computers and are baked into the essence of web products. There’s the form you type in to search for something on Google, the form where you type your tweets on Twitter, the form where you enter your credit card information to buy something on Amazon.
BJ Fogg’s Behavior Model applies to forms - you need to want the offered reward enough to trade personal information or ideas plus the time and effort needed to fill out and submit a form. If the form is hard to complete (poor UX, too many fields…) and your motivation is low (the reward isn’t enticing enough), you will abandon it. But, a form’s design can encourage you to use it. The best designed forms make you want to complete them.
I recreationally went through 50 pages of search results on Dribbble for “forms” and made a bucket of my favorite modern text input field design. Below are examples of patterns that emerged. You can see the sources here on Dribbble.
Bordered on Same-Color Background
I’m a fan of minimalism. The simplest design for a text field is a simple bordered input field where the input background matches the form background. There’s plenty of room for character and vibe using color, border thickness, icons, labels, and placeholder text.
Light Gray on White
Another minimalist approach is to forego borders (or reserve them for focus states) and use a light gray field background with just enough contrast to stand out on a white form background.
White on Darker Background
A white text field set on a darker background feels safe and traditional. A modern spin is to skip the border, giving a flat look. You get bonus hipster points if you float it atop a trendy, photographic background.
Dark on Dark
One pattern that can still look exciting and very well-suited for the mobile world is a dark form background color with text field backgrounds of the same shade, but lighter or darker to create enough contrast to be discernible as an input field. There’s something mysterious about it, yet done well, it can be perfectly usable.
I’m not generally a fan of skeuomorphism, but I have a soft spot for forms that mimic real world objects. Fill-in-the-blank-style inputs can make you feel like a kid filling out Mad Libs, like you’re writing a physical letter, or like you’re filling out a name tag. There’s something charming about the experience and the usability is excellent because it leverages known behaviors taught to us as early as kindergarten.
Taking the simple bordered text field even further is the single bottom border look. Having no contrasting background color or border creates two UX issues with this pattern: they might not be recognized as form fields and labels are either difficult to position well or require using placeholders for labels, which will disappear once any text is typed. For very well-known forms (login, sign up…), this pattern can work and be interesting.
The last pattern I was intrigued by, but am not yet sold on, is one I’m not sure how to classify. In this pattern, the form fields have no margins between them, forming a grid layout similar to those you see on paper DMV or rental forms. They are more compact than other form designs, so they will work best in modals or on phones, but they make labels awkward and sacrifice usability for information density.See larger versions of the above forms here on Dribbble.