How to Create a mailto: within an HTML Page while Preventing Spambot Address Harvesting


This involves several steps, none of which is very long or complicated.

The first step is to create a simple javascript file which will create the "mailto:".   I call it mmt.js, but you can use any name.   The name may have to end in ".js"

mmt.js is short and contains:

function createMailto(){document.getElementById("smail").innerHTML='<br> <a id="mto" href="mailto:myusername@myemailserver">Click to pop up mailto:</a><br/>';document.getElementById("mto").focus()}

The javascript file, mmt.js, as presented, appears to have a linefeed within it, but in fact, in the actual file the apparent linefeed is a space character.   I believe the javascript file works with or without linefeeds.

We are now ready to proceed to the second step, modifying our html page.   This requires modifying the head section by including the following line:

<script type="text/javascript" src="/path/to/mmt.js"></script>

I am not sure why, but, as least for me, "/path/to/mmt.js" had to point to a file on the same server.

In the body of the html page, near where you want the "mailto:" popup to appear, place the following lines:

<p id="smail">
<button onclick="createMailto()">Contact Webmaster</button>

The words "Contact Webmaster" above seemed appropriate to me. You may replace this with anything you want.   Just do not put your actual email address anywhere within the html page or it likely will be harvested by spambots.

There is one step left to ensure that your email address will not be harvested by spambots. You will note that your email address is written in plain text in the javascript file. Initially I thought that javascript files, by default, could not be harvested. But I was wrong.   Based upon my experience using commercial hosting services that used Apache for web-hosting, I sequentially published many different ways of preventing the mmt.js javascript file from being harvested. I promise you that each of them worked for a period of time without interfering with mmt.js's functioning before I posted them here. But ultimately, each of them stopped working. I have no idea why that was.

If things are working properly, clicking on the anchor, "Contact Webmaster", should generate another anchor which says "Click to popup mailto:" and clicking on that should bring up your mailto client.   The page, https://emmestech.org, works for me.   How to designate your mailto client is beyond the scope of this article, but there is lots of documentation available elsewhere.


Emmes Technologies
Updated 23 Apr, 2020