Like all structural elements built into HTML, forms aren’t inherently beautiful. In fact, forms on their own are quite ugly and dull, which is exactly why it’s usually a good idea not to leave form styling up to the browser and OS. Sadly, this happens all the time.
“We're hunting for awesome startups”
Run an early-stage company? We're inviting 250 to exhibit at TNW Conference and pitch on stage!
Since the technical barriers are relatively low, we’re going to spend some time looking at a few of the best forms on the Web (hold on! don’t run away!). Forms are an essential part of many websites; they’re the difference between a new user and a bounce. This is why it’s so important to make forms effortless and easy on the eyes. What is traditionally a boring element in Web design can be so much more. Here’s how it’s done:
There’s something nice about the way these two fields aren’t separated. This layout likely wouldn’t work well for the average person, but since Designspiration was created for designers we can’t cry foul.
NOTCOT has long blended submissions into the page with the rest of its content. Though the POST IT! link should probably say “Preview It” (since that’s what it does), I’m still a fan.
This form is so simple that it’s hard to say anything about it at all. Here it goes: It’s as classy as it is clear. That’s all I’ve got.
This form is much more worry-free than the idea of banking with a startup. It’s both organic and personal, while staying responsive and clear.
Wunderlist’s signup/login form is almost looks too good to resist. Sometimes aesthetics really can do all the talking.
6. Minute Race
The element of the rush changes everything here. Minute Race only allows 60 seconds for users to finish its form.
7. Drew Matthews
Equal parts responsive, usable and adorable, this form’s colorful design and reactive input makes it impressive and entertaining.
Designing forms is all about finding the balance between variation and expectation. If you can make something that’s completely easy to use, while throwing in the element of surprise to catch a user off guard (and make your site feel special), you have a winner. That’s the only way it’s done.
Did we miss your favorite? Feel free to let us know in the comments below! There’s much more inspiration to be seen, and you should check out this massive pool of contact forms on Usabilla if you’re hungry for more.
Check out our full Design and Dev channel for more inspiration.