Dropdown to Hide Email Addresses

When you publish email address links on web pages (<a href="mailto:…">), the addresses are likely to be harvested by spambots.

Once in a spammer's database, there it is, for as long as the database exists. You can expect spam forever.

The technique described in this article is to hide email addresses at websites that have multiple email destinations, all at the same domain. The destinations are selected by the site visitor.

Example:

I want to send an email to:
Select the destination The billing department Sales Report site glitch

If you have only one email address to send email to, the dropdown can still be used. There would be only one destination to select. You may also read other articles published at Willmaster.com about how to obfuscate email addresses. There is a search box near the top-right of this page.

If your destinations include two or more domains, the JavaScript (further below) will need to be modified. The modification is outside the scope of this article, but it certainly can be done. Use the Willmaster.com contact form and ask me about it.

To implement the dropdown to hide email addresses, three sets of code need to be on your page.

• The dropdown list.
• An empty link.
• JavaScript.

Customizations include the dropdown list to suit your implementation. And the domain name the email is to be sent to.

Here is the code for all three sections. (They may all be together in your web page source code.) Notes follow.

<select onchange="handleSending(this.options[this.selectedIndex].value)">
<option value="">Select the destination</option>
<option value="bill">The billing department</option>
<option value="george">Sales</option>
<option value="sue">Report site glitch</option>
</select>

<a id="addyLink" href=".."></a>

<script type="text/javascript">
function handleSending(s)
{
   var websiteDomain = "example.com";
   var d = document.getElementById("addyLink");
   d.href = "am".split("").reverse().join("") + 
            "i" + 
            ":otl".split("").reverse().join("") + 
            s + 
            String.fromCharCode(64) + 
            websiteDomain;
   d.click();
}
</script>

Notes —

The dropdown —

When you create the dropdown for your website, the option values are the "name" part of an email address, the part before the "@" character: name@example.com

Leave the select tag as is in the above source code unless you want to change the name of the JavaScript function that handles a dropdown selection. Currently, it is handleSending and would need to be changed at both the select tag and the name of the function in the JavaScript.

The empty link —

You'll see the empty link below the dropdown and above the JavaScript in the above source code. (It is empty because no text or image is linked to.) The JavaScript will update the href value and click the link when a dropdown selection is made.

The empty link contains an id tag that you may change, if you wish. Currently, it is addyLink and would need to be changed at both the empty link and within the JavaScript function.

The JavaScript —

In the JavaScript, the example.com domain name needs to be updated to the domain name for the email addresses, the part following the "@" character: name@example.com

The function name handleSending and empty link id addyLink stay as they are unless corresponding changes are done in the select code or the empty link, respectively.

When the code is integrated into your web page source code, and tested to work correctly, the dropdown to hide email addresses system will be ready to go.

People select who to send an email to. The JavaScript updates the link with the correct mailto: protocol and email address. Then, the JavaScript clicks the link to launch the site visitor's emailing software.

The select dropdown list may be updated as necessary — without updating the rest of the system.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager