Click Here!
 

View Source Front Page How-To Articles JavaScript Apostle DHTML Demystified Human Interface Online Feature Articles Case Studies Editor's Corner Third-Party News

Unleashing the Power of mailto URLs

By Robert Husted

Send comments and questions about this article to View Source.

The mailto URL is extremely useful but sadly underutilized. Of particular interest is the ability to preformat a message by supplying things like the subject line of the message in the URL. You can specify who should be copied (cc) or blind-copied (bcc), and even fill out the body of a message! In this article, we'll look at how to take advantage of these powerful features of mailto URLs. There are some things to watch for; for instance, if you don't know about hex encoding, all the blank lines will be missing from your message body. The article also gives some JavaScript tips that will help you preformat your programmatic email messages.

THE BASICS OF MAILTO URLS

In its simplest form, the mailto URL looks like this:

mailto:name@company.com

The corresponding HTML anchor tag is as shown in this example:

<A HREF="mailto:name@company.com">send email</A>

Clicking the link send email pops up a mail window with name@company.com on the To line.

(Note: This works in every browser I tested it in, but be warned that not all browsers recognize mailto URLs.)

If you want to specify values for additional properties, such as cc, bcc, and subject, you can add them to the URL as name/value pairs (name=value). Each property name is followed by an equals sign (=) and then the value to appear for that property. The first name/value pair starts with a question mark (?) to separate it from the email address, and subsequent name/value pairs are separated by an ampersand (&). For example, here's a mailto URL with cc and subject values specified (with the separator characters highlighted for readability):

mailto:erickrock@netscape.com?cc=bob@acme.com&subject=The Readme File

The HTML anchor tag looks like this (with hex-encoded text for the value of the subject property, as explained in the next section):

<A HREF="mailto:erickrock@netscape.com?cc=bob@acme.com&subject=The%20Readme%20File">
send email to Eric</A>

Clicking send email to Eric pops up a mail window with the To, Cc, and Subject lines already filled out.

URL NOTATION

Table 1 summarizes the separator characters and other special notation that can appear in a URL.


Table 1. Special Notation in a URL
Notation Meaning
? Appears just after the email address, separating it from the first name/value pair.
= Separates each name and value, in the form name=value.
& Separates name/value pairs, as in name1=value1&name2=value2.
% Precedes an ASCII character code in hexadecimal, in the form %xx, as a way of representing that character. For example, %0A represents a newline (line feed) character. See more on hex encoding below.
+ Another way to represent a space. For example, the value Bjorn Free could appear in the URL as Bjorn+Free.


In JavaScript, you can hex-encode a string - that is, substitute the %xx notation for all characters other than letters and numbers (and a few special characters) - by using the escape() function, as follows:

var myString = "Odds & ends for tonight!"
var myEncodedText = escape(myString);

This code puts the following value in the variable myEncodedText:

Odds%20%26%20ends%20for%20tonight%21

Notice that the spaces, ampersand, and exclamation point have been converted to their ASCII character code equivalents: %20, %26, and %21, respectively. Without hex encoding, this string could not be used as a subject value in a URL, because the ampersand would be interpreted as a separator between name/value pairs.

Be sure to hex-encode only the subject and message body values in a mailto URL. Although the escape() function will not encode letters or numbers (or the characters * @ - _ + . /), it will encode the ? and & separator characters, which would mess up your URL.

FORMS TO HELP OUT

The form below will help you create a mailto URL that includes cc, bcc, and subject values and a formatted message body (one that can contain newline characters, tabs, and so on). Simply enter the values for the various properties and then click the Create URL button to generate a mailto URL. The mailto URL will appear in the box below the table; you can copy and paste it into any HTML document to create a link that pops up a preformatted email message. (A standalone version of the sample application is available.)

The sample code included here is provided for your use on an "AS IS" basis, under the Netscape License Agreement - Terms of Use.

Enter Message Details Here
To:
Email address of person to receive this message. Separate multiple email addresses with commas.
CC: Email address of person to be copied on this message. Separate multiple email addresses with commas.
BCC: Email address of person to be blind-copied on this message. (This address does not appear anywhere in the header or body of the message, so nobody else knows that this person received a copy.) Separate multiple email addresses with commas.
Subject: The subject of your message - a brief description of what the message is about.
Body:
Here is your mailto URL
Mailto URL:

Now, what if you want to do this directly from JavaScript? You may not want a URL, but instead may want to pop up a mail window if a user clicks a button (like the Test URL button above or the Mail Window Test button below). In that case, you could use code similar to that shown in Listing 1.


Listing 1
// POP UP A PREFORMATTED EMAIL MESSAGE WINDOW
function popupMessage() {

  // SET MESSAGE VALUES
  var to = "person@company.com";
  var cc = "another_person@company.com";
  var bcc = "yet_another_person@company.com";
  var subject = "A Preformatted Email Message";
  var body = 
      "Chandler,\n\n\tI'm sorry, I can't make it tonight. " +
      "I have to rearrange my sock drawer. " +
      "\n\nSincerely,\n\nMonica"

  // BUILD MAIL MESSAGE COMPONENTS 
  var doc = "mailto:" + to + 
      "?cc=" + cc + 
      "&bcc=" + bcc + 
      "&subject=" + escape(subject) + 
      "&body=" + escape(body); 

  // POP UP EMAIL MESSAGE WINDOW
  window.location = doc;
}

You can test the JavaScript code with a simple form like this one:

<FORM>
<INPUT TYPE=BUTTON NAME=Test Value="Mail Window Test" onClick="popupMessage()">
</FORM>

Try it out here if you like:

MAIL AWAY

That's all there is to it. Now you know how to create robust
mailto URLs in your HTML documents and how to pop up windows containing preformatted email messages using JavaScript. Feel free to use and distribute the sample code and the sample application in this article to anyone who might be interested.


FURTHER RESOURCES


View Source wants your feedback!
Write to us and let us know
what you think of this article.

Robert Husted is a Technology Evangelist at Netscape, where he promotes Netscape Application Server and server-side JavaScript. His wife recently gave birth to their baby Rachel (October 5, 1998, 10:50 A.M., 8 lbs. 13.7 oz., 20 1/2 inches), who joins her siblings Joseph (3) and Rebekah (1 1/2) in the Husted's tiny Silicon Valley apartment. With DevEdge Champion JJ Kuslich, Robert has coauthored a new book, called Server-Side JavaScript, A Developer's Guide, to be published by Addison-Wesley in January 1999.


DevEdge Online FAQ
Developer Response Center
Join DevEdge Program
Copyright © 1999 Netscape Communications Corporation.
This site powered by: Netscape Enterprise Server and Netscape Compass Server.