Learning from others can be a quick route to fabulous form design. That’s why we’re sharing five of our favourite examples of good web forms here with you.
Contact Form – Ultranoir
Ceci n’est pas un contact form. Except it is.
Contact forms are relatively underused, perhaps because so many of them are very dull. In this case, half the form completion battle is won by using beautiful website form design that makes you want to fill out your details.
And the functionality is good too. A drop down menu provides query categories to select from and as you type your details, the pink text matches the design.
The only bit that’s not spot on is the field copy that turns green as you type. Other than that, this is a real UX beauty.
Newsletter Sign-Up Form – by Regina
You don’t get anything for free and that includes people’s contact details. Which is why this newsletter sign-up form from by Regina is so good.
It has a clear offer in the form of a professional ebook. And in the proven tradition of good website form design it only asks users to enter their name and email address.
Could the name field have been removed to improve UX? Yes. But that would impact the ability to address future correspondence to the individual by name. Which is pretty valuable in marketing terms.
Checkout Form – Apple
Like its products, Apple’s checkout process combines the best of website form design and UX. It’s clean, easy-to-use and has support available when you need it via the chat now link.
Delivery options clearly tell you when you can get your product quickest and when you can get it delivered for free. Marked in green, it’s the gratis fulfilment option that’s pre-selected. Which quite literally gives users the go-ahead to buy.
Insurance Application Form – PolicyBee
PolicyBee provides insurance for small business owners. They’ve made it onto our list of good web forms because they really understand their customers and have incorporated this into their website form design:
1. The form is split into multiple steps with a progress bar so short-on-time business owners can see how they’re progressing.
2. Contact details at the top of the screen and within fields enable users to seek help easily.
3. Small business owners may not have bought business insurance before so need support. The form does this in several ways:
-The clear explanatory copy provides reassurance and explains why certain informtion must be provided, making it more likely that users will complete each field.
-Each section can be clicked to provide additional information that pulls out to the right-hand side of the screen.
-The verified and secured logo at the top right-hand corner of the screen provides reassurance that payment is secure.
Membership Scheme Login Form – Costa
Join Costa’s coffee club, register your card and you can login to check your points balance and manage your account. This login form might look simple but it does a lot of things right:
1. The elongated design, large text boxes and call to action buttons make it perfect for mobile device users as it’s easy to target with imprecise fingers.
2. The email field checks and highlights the validity of your email address to help users avoid errors.
3. The copy below the captcha field tells you why you need to tick the box using a warm and friendly tone, giving a sense of the brand’s personality and smoothing ruffled user feathers.
Good web forms are a delight to use because they’re quick, simple to complete and easy on the eye. Keep a note of forms you’ve enjoyed using and see how they inspire solid UX and outstanding website form design.