2013_08_07_featured_contact_forms Design

10 Dos and Don’ts For Your Contact Form Design

Web forms play a pretty important role on the web. Be it to subscribe to a newsletter, sign up for an account, or make an online purchase – there are a lot of different kind of forms out there that build the foundation for many online interactions.

While all forms have their purpose to serve, some forms are more important than others. Let’s take a look at a very special group: contact forms.

Contact forms are among the most convenient ways to get in touch with the people behind a website – if designed with thought and some love. And allowing your visitors to get in touch with you is not only critical for the usability, it also contributes to the overall user experience of your site.

However, not all contact forms are the same and not all forms offer a convenient means of communication. Here are 10 dos and don’ts that help you design better contact forms.

1. Do make it personal

First of all, keep in mind that a contact form is used by your site visitors to contact you. This implies that people want to reach out and connect with you. They are looking for some personal interaction, rather than simply consuming the information that you offer on your site. By making your contact form more personal, you send some very clear signals, such as “I’m a nice person, don’t be afraid to contact me.” or “I’m inviting you to contact me and I’m looking forward to hearing from you”.


A personal contact form is both appealing and inviting.

The creative design studio Boy-Coy invites their visitors on a very likable and personal way to ‘get in touch’. Their contact for looks like a letter, that is addressed to Boy-Coy and only requires you to fill in the blanks. Also the handwritten font adds to the personal appeal of this contact form.

2. Don’t make it boring

The look and feel of your contact form says a lot about you and your company. While a personal style can be fun and inviting, a neutral, dark, or sterile design can be quite emotionless. Since the personal contact with you should be anything but impersonal and distant, make sure you don’t scare your visitors off by making your contact form look boring.


A dark or impersonal design can scare your visitors off.

The designer Christian Annyas has chosen for a rather dark overall design for his website. Also his contact form is very dark and there is only little contrast between background and content. This does not only make it difficult to read, it also makes the form look very impersonal and not at all inviting.

3. Do keep it relevant

Before you even start to think about colors or the kind of font you want to use, make sure you know why you build a form in the first place. What is its purpose and what information do you really need from your visitors? Start off with a brainstorming and then define the different form fields including their type and name. Make it convenient for your visitors and leave out all form field you cannot justify.


Don’t make your visitors think. Make as many choices for them as you can and kep your form simple.

The Web Development & Graphic Design agency Focus Lab has chosen for a conditional contact form. In the first form field, people select a topic for their enquiry. Depending on the selected topic, form fields are being added or disappear. This way, the visitor gets an optimized form for his specific request.

4. Don’t asks for random information

We’ve all seen it before. Endless web forms that ask for way too much random information. Often the website offers no explanation whatsoever on why they want to know that much about you – or what they are going to do with all your data. There is really only one thing to say here: Don’t ask for any information that you don’t really really need. And hey, why would you need more than a name and either an email address, or a phone number from people who just want to ask you something?


Never ask your visitors for information just because you can.

Fedex gives us a great example of how not to do it. While you simply want to send them a digital message, field like your physical address and your phone number are required fields. Besides, if you want you can fill in your company and your fax number. Why even bother to ask for a company if it’s not obligatory anyways – what’s the point? And are there really people who still use fax?

5. Do keep it simple

There is really not much else to say here. Keep it simple. All your visitors really care about is the one field that says ‘your message’. Why bother them with additional information? All you need to reply to them is a name (and only because it’s nice to know who you are talking to and to start your reply with ‘hi name’), and either an email address or phone number. However, a lot of people don’t want to leave their number, so don’t make that field obligatory.


Make sure your contact form is an attractive alternative to sending a regular email.

The contact form of Cake Sweet Cake is kept very simple. This form actually competes with the alternative contact details that are available on the site. While I often decide to send an email because it seems like less hassle, this form looks very promising: Name, email address, message, and your’re good to hit ‘send’.

6. Don’t ask for captcha

Yes it still happens. A lot. Why? I don’t know. Sure, it helps your form filter out unwanted automatized submissions. But it that really worth putting every human being to the test, before letting them get in touch with you? Don’t you hate them, too? And just between us: How much spam did you really get before you followed this trend to add captchas all over the place?


Captcha do not make your form more secure – there is no advantage for your visitors and yet you put them to work when you ask them to decipher the random letters.

The Innovation Center BBVA keep their entire contact form very clean and simple. Yet, it’s not a convenient form due to the two word captcha at the end.

7. Do say who will reply

A general criteria of a contact page is if you present yourself and your team in form of authentic pictures. This allows your visitors to get a better idea of who’s behind the site and who they’d get on the line in case they wanted to call you. With a contact form it’s the same thing. If you are not a one person company, tell people who will reply to their message. This way you make sure people don’t feel like their message will disappear right into nirvana.


Your contact form becomes much more trustworthy if you show who will reply.

Brisk Code does exactly that. They offer a very clean and professional looking contact form on their page. Right next to that form, they show pictures of themselves. This is very reassuring and you know you can expect an answer from either one of these three people. Sure, if you have a bigger team, this might not be as easy, but then again not the whole team is responsible for incoming contact requests, are they?

8. Don’t make people doubt your credibility

Try and think of your contact form as your ‘online face’. Due to time differences and geographic distances, people cannot talk to you face to face. So what they do is connect with you online. Your contact form institutes this connection and in some way represents you and your company while you are not available in person. Make sure that your form makes a good first impression and reflects a credibility that is worth of you and your company.


Make sure that your contact form really is meant to contact you.

Burger King has not exactly done a good job keeping up their credibility when it comes to their contact form. When clicking on the link “contact” on their official site bk.com, all you get is a customer satisfaction survey. However, this has nothing to do with getting in contact with the company. There are no contact details whatsoever and only after taking a closer look, it becomes clear that you can switch between ‘restaurant’ and ‘general’ feedback. But what if I have a question?

9. Do offer alternative contact details

Some people like forms. Other not so much. Consider both types of people when designing your contact page. Sure, a form can be the easiest way to get in touch with you – if people use it. If they don’t and you don’t offer them alternatives, they will simply not contact you. Alternatives can be as simple as your email address that they can use for their email client, it can be a phone number in case they want to call you, or you can engage with your users on social media.


Who says your contact site has to be all serious? Why not add a big red “Panic Button” for those unsure where to click?

WooThemes offer their visitors a great range of support and contact options. You can browse their FAQs, submit a technical issue, or fill in their contact form for general enquiries. If you cannot decide, simply hit the big red “Panic Button”, which takes you to their contact form directly.

10. Don’t make your contact form unusable

Last but not least, it is essential – just like with any part of your website – to focus on the usability aspect of your form. The usability starts with very small and simple things, such as the colors you use, contrasts, font styles and font size, etc. Readability plays an important role considering the fact that a form exists to encourage writing and capture text.


Good readability is crucial for a usable contact form.

The design agency insojourn offers a contact form on their site that is far from usable. The overall contrast almost hurts your eyes. Form fields are by no means proportional and therefore look lost on the page. Form labels are too long and way too small and written with a serif font, making them even harder to read. And instead of using well recognized stars to mark required fields, there are different sections with either required or non-required fields.

7 comments

  1. Christian Krohn

    Good article. Including a photo is a great idea. Another “do”, do track each field completion for drop off/ friction points. Do make error messages user friendly without deleting/resetting completed fields.

  2. Sabina Idler

    Hi Christian,

    Thanks for adding another “do”. A very important one as I think!

  3. Oleg Post

    Great information, thank you. You can also try a software called Japkin. Japkin allows your visitors to leave you video and voice messages on your website, instead of filling out a contact form.

  4. Sabina Idler

    Hi Oleg,

    Thanks for the tip, greatly appreciated! :)

  5. bypenguins.com

    Nice blog right here! Also your site so much up fast!
    What host are you the use of? Can I get your associate hyperlink on your host?

    I want my web site loaded up as fast as yours lol

  6. Spandau

    Great summary of do’s and don’ts. But I think bigger / more known websites will get so much unwanted mails without captchas, so that I’m not sure, if the aspect of easyness would be argument enough to leave them away…
    btw I hate captchas. and I hate much more these automated spam guys…

    best regards
    spandau

  7. Bitskin

    I think Brisk Code made a good one. Burger King … thats not what I would fill out..
    Clean and no Captcha is what I usually look for

Leave a Reply

Your email address will not be published. Required fields are marked *