Navigate

Display Email Address While Avoiding Spam

Bookmark with

StumbleUpon

del.icio.us

Digg it

Furl

Spurl

ma.gnolia

Yahoo MyWeb

Windows Live

Introduction

This guide will demonstrate how to display an email link on your web page while avoiding the risk of your address being harvested by spammers robots. It's just basic javascript and very easy to customise.

Tested in Mozilla Icon Opera Icon IE6 Icon

Create the javascript

The first step is to define the variables. The following goes into the <HEAD> of your document:

To walk through this (if you are not familiar with javascript): first we define the variables (var) we need to make up the link. Each variable has a value, the name variable (var name) is webmaster, the address variable is your domain, domain.com, the link variable is the link which will be displayed on screen (Mail me!), the subject variable is the subject of the email. You can add or take away variables as you need to, so long as they are reflected in the function...

The function basically ties all the variables together to create the email link. "document.write" tells the browser to "write" the following; <a class="email" href=mailto: (basic mailto link code) + the name variable + the @ symbol + the address variable + ?subject= (code to add a subject to the mail link) + the subject variable then close the tag with < then write the link variable (Mail me!) and then close the link tag with </a>.

Which equals:

Defining the variables and function above is not enough. Now we need to tell the browser where to "write" this link with the following. Remember, the function is protectmail() so where ever you want your email link to appear simple add the following:

The result is this is our mail link:

Full code

Into your document head:

Into your document body:

Multiple Addresses

If you want to display more than one email address on a webpage we just need to create a new function for each email address.

In this example we'll create two addresses, each address will need a new function and variable names [IF the variables are different]

Into your document body:

As you see above the domain address and the subject stayed the same so we used the same variable names for these. But the recipient and the link text were changing so we created new variable names for these. This resulted in:

Alternate Version

The following version was proposed by James Crooke of CJ Website Design and allows for easier insertion of multiple mail links.

First define the function in the <head> of your document:

We then need to call this function in the body of our document. We can call the function a number of times using different values as shown:

Which gives the following result:

As demonstrated this alternative method makes it very easy to set up multiple email links using the same function as defined in the header.

Note: If using the alternative version on your web site please do not remove the copyright notice in the script.