Spam-protected email links for websites with JavaScript
Spam emails are a nuisance, as you will surely know. Especially if you have a website with a direct mailto: link on it you cannot avoid spammers picking up your email address before long.
There are a few solutions around, such as adding a bit to your email domain name that you need senders to delete before sending their email (e.g., [email protected]). This can be a hassle for the person who wants to get in touch. The same is true for "de-codyfying" your email address (e.g., foo(at)bar(dot)org). Nobody is very keen on having to alter email addresses before sending emails.
There is a fairly elegant solution for this in JavaScript however, provided the user's browser 'does' JavaScript, which allows for instant mailto: without giving away the actual string of your email address.
All you need is a script that "builds" the email address from its disassembled string parts and adds the @ symbol and the full stop before the top level domain:
// mail.js function sendEmail(a, b, c, d) { MailWindow = window.open("mailto:" + tinker(a, b, c) + d); if(MailWindow != null) { MailWindow.close(); } } function writeEmail(a, b, c) { document.write(tinker(a, b, c)); } function setEmailStatus(a, b, c) { status = "mailto:"+tinker(a, b, c); } function tinker(a, b, c) { okvg = a; okvg += "@"; okvg += b + "." + c; return okvg; }
Save the file (e.g., as mail.js) and upload it to your webserver (in this example, the file was copied into a folder named "js").
Include the reference in the HTML file which includes the mailto: href to your email address.
... <head> <script src="js/mail.js" type="text/javascript"> ... </head> ...
And finally, replace the link with the following code. Don't forget to replace [user name], [provider name] and [provider top level domain] with the respective parts of your email address (e.g., if your email address is [email protected], replace [user name] with foo, [provider name] with bar, and [provider top level domain] with org).
<a onmouseover="setEmailStatus('[user name]', '[provider name]', '[provider top level domain]'); return true;" onmouseout="status=''; return true;" onclick="sendEmail('[user name]', '[provider name]', '[provider top level domain]', ''); return false;" href="javascript:sendEmail('[user name]',%20'[provider name],%20'[provider top level domain]',%20'')" target="_self">Send email</a>
Obviously you should make sure everything works before going live.