Designing Better Forms
What I learned about making forms that people actually want to fill out
I used to hate filling out forms online. They were confusing, they asked for too much, they broke on mobile. Then I started paying attention to why, and I realized I was probably making forms that other people hated too.
So I started studying good forms. What made them work? What made them fail? And I applied what I learned to my own projects.
Labels matter. Not just "what goes here" but "why do you need this?" If I'm asking for someone's phone number, I should explain why. Context helps people understand what they're giving up. Placeholders aren't labels. They disappear when you start typing. If that's the only way someone knows what to enter, you've lost them. Labels stay visible, placeholders are hints.
The Mobile Problem
Most forms are designed for desktop. But most people fill them out on phones. Tiny inputs, cramped layouts, keyboards that cover half the screen. It's frustrating. I started testing forms on my phone first. If it doesn't work there, it doesn't work. Bigger touch targets, better spacing, inputs that make sense on mobile keyboards. These aren't nice-to-haves—they're requirements. I learned this the hard way when I watched someone struggle with a form I'd built. They had to zoom in to tap the submit button. They had to rotate their phone to see all the fields. It was embarrassing, and it made me realize how much I'd been ignoring mobile users.
Every field is friction. Every click, every keystroke, every decision. So I ask: do I really need this? Can I get it later? Can I infer it from something else? I've cut forms in half just by removing unnecessary fields. Not because I'm lazy, but because every field I remove increases the chance someone will actually complete the form. I used to think more fields meant more information, but really it just meant fewer completions.
"Invalid input" doesn't help anyone. What's invalid? Why? What should I do instead? Good error messages tell you what went wrong and how to fix it. I also try to prevent errors before they happen. Format hints, examples, validation as you type. Catch problems early, before someone hits submit and gets frustrated.
Good forms are invisible. They get out of the way and let people do what they came to do. Bad forms are obstacles. They make people work harder than they should. I'm still learning. Every form I build teaches me something. But the basics—clear labels, mobile-friendly design, minimal friction, helpful errors—those make the biggest difference. Forms don't have to be painful. They can be simple, clear, even pleasant. It just takes paying attention to what actually works.
Note: This is a mock-up post created as part of the Feather blog template demonstration. The content is provided as an example to showcase the blog's features including markdown rendering, search functionality, tags, and more.
Feather is a blog template built for Next.js. You can use these example posts as a reference when creating your own content.