Contact form or mailto link?
Jan
Whilst visiting various websites it has come to my attention that only about half use contact forms. The websites that don’t instead supply a mailto link which then opens an email client. Why do some websites choose to use a mailto link rather than a contact form? Is it because they’re too lazy to design and code a contact form or is it because they feel contact forms are unnecessary when you have well developed and easy to use email clients such as gmail. I am sure there are various reasons to why websites choose to display a contact form or supply an email address, but in this article I will be telling you why contact forms are the way to go.
Email can be a bit boring
Everyday we log onto the same client to see what emails we have received over night, for some, it is exciting to see what news and discoveries await. However, for the majority, checking you email can be a chore. A chore that we like to procrastinate over and try to ignore as much as possible. When supplying a mailto link, you are simple directing your potential client to where he would least likely to go, his email cave. Where his idea of a new awesome website that he would like you to design is shrouded with normal life of day to day emails.
Ugh more emails...
I have only suggested that many people do not like to check their email due from the various negative tweets I have come across. I would definitely say responding to emails can be a chore however, I don’t think it would have a huge affect on a potential client. That said, I believe a beautifully designed and built contact form would be much better to include than a simple mailto link.
Use a contact form
I would therefore recommend using a contact form. When the potential client has finished browsing your work and is thinking about contacting you, first of all the size of the contact form is more likely to catch the client’s eye than small link to your email. Furthermore, a lot of people continue to talk about how making a good first impression is essential. In my eyes the last impression should be just as important as the first. When the client comes to the end of his/her browsing and is considering whether you are the ‘one’, by putting a large contact form in front of them instead of a tiny link. You may find yourself receiving a few more extra clients every so often. However, this is only if the contact form is perfect(-ish)!
Important things to note
To create the perfect contact form, various objectives must be achieved. Perfect alignment. A good color palette. Correct Size for input boxes and uniqueness and creativity.
Alignment is crucial!
Alignment
With the number of input boxes used in contact forms, it is essential that they are each one is aligned. Unless of course you have created a creative layout which leads me onto a topic which I hope to discuss soon, Creativity versus Usability.
Size is very important.
Size
When it comes to size I don’t understand why some websites have a tiny message box, sometimes the height can be the same as the name and email boxes above?!. A message box should be at least ten times the size, it is the most important part of any contact form. The reader should be free to write as much as they want without feeling cramped. Of course, some browsers allow you to expand the text area yourself, but why put the reader through the effort? Why make them expand a text box that will potentially break you site?
Use contrasting colors.
Color
As always, color plays an important role. It is important to make sure that the contrasting colors are used for the background of the input boxes and color of the text. So the reader does not experience any strain.
Use your imagination.
Uniqueness, Creativity
When using your form, there has to be something that stands out, something that provides a little flair. A typical contact form will have each input box below the other, with a submit button at the bottom. Maybe try to experiment with different layouts, positioning input boxes, labels and submit buttons in different locations. I have endless ideas when it comes to this sort of stuff, if you need any help just leave a comment.
Analyzing great contact forms
There are probably a number of ‘awesome’ contact forms out there (if you find any please leave a comment), but I have only taken two and explained why they almost perfect.
Vuu Media
Vuu Media
Alignment – As you can see with Vuu Media’s contact form all elements are perfectly aligned. Padding and margins stay consistent through out and overall the layout and structure gives a nice flow to the form.
Size – Input boxes for names, email and telephone are correctly sized. The subject input box and and message text area are also perfectly sized. Throughout the form, the reader has enough space to fill in the labelled inputs. The size of the message box also allows the reader to write a decent amount of text before it is filled up.
Color – Labels are well defined. Strong text for defining different areas of the form, light blue text to inform the reader of the required inputs and a nice darkish gray for the standard input box labels. The background color of each input box also has a nice mouse over color also. I like this, however I believe the light gradient is easier to type on then the blue background.
Uniqueness, Creativity – I like the way has David has added depth to his input boxes. The contrasting top and bottom borders combined with an inner shadow gives a perfect recessed look. I also like how he has added some extra information to the right. However, it would be nice to see David adapt his design slightly so that the message text area can be expanded (using the integrated browser function) whilst still retaining the design. The submit button is also great but I feel it deserves an active state.
Sam Brown
Sam Brown
Alignment – As mentioned above, alignment can be ignored if the design has a creative layout. Sam brown has managed to align all but two input boxes but this is only because of the two full stops/periods he has used.
Size – Absolutely perfect
Color – Transparency works very well. However, I do feel the text color could be little brighter.
Uniqueness, Creativity – I have never stumbled upon a contact form such as this. Sam has done an excellent job with the design and has also produced a unique template type contact form where you just fill in the gaps.
Other great contact forms for your inspiration
Icondock’s contact form is perfect. It may not be creative or unique but it’s what everybody should learn from and build on:
Icondock
Grooveshark
Giraffe
TVI Design
Fubiz
Orman Clark
Summary
Mailto links aren’t necessarily bad, but they don’t show off any of your creative flair. Like sidebars I do feel like contact forms are neglected. I have found numerous websites with bad contact forms, and concluded that only around 10% turn out to be good. (Even CreativityDen’s is rubbish :/ ). It would be nice if we could all take a little more time when it comes to our contact forms and forms in general. Forms may be the only interaction you website has, so it is essential that a good user experience is achieved.
A few questions
What are your views on contact forms and mailto links?
Where do you think the submit button should be positioned, on the right or left?
Do you think the size of the message box should be larger in width and hight than input boxes for name and email?
Can you think of any alternative ways? (I just thought, perhaps you could allow people to leave audio or even video messages?)
Discussion
A great article Liam. Very well explained and interesting topic too.
.-= Inspiring Pixel´s last blog ..Interview with UX Designer Mike Lane =-.
Thanks bud
I would love to hear your thoughts on the questions.
While contact forms are a must for every website, I also find comfort in being able to email someone, especially if I know it’s a person’s email rather than (info@). I’m not bold enough to put my personalized email on the web (for fear of spam) but as spam filters are improving it is something to consider.
Contact forms=professional and easy to use
Mailto=personal and reliable
I think every website should have both. Great Article Liam!
.-= Chris Thurman´s last blog ..Wet Logos: Showcase of Logo Designs Featuring Water =-.
I would have to agree, there will be no problems if both are provided
To avoid spam filters many exchange the @ signs to [at] and . to [dot] however, I wonder how many spam bots have adapted to this :/
I personally use mailto when I’m being lazy and it’s not essential to have a contact form. On the other hand forms are much more user friendly, and it’s a really big advantage that the user doesn’t have to leave the page when leaving feedback.
Totally agree Alfred, a good user experience with a contact form is much better than a mailto link.
Very nice selection of forms, Liam!
I prefer contact forms, but in my experience, if the site is a forum/portal, with a contact form, sometimes users send messages that should be posted in the forum.
If the contact form is for support purposes, sometimes when you reply to the message, the email goes to spam folder, if the user has sent you an email first, then your reply will get to the inbox for sure.
I like the submit on the right, but depends on the overall design of the form. The message box should be larger in height or expands as you write.
The audio and video alternatives are good! Other alternative, not as creative, is with a “Skype me” button.
.-= Natalia Ventre´s last blog ..Customizing web pages =-.
I always say that a contact form is the way to go. It’s more elegant, looks nicer and can work with it a hell of a lot easier than a mailto link.
.-= Blogger Den´s last blog ..wordpress plugins for mobile phones and mobile devices =-.
Agreeed!
In my experience, I’ve found that using both at the same time can be helpful. It gives the person contacting a choice of however they feel most comfortable. Some sites may have a lot going on in a contact page (which is a serious error, in my opinion), which may distract from their point.
What aggravates me is the very little information there is out there to better one’s contact form. I’m self-taught and to this day still struggle quite a bit finding a decent code to learn.
Yup, it’s hard to go wrong with both, so long as the contact form does not hide the mailto link.
You would like to better your contact form? I have some ideas, maybe I’ll jot them down and compile them into an article
IconDocks contact form is a very good form form a user-interaction point of view to learn from. I am a usability designer and have conducted some research into the layout of forms.
Contact forms on a personal portfolio may not apply with the results i found as the most important factor is that they fit with your site’s creative and aethetical appeal.
Based on this i believe contact forms are a much better practise than a mailto link. Mailto links for windows users will often open Microsot Outlook by default and alot of your clients will not have this set up as their primary email account.
Contact forms allow you to showcase your creativity that one step further, as Sam Brown illustrates, and also allows us to create unique success pages that your potential client will remember.
.-= Paul W´s last blog ..Percy the Snowman =-.
Wow Paul, this is exactly what I was trying to convey with my article. People should probably read your comment rather than my article, hehe
Spam considerations aside I prefer putting up a form instead of a mailto link. Ofttimes we need the sender to provide certain info and a form can check for properly filled in fields.
I greatly prefer email to contact forms following some bad experience with the latter: the contact form has no history. If you don’t receive an answer, you have not even the possibility to resend your message.
After leaving long descriptions of problems in contact forms to get support, and not getting an answer, I always regret not having sent an email in the first place.
Although I did not mention this in the article. I was only suggesting to use a contact form to initiate discussion. Of course using a contact form every time, would be tedious and pointless. If you set up the contact form with an email which you can then reply to, you should be good to go!
Unfortunately, most out there with a blog or site bought a template that didn’t come with a contact form and don’t know how to make one work or code it. A well designed form won’t send an email, but a copy and pasted link will.
.-= Jason´s last blog ..Stupid jQuery Tricks =-.
I agree putting up a contact form is the best idea, it helps hide your email address from spam bots.
One other thing to mention along with contact forms (as with any connecting communication) is that it’s an opportunity to control not just graphics — and look/feel/layout — but the conversation at large. Basically, you can upsell yourself or products alongside a contact form in the way you would a signup page.
It’s stronger marketing to remind people why you’re the one they want to contact, as they’re doing it, instead of assuming everyone is just dying to write you a message asking for help (or whatever).
I love the idea of having both a contact form and a ‘mailto’ link. I say this because while I’m at work and I want to email someone about how sexy their website is, I don’t want the ‘mailto’ link to open my work e-mail program. I like being able to send the message directly from their site. On the other hand I like to keep the address for later comments or questions.
As for your question about the submit button. I tend to put them on the right hand side of the form. I do it because I figure people are so used to reading left to right, that it makes sense to have it over there. I still toss the idea of location around every time I make a form though!
When you go with email you don’t need to fill all those fields, jsut subject and message. Best way is to provide email ling above contact form so user can choose.
@umpirsky
While i hate the mailto:, i must agree with you. Better show both but with Contact Form as main way of contact.
For better results (less spam), put your e-mail as an image. It’s boring for the user to write (and not click or select and copy) but at least bots are less likely to send you spam.
Ps.: Loved the examples and the article. Keep on going!
Regards
RaphaelDDL
On pretty much every website I build I’ll have both a contact form and a mailto: link – it covers all bases. A lot of people use web mail like yahoo / gmail and not a client such as thunderbird, outlook or mail.app and will be confused when they click a mailto: link – they will never of used the mail window that opens up before – in my experience these are the sort of people who like to use contact forms, if designed properly they are simple to use and immediate, rather than having to copy & paste the email address into the web mail.
Be honest, who else took the blurred photo of the gmail box into Photoshop to sharpen and read it? Pretty funny.
Nice article though
Great article that I can really build on. How do I still get Spam even with a required pull down menus for subject matter. I keep getting these “how to improve your traffic” emails.
I think the biggest fault wth the mailto: approach over a Contact Form is that when the visitor clicks on a mailto link, the computer will expect there to be a mail client, like Outlook. If there is no such mail client installed there is no way a mailto link will work.
With more and more people using cloud services like Gmail, this is a problem as many people don’t use mail clients.
Also, consider library computers and school computers that almost enver have mail clients installed on them.
A Contact Form therefore is more universal and will ensure the visitor gets their message to you.
.-= Max´s last blog ..Does My Blog Look Big in This? =-.
This entire article should be added to Textbook material. It explains everything people need to know about contact forms and how to make them useful and with good taste no less.
Love it!
I much prefer a contact form! Having a mailto link is slightly invasive in forcing you to open your mail client program. It’s much nicer to quickly fill in the form and continue browsing. I think it makes for a better user experience.
.-= Codesquid´s last blog ..Sites in review – Tesco.com – How usable is it, and how accessible? =-.
Nice selection and good advice. Much prefer the contact form than mailto link, it always makes it seem simpler to get in touch with someone
.-= fiona´s last blog ..Stunning Landscape Photography =-.
Leave a comment