Forms can be beautiful too

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.

The good news is, it’s not hard at all for designers, developers and dabblers to get a pretty and usable form up and running with little effort (HTML5Rocks and NetTuts both provide great guides), some CSS, and sometimes a bit of JavaScript. Forms can and should be beautiful, this way you’ll know you’re providing the right experience for everyone.

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:

1. Designspiration

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.

➤ Designspiration

.

2. NOTCOT

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.

➤ NOTCOT

.

3. Tumblr

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.

➤ Tumblr

.

4. Simple

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.

➤ Simple

.

5. Wunderlist

Wunderlist’s signup/login form is almost looks too good to resist. Sometimes aesthetics really can do all the talking.

➤ Wunderlist

.

6. Minute Race

The element of the rush changes everything here. Minute Race only allows 60 seconds for users to finish its form.

➤ Minute Race

.

7. Drew Matthews

Equal parts responsive, usable and adorable, this form’s colorful design and reactive input makes it impressive and entertaining.

➤ Drew Matthews

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.