On first glance, forms are simple to learn. But when we consider the journeys we need to design, the users we need to design for, the browsers and devices being used; and ensuring that the result is simple and inclusive, form design becomes a far more interesting and bigger challenge.

Form Design Patterns

All SitePoint web design and UX books plus short videos and online courses on how to design a better web

Design & UX

Accessibility

Preface

Let’s start with a registration form. Most companies want long-term relationships with their users. To do that they need users to sign up. And to do that , they need to give users value in return. Nobody wants to sign up to your service — they just want to access whatever it is you offer, or the promise of a faster experience next time they visit.

A Registration Form

“Here’s what I bring to the table: a valid credit card, 90 seconds of my time, and my right thumb. The rest is up to you.” — Melanie Jones, “ 8 things parenting taught me about accessibility ” 1 

A Checkout Form

In this chapter, we’ll design a flight booking service. At first glance this may seem a bit niche, especially when compared to “A Registration Form” and “A Checkout Form.” However, we’re going to explore several complex problems that, in the end, will result in reusable patterns — patterns that are very much transferable to other problem domains, such as booking a cinema ticket, or even a hotel room.

A Flight Booking Form

“As a user, I want to log in to [your service] so that I can [do stuff]” — Nobody, ever! 

A Login Form

My sister loves to-do lists. In fact, she loves them so much, that one of her favourite things is making new lists out of old ones. The world is full of lists. There’s even a list of great people 1 . On the web there are several types of lists, and there are some design patterns that have emerged over the years that help to manage them.

An Inbox

I’m an organized person. Even as a boy, I remember always having a place for things. To be fair, I’ve always been minimalist too. Organizing when you only own a few things is easy. So it’s no surprise I rarely lost things. On the odd occasion I did, I just shouted in the general direction of the resident search engine: “Where’s my…,” and I’d have my answer.

A Search Form

In the introduction to “A Search Form” you’ll recall the type of conversation I used to have with Mum. Sometimes I would ask, “Where’s my black top?” But this was so vague that Mum would respond with questions like, “Is it a football or tennis top?” This question is a filter on a large set of results. Without knowing the answer to this question, Mum couldn’t respond with an accurate answer.

A Filter Form

The web is more than just text. Whether it’s sending a CV to a recruiter by email, or adding photos to an eBay advert, we need to let users upload files. Forms have this capability baked in, of course.

An Upload Form

As a self-employed freelancer I have to submit expenses for my tax return. It’s a pain but if I do it correctly I get tax breaks. The problem is that I have so many expenses to enter and a limited amount of time to enter them.

An Expense Form

Different types of tasks take different amounts of time to complete. The one thing per page pattern (introduced in chapter 2, “A Checkout Form”) helps users complete tasks in one sitting, but what about those that take hours, or even days, to complete?

Form Design Patterns

Details

Description

Creator

Adam Silver

Content

Reviews

Frequently Asked Questions

Form Design Patterns