Protecting visible and clickable website email addresses from spam

Protecting visible and clickable website email addresses from spam

There are many methods for hiding email addresses from bots, while still making them visible to human site visitors. On a recent project, the client needed to

  1. display actual email address
  2. make them clickable with mailto link
  3. not get spam

My typical approach to this is simply to not display email addresses, favoring route-able contact forms instead; however for this project, the personal nature of a direct contact was important to the feel of the site. To achieve this I implemented a solution utilizing both css and javascript to handle each action separately in the browser. As of now, bots don’t scrub javascript or css, but should they being to, the method discussed would begin to lose efficacy.

I was inspired by two posts by Jeff Star at Perishable Press:

I implemented the “reverse the direction” approach to displaying the address, while implementing the “industrial strength” js approach for making them clickable. The latter script was written to accommodate a single instance on a page, but for my purposes, I needed it to function for 9 addresses on a single page.

The following dependencies were in place – Wordpress, Genesis Framework, Pods Framework – however, the same approach could be modified for use without Genesis or Pods.

There are 3 pieces – js to do the work, a PODS template to store the data, and css to display it properly. There is of course additional css to pretty everything up, this part is key to functionality.

At Little Studio Creative we help Milwaukee-area non-profits, individuals and small, privately held companies in manufacturing, outdoor sports and professional services to reach their potential customers with strategic messaging on any device they use. We design mobile-friendly websites that make you look good and produce human-story videos that will resonate with your audience. We work with clients anywhere, but we eswpcially love to work with our clients here at home in Milwaukee.

Brian Mayer
brian@littlestudio.net

As Principal and Creative Director of Little Studio Creative, Brian consults with marketers and business owners to make their companies look and sound as good online as they are in real life.