What is best practice for coding an email contact button on your site

Go To StackoverFlow.com


I don't want to use mailto: because I personally find it annoying when it opens outlook which I never use.

<a href="mailto:homer@example.com">Email Homer</a> 

Should I have the button open a new page with just the email address in it? Is there a way to have it automatically copy?

2012-04-03 19:45
by Orb Hitter
It doesn't open Outlook explicitly, it opens whatever the user has defined as their default mail application. if you don't use Outlook, then change your default to whatever you use - Alex Howansky 2012-04-03 19:49
Well set your browser up to not use outlook! It can only use what it is told to do - epascarello 2012-04-03 19:51
epascarello: most people don't know how. The OP is trying to make it easier for the user - Diodeus - James MacFarlane 2012-04-03 19:54
I don't want to make your question sound invalid, but just because you find it annoying (as do I), doesn't mean that others don't find it useful. This has been how it's done for a while now, so it may be an annoyance for this functionality to go away. I would suggest following Diodeus's method or creating your own form that will email the intended recipient - dbooth 2012-04-03 20:01
Concerning the copy option: http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascrip - bostaf 2012-04-03 20:03


you have two options basically. Use mailto which will use the user's defined email application (could be outlook, yahoo, gmail, whatever). This is the fastest to program since you don't do a thing, just add the link and be done.
The other is to create your own email page. The cons to this is that it's more work from you. The pros is that you can specify more fields that give you more info (for example, order #, phone, etc). This would use your email server though, not the client's, so make sure the client adds his email address in the form as mandatory (and maybe verification too)

2012-04-03 19:55
by Rodolfo


I'd also give the user a choice to simply copy/paste:

<a href="mailto:homer@example.com">Email Homer</a> (homer@example.com)
2012-04-03 19:47
by Diodeus - James MacFarlane
Messing with copying is not worth your time.. I usually just put the email address as the text so you can copy it if you prefer. You could write a form that your server can then email but seems like a waste of time to me. So I agree with Diodeus, just copy and paste. - Patrick Lee Scott 2012-04-03 19:52
Sorry, I should have mentioned that the contact button is an envelope icon and I'm trying to avoid cluttering the design with a long email address - Orb Hitter 2012-04-03 19:59


I would create a separated web page (like Contact us) where I'd place a contact form (sender's name, email, subject and message). At this page you could also publish your email address with a link/button "Copy to clipboard".

2012-04-03 20:02
by Stanislav