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.

For more on using visual metaphors, check out this article, “Using Interface Metaphors to Improve Your iPhone App Design.”

Surprise effect forms

A surprise effect can create entertainment for the viewer… it’ll make sure they’re still paying attention. 😉

While designing “Subscribe to the Burgasmic Rss Feed,” I used a small effect. When the mouse is moved over the black and white hamburger, it changes color along with the Send button — simple and fun!

Illustration-based forms

For real creative freedom, you will work with a company who wants a site chalk full of illustration.

The main focus is to keep the form style consistant with the rest of the site and of course, keeping the conversation friendly and fun.

Conclusion

Web forms have come a long way from boring and uninteresting, to eye-catching, creative and often times beautiful.

I presented a few examples in hopes of inspiring all you web designers out there. But enough talking, it’s time to start practicing. The first step? Experiment!

You’ll be happy to know: the number of solutions is unlimited.

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

The author

Joanna Krenz Kurowska & Jerzy Kurowski
Joanna Krenz Kurowska & Jerzy Kurowski

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

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%