how to use a mailto link tag in html webpages

Posted on by barkeep

Many small business websites are build once and usually never maintained after that. The content updates are far and few in between and the functionality pretty much stays the same. never fixed when broken. This is especially true of non-retail websites that do not sell any products online.

One of important functionality of such websites is the ability for the visitor to contact the business. This can be done in various different ways. It could be as simple as providing a phone number or an email address in a text form. Some of the other low cost and popular methods including using a web form or a mailto link with the email address.

Web Form

The best way to implement a web form is using a server side script. The server side script extracts the values from the web form and sends an email to a predefined email address. This is recommended as it protects and does not divulge the email address to the user. This, however requires that you develop and maintain a server side program or script to do the work.

Another popular method of implementing the web form is without the server side scripting. It uses the mailto protocol syntax directly in the form post tag. While this does provide the form interface, it is a bad idea just as using the mailto syntax in a link tag.

Mailto Links

You can use the mailto protocol feature in several different ways to provide the user a simple and useful method to contact you without a lot of investment. It does however have several disadvantages.

Disadvantages

  • The mailto protocol requires an appropriate handler in the user’s web browser. It associates the link with an appropriate program that can handle the emails, such as thunderbird.
  • The user should have a mail reader installed and functional on the system. It is possible to attach an online email reader such as GMail in modern browsers such Chrome, but it still has to happen on the client machine.
  • You email address is now in the public domain which makes it ripe for mail harvesting and spam.

Advantages

  • It is low cost, simple and convenient with out any extra back-end scripts.
  • It uses the programs already in use on the client machine, which the user might be familiar with.

Despite all the issues with it, it is still one of the widely used methods just because of its simplicity and convenience. We will take a look at syntax of mailto and the various ways you could use it on your webpages.

As with all protocols, mailto ends with a colon (:), just as http: or ftp:. The attributes part of link is separated from the main part with a ? (question mark). If there are several different attributes then it is separated using the & (ampersand). The values of the attributes is separated from the key using a = (equals).

A generic syntax of the mailto will look something like this, with separators in bold (Note:%20 denotes a space in HTML). For a complete, detailed and exhaustive syntax for this protocol, refer to the mailto protocol RFC.

mailto:add1@domain?to=add2@domain&cc=add3@domain,add4@domain&bcc=add5@domain&subject=My%20Subject%20Here&body=Sample%20Body

Examples

The simplest of the format is to just provide the email address, and let the user fill out the subject and body. There are two ways you can do this, using the to attribute and without:

<a title="Compose a new mail to Mail me: No Replies" href="mailto:[email protected],[email protected]" rel="noreferrer">Mail me: No Replies</a>

<a title="Compose a new mail to Do Not mail me here" href="mailto:[email protected]" rel="noreferrer">Do Not mail me here</a>

<a title="Compose a new mail to This will work" href="mailto:[email protected]?to=me@example" rel="noreferrer">This will work</a>

Now, you can add several more email address to this list using the cc, bcc attributes in addition to the to attribute. A full and complete example would look something like this:

<a title="Compose a new mail to Email all of us here" href="mailto:[email protected][email protected]&[email protected]&[email protected]" rel="noreferrer">Email all of us here</a>

Now, if we to add a pre-defined subject line to the email, then we can add the subject parameter to this

<a title="Compose a new mail to Mail me: No Replies" href="mailto:[email protected],[email protected]?subject=No%20Replies" rel="noreferrer">Mail me: No Replies</a>

Also, add a body to the message:

<a title="Compose a new mail to Mail me: No Replies" href="mailto:[email protected],[email protected]?subject=No%20Replies&body=Hello%20There," rel="noreferrer">Mail me: No Replies</a>

Sometimes, the mailto is specified in the action parameter of a web form. This was popularized by old-fashioned web sites, that mostly worked only MS Windows. It is supported mostly by MSIE and requires the Outlook Express to be installed and functional. The syntax would looks something like this:

<form action="mailto:me@domain">....Form fields here.....</form>

IMO, it is generally a bad idea to use it such in a form element.