Fresh, Practical, and Cost-Effective Websites. Armidale Web Design, Guyra, Glen Innes, Moree, Tamworth.

This article will walk you through how to have email addresses in plain text on your website and reduce the risk of spam bots by encrypting your mailto link.

1. jQuery
2. Encrypting
3. HTML

1. jQuery

The jQuery plugin we use is thanks to Joseph Finsterwald.
You can download the latest version here - jQuery Text Obfuscation
The demo page contains the version I used.

2. Encrypting

The first thing I do is include the jQuery libraries in the header tag of my HTML document so I can encrypt the email I want to use.

I copy the encryption from the alert box for later use. znvygb:znvy@jngresnyyjnlqrfvtaf.pbz

3. HTML

I then add the email link to the page:

					Contact Us					
				

This is what people will see if they have JavaScript turned off, and it links to your traditional contact form.

I then change the javascript function in the header to the following:

This function changes the attributes of the email link. The email links id is #contact_id and we unencrypt
znvygb:znvy@jngresnyyjnlqrfvtaf.pbz -> mailto:mail@waterfallwaydesigns.com
and unencrypt the text of the link,
znvy@jngresnyyjnlqrfvtaf.pbz -> mail@waterfallwaydesigns.com.

So there you have it.
In the source, bots will only see the encrypted text.
In the browser, viewers with JavaScript turned off will get a link to the contact form. Viewers with JavaScript turned on will get a mailto link like we have always had but now a bit more protected.