How to design engaging web forms (and inspiration to get you started)

Designers often avoid projects that involve designing web forms. There is a common misconception that such design is boring, unimaginative and tedious.

But in today’s world, input forms are an essential element of almost any website or application. It is the main platform where the visitor and website company interaction. And, in many cases, a form’s design determines the success or failure of the site.

Here enters the role of the web designer, who must make the form not only useful, readable and effective but also beautiful and creative!

So, what kind of techniques, components and styles should designers use when creating forms? I’m here to share. 🙂

Before the aesthetics

Would you be excited if someone handed you a form and said, “this is going to be confusing to fill out”? Probably not. As designers, we need to ensure the viewer enjoys every step of the form.

It’s not about listing out the form fields you need to design. It’s about reading the brief and finding out exactly the journey the viewer needs to take to accomplish the company’s goal.

Here are a few things to think about before jumping into the aesthetics.

Form components with HTML and CSS

The default look of HTML form elements as seen on Windows 7 in Firefox browser.

Keep in mind your design will be transformed into some kind of HTML/CSS and possibly Java Script. With HTML, there are a few available form components:

text input fields

larger text areas

radio buttons

check-boxes

lists

drop-downs: for selecting items

buttons: for submitting form or performing other actions

There are a few more components, like file upload and password fields, that are introduced in HTML 5. Some of these elements are not possible to style via CSS or are very limited in this aspect: in particular drop-downs, check-boxes, radio-buttons and file upload fields. Their look on a web page is determined by the operating system and browser.

Nonetheless, these types of elements don’t have to be limited, not with Javascript at least.

Form components with Javascript

HTML/CSS styled form elements are being replaced more and more with Javascript Widgets, which allow for creative freedom.

For example, if you want to create a visual methapor — an interactive graphic used to visualize and explain the purpose of the form more effectively — than Javascript makes it possible. We will look at an example of a visual metaphor in a moment.

Design follows usability

There is a well-founded opinion that using standard (default) formatting of form elements has many advantages, like better usability. Sticking to a default look makes form elements easily recognizable from users who have seen it a hundred times before.

Although, form elements with default look are easy to recognize, some designers opt out of using them. They might not be the best way to communicate the company’s message or might not keep stylistic consistency with other parts of the website.

When you start designing a website, focus on the client’s priorities and purpose. Ask yourself:

What is more important to the client: style or simplicity?

Would using nonsystem elements add or reduce usability in this particular case?

Create a form as if you’re having a conversation

Design forms as if they are people having an engaging conversation with the viewer. Create a friendly atmosphere with logical organization, content grouping and visual hierarchy of information.

Just like any good conversation, we should put more effort into asking thoughtful questions. It should also highlight calls to action which are usually done with submit buttons.

Different form types and styles

There are different types of web forms that come in many styles. You can get as creative as you’d like just as long as you keep the conversation engaging. Let’s check out a few examples.

1-page forms

Sometimes the task of a website — to inform, engage, register and collect information — can be done on just 1-page.

In the examples above, the company wanted to inform the vistor about their business and collect information from users in 1-step. The forms were pretty simple and straightforward but to keep them engaging I added a few touches by adding textures such as paper, tape and wood fencing background.

Step-by-step forms

If you need to ask quite a bit of information but don’t want to overwhelm the viewer, then step-by-step forms are the way to go. It allows the form to be broken up and simplified on each screen. And its important to clearly communicate how many steps the viewer has until the end.

In the example above, you’ll notice the whole design is built using just texture, typography and a monochromatic color scheme. This gives the form a little flare while still keeping it simple and to the point.

Homepage forms

Often times, a company will put their most important call to action on the front page. In this example, the company’s focus is having potential customers request a consulation. This example is simple, clean and attracts attention with the bold brown color contrasting with the background image.

Footer forms

Footers — the seemingly unimportant section — have recently been getting more attention. They are being turned into a story of their own and are a pretty good place to ask for e-mail.

Being able to spice up a complext footer is great! In this example, the whole footer incorporates call to actions as well as a contact form.

Contact Us forms

The Contact us page is a common part of most websites. In this example, the contact form attracts users with the use of color. Although it uses simple CSS it remains blended well with the rest of the site.

Search forms

The whole reason for this page is to give viewers a button that unlocks the hidden world behind it. Search forms are like gates and the surrounding graphics need to suggest what will be found if the user searches with it.

Visual metaphor forms

In this form, the visual metaphor is the case register.

As we stated earlier, a visual metaphor is an interactive graphic used to visualize and explain the purpose of the form more effectively. In this example, I used a case register to show the steps.

What type of web forms do you find interesting? Please share in the comments!

The author

Joanna Krenz-Kurowska has been working as a freelance graphic designer and web designer for 13 years. She lives in the mountains in the south-west of Poland. She has spent the last few years working for clients on five continents, writing about web design and technology for the 99designs community blog, winning dozens of web design contests and following her passions: art photography, running marathons, and graphic arts. She is a member of the New Mill Artists' Colony art union. Teaming up with Jerzy Kurowski, she creates complete digital products like websites or multimedia programs. She loves challenges like bathing in ice air holes, long-distance mountain running, or exploring new areas in web design.
More about her work on 23dragons.com. My 99designs profile: http://99designs.com/users/413631. Email: jkk2332@gmail.com