5 Brilliant Web Form Designs You Should Know About

5 Brilliant Web Form Designs You Should Know About

Web forms are everywhere…but people hate them, I’ve got a friend who works in the tech support of a hosting company, he says that every day their department receives from 10 to 15 emails about errors in web forms. According to tech support web forms are the nastiest things on any website. They break for no reason, and when they get fixed they break again.

If you’re designing web sites, it’s likely forms will be there, whether it is a simple feedback form or a supercharged web application. In this article we’ve united 5 tips for designers/developers and a dead simple web form lifehack for users.

5 Brilliant Web Form Designs You Should Know About

5 Brilliant Web Form Designs You Should Know About

Imagine an average user sitting on his couch with a laptop on his knees. In his left hand he has a bottle of Coke, in his right hand he holds the TV remote (this is how his work place may look.) Today we live in a multiscreen world and we can’t get rid of it.

Workplace

So, this user surfs the web, reads some blog posts, but then he comes across a website he really likes. User hits the button Sign Up and that makes him curse everyone in the world. He sees the registration form that looks like a brick wall with dozens of lines and each needs to be filled.

Web Form Details

Every web user is lazy, especially after 7pm, they have no wish at all to write their names or invent new nicknames. Luckily for everyone there is an option that allows associating new accounts with Twitter or Facebook, because everyone has these accounts. All that remains is to press the button Allow. If you don’t have such feature on your website please consider applying it.

When creating web forms keep in mind the following phrase: “Don’t make me think!” (Every time we talk about web usability we can’t help regarding Steve Krug’s “Don’t Make Me Think” approach.) it’s a subconscious desire of every user. Line filling should be pretty intuitive to make this work.

Keep everything simple, by avoiding unnecessary text inputs.

Keep the user focused on the overall goal, he needs to understand easily what needs to be done to complete the form without getting errors. There is one thing that is always omitted, considered to be unnecessary – it’s a tooltip.

Not all people have such intelligence as you do, that’s why you should write into the field Name the word “name” but not “123”.

But how do you make the ideal form?

  • Try to avoid optional fields;
  • If most fields are required: indicate optional fields;
  • If most fields are optional: indicate required fields;
  • Text is best, but * often works for required fields;
  • Associate indicators with labels

Mad Libs

Once I came across a website where the registration form was a real pleasure to complete, and it’s called Mad Libs Forms. Mad Libs is a phrasal template word game where one player prompts another for a list of words to substitute for blanks in a story, usually with funny results. The principle of these forms is that there is a small story with blanks where your info needs to filled in, but in a narrative form, no matter what kind of form it is, registration, feedback, login or a subscription/unsubscription. But where did this thing come from?

Jeremy Keith was the designer who created the Mad Lib form, he made it for his audio sharing site Huffduffer in 2008. He wrote a line on his blog about this form: “I share Luke W.’s rallying cry that “Sign up forms must die!” While I wasn’t able to kill off the signup form on Huffduffer entirely, I was at least able to make it human-friendly.”

That’s how Jeremy Keith applied the Mad Lib concept to the website form presentation:

Huffduffer
Huffduffer

Here are some more examples:

Crowd Favorite
Crowd Favorite

Rocket Genius
Rocket Genius

Open Chime
Open Chime

Angels Place
Angels Place

Jamie Delaine Blog
Jamie Delaine Blog

Dave Shilling
Dave Shilling

Do they really work?

These forms are at variance to the classical UX best practices. Mad Lib forms offer greater conversion rates compared to most generally accepted forms. Some website owners who have really popular web resources simply out of curiosity, changed their website forms to Mad Libs. It turned out that conversion rates increased 20-25%.

5 Web Form Concepts to Follow

Add some Lines
Web forms are pretty boring, but it does not mean they should make people happy, their primary target is to be simple and directional. So lets keep in mind the word direction.

Input lines have sharp and straight lines so why not frame them with some curvy lines or accent them and guide the user through the form with some implied or psychic lines. Contour lines are really effective and they are usually used to to guide the user from one location to the next. Open any comic book and you will see how they work. As for the visual part it’s important to guide the user from one element to the other effectively.

Lock ‘N Load
Lock 'N Load

Gonzo Designs
Gonzo Design

Spice Your Forms with Color
Sometimes it’s okay to go color crazy on a web design, but not too crazy. Add some flavor to your super boring form by adding some color. Think outside the “box”; change the input background color, add some borders or some highlighting — it really doesn’t take that much color to spice up a simple form.

Pixelounge
Pixelounge

Soap Box
Soap Box

Shape Them Up
Be more creative and bring in some more shapes into the overall form design. Frame your form with other shapes, whether you simply add some curvature by using circles and ovals or if you implement some more natural, unpredictable shapes.

Framing your sharp rectangular input boxes with softer, differing shapes is also another great and easy way to create contrast and focus on your form.

Il Frutteto
Il Frutteto

Mojo Themes
Mojo Themes

Add Some Textures
Texture is an absolutely awesome way to add some visual interest to almost anything. A cool texture on a button can grab the user’s eye making them feel like they need to push it.

Lionways
Lionways

Guillaume Pacheco
Guillaume Pacheco

Use Illustrations
Some designers make sure visitors actually fill in the form using some attractive characters and illustrations serving the purpose of making users feel more comfortable within the form.

Christian Sparrow
Christian Sparrow

Catalyst Studios
Catalyst Studios

Web Form Builders

If you have no clue how to make a good web form you can make use of the following web form builders, there you will find examples of some cool designs that you may find appropriate for your website. Here they come:

1. Google Docs
Google Docs

Google Docs is the simplest option for form building. All you need to do is to choose one of the seven formats, they include a simple text option as well as scales and multiple choice. Google will not only record all responses, but will tabulate everything into helpful and visual analytics for each question.

2. Wufoo
Wufoo

Wufoo’s interface is a drag-and-drop system that allows total customization and integration meaning your form will be tailored to your aesthetic needs.

3. FormSite
FormSite

With this application you can create a fully-customized form with more than 40 data fields. There are plenty of premium features available in the free version, including QR code integration, social sharing of form information and storage space to host attached files on forms. You are within a few simple clicks from a great looking form that will serve any customer’s needs.

4. FormAssembly
FormAssembly

FormAssembly relies on a fully customizable free-form layout system — that gives control not only on the form’s looks, but on the content also.

5. Gravity Forms
Gravity Forms

Gravity Forms has been created specifically for WordPress users. It embeds itself into the backend of the CMS and automatically blends with the design of the website without any extra tinkering.

Tip for Users: How to Fill Any Form With a Single Click

This is how your web form lifebuoy looks (we’ll take the Chrome Browser as an example, since today it’s considered to be the most popular). All you need is to fill these blanks in your Chrome browser and later on there will be no need to type this info in over and over again.

Chrome Autofill 1

If needed, you can enter the same info in several languages by clicking the Add new street address button.

Chrome Autofill 2

To make this work don’t forget to tick the following lines in the Settings of your Google Chrome.

Chrome Autofill 3

This works as follows: just type in the first letter of your name (as a rule this line is first in every form) and your info will be inserted automatically.

Conclusion

When creating forms keep in mind 3 things:

  • Think why and when users fill out your forms;
  • Highlight the most important things, what catches the eye creates the highest resistance;
  • Understand the environment, and create your forms in accordance with its microcosm.

Remember that the most important thing for your users – is quick and easy achievement of their goals (no matter what they do).

For any requests and suggestions use the comments section at the bottom.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.