How To Build An Awesome Form

Kuba Chrześcijanek
Sep 13, 2015 · 11 min read

A quick guide on how to cope with most common design problems when creating a form.

1. Your Goal

A Short Registration Form With Clear Call To Action Button
UX Pin Offer Page

2. Building The Form

Grouping items into logic categories
Single CTA vs Multiple CTAs

3. User Interface

Modal treatment of various elements. Round increments (10, 20, 25, 30px etc.) make the entire structure of the form more organized
Twitter — Above The Fold Registration
Formal corpo-like CTA (top) vs more playful, direct approach (bottom)

4. User Experience — A Short, Simplified Registration Form
Input with label and hint vs prefilled input box
Server Validation Example
Inline Validaion Example

5. Common Mistakes

An example of an overcomplicated form, with to many Call To Actions, no clear structure, lacking a proper hiererchy that would guide the user through the process.

Kuba Chrześcijanek

Written by

UI & Brand Designer