Back to blog
Website Design Part 7: Forms

Website Design Part 7: Forms

Warning
This article contains language that may be offensive to some readers.


Alright, web designers, gather ’round. It’s time to dive into the world of form design, the things users love to hate. Contact forms, sign-up forms, checkout forms—you know, those little bastards that can make or break a user’s experience on your website. Sure, they might seem pretty strati froward at first glance but shitty form design can make a big difference when it comes to generating leads. So, let’s get down to brass tacks and talk about how to make these necessary evils less of a pain in the ass.

First off, let’s not beat around the bush. Forms are a fucking nightmare to fill out, especially on mobile. So, the first rule of form design? Keep it simple, stupid! Only include the absolutely necessary fields. Anything more, and users are likely to say “screw this” and peace out of your website faster than you can say “user abandonment”.

Next up, your form fields better be easy to spot and read. Make sure they contrast with the background, and for the love of all that is holy, choose a font colour that stands out. There’s nothing more annoying than squinting at a screen trying to decipher whether a field is for an email address or phone number.

As for labels, do not, and I mean DO NOT, use “fun” or “playful” language for your form labels. This isn’t a Dr. Seuss book, it’s a bloody form. Stick to clear, plain directions and make sure the user knows what the hell they’re supposed to input. If there’s one thing that confuses users more than a cryptic captcha, it’s a poorly labelled form field. This is even more important for accessibility tools and search engines. Also, while you’re at it, give users a clear indication of which fields are mandatory. Nothing pisses off users more than hitting “Submit” only to be told they missed a required field.

Speaking of “Submit”, have you thought about what happens after users hit that button? You should. Designing the response after submission is just as important as the form itself. A simple “Thank you” or confirmation message can go a long way in making users feel like they didn’t just send their information into the abyss. On the flip side, if there’s an error, be sure to explain what the fuck went wrong in clear terms.

And let’s not forget about mobile. If your forms suck on mobile, you might as well not have them at all. Make sure your forms are responsive and easy to fill out on all devices. This isn’t just good practice, it’s absolutely necessary in a world where more than half of web traffic comes from mobile devices.

Lastly, the CAPTCHA. So you’ve designed a form and it looks fucking sweet. It’s clear and concise and looks good to boot. Great, now we’re gonna throw a wrench in the works because that bastard needs a CAPTCHA and you didn’t account for it in your design so it’s gonna get tossed in there like a shitty afterthought. So include that sucker. Ya, it’s not pretty but neither is an inbox full of SPAM. Of course, these days there are more options, such as invisible CAPTCHAs so, if possible, talk to your developer to find out what they’re going to be using. If in doubt though, better to design your form to include it.

Takeaways

First and foremost, Keep it Simple by only asking for the information you absolutely need. Make sure your form fields are easy to see and to read.  Stick to clear, plain directions for your form labels. This isn’t the place to get fancy with language. Remember to include the CAPTCH and most of all, make sure your form is responsive for mobile.

Share

Did you enjoy this article?
Show love by signing up for more.

Meet The Author
Heather Treadgold
Hiilite Web Design + Marketing + SEO
Contact Us
close slider
  • This field is for validation purposes and should be left unchanged.