Home     SSI Lab     CSS Templates     CSS     Htaccess     Web Design     XHTML

Design Tutorials

graphic-img   



Expanding the Mailto: tag

Bookmark with StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live
Sponsors

Introduction

The Mailto tag is used as a way to include an email address on a web page which can be clicked on thus opening the visitors default email client with the email address pre-filled. The mailto code can e expanded to include multiple email addresses, email addresses to CC and BCC, the email subject and even a message body.

Tested in Mozilla Icon Opera Icon IE6 Icon
The new line in the body is very buggy - no solution that we know.



Mailto: Tag

The following is the basic mailto tag:

<a href="mailto:name@domain.com">Mail me!</a>

Which would result in: Mail me!



Adding multiple recipients:

TO add multiple mail addresses just add in more addresses after the first address separated by a comma:

<a href="mailto:name@domain.com, first@second.com,you@there.com">Mail me!</a>

Which results in the following, if you feel like clicking it: Mail me!



Adding emails to Carbon copy (CC) or blind carbon copy (BCC):

Adding recipients to copy the emails to just add cc= or bcc= after the email address.

<a href="mailto:name@domain.com?cc=me@here.com">Mail and CC!</a>
<a href="mailto:name@domain.com?bcc=john@doe.com">Mail and BCC!</a>

Which result in Mail and CC!, Mail and BCC!


You should note at this point that we needed to insert a "?" before the CC and BCC 'functions'. This is always the case even if you add a subject or message body here. The first 'function' after the main email addresses must start with a "?" while any extra 'functions' will start with a "&"

If we combine the previous examples this will become clearer:

<a href="mailto:name@domain.com?cc=me@here.com&bcc=john@doe.com"> CC&BCC</a>
or
<a href="mailto:name@domain.com?bcc=me@here.com&cc=john@doe.com"> BCC&CC</a>

Result: CC & BCC



Adding a subject:

To add a subject simple add "subject=" :

<a href="mailto:name@domain.com?subject=feedback">

Result: Mail & subject



Adding a message body:

To add a subject simple add "body=" :

<a href="mailto:name@domain.com?body=message">

Result: Mail & body

If you would like to add an extra line to the body of the email you must add %0A where ever you want the text to break to a new line.

<a href="mailto:name@domain.com?body=message%0Ahere"> Mail & body</a>

Result: Mail & body



Combining these...

We can combine the previous examples to make a comprehensive mailto link:

<a href="mailto:name@domain.com,john@doe.com?cc=sales@here.com& bcc=admin@there.com&subject=Complaint& body=Dear sir.%0AI have a complaint to make">Mail us!</a>

Result: Mail us!



Important notes:

  1. You are limited to 255 characters in your mailto link.
  2. Including email addresses in this way leave them vulnerable to harvesting by spammers.
  3. The newline code "%0A" works well with MS Outlook Express but there have been mixed results with other email clients. (Thanks to Willians for info on this.)
  4. BCC will not always work, it's a bit 'buggy'
  5. These were tested in MS Outlook, MS Outlook Express, Lotus Notes and Mozilla Thunderbird and in general performed correctly (note point 3 & 4 above).