Get super confident at JavaScript. Javascript Icon

I promise to change your JavaScript skills!

Email address Spam Protection with JavaScript

This is a simple code snippet to prevent any spambots crawling your Contact pages, finding your email address and sending you automated spam. It’s good to include a text-based email address alongside any contact forms you may have. Here’s a quick tutorial to add some simple JavaScript to your website using the document.write command, which prevents spambots sweeping your site for text-based emails.

JavaScript

Here’s what you’d need to add instead of typing out an email address. On page load, the document.write command writes our email variable and small function, and outputs our email address. Since I’ve been using it, I’ve had no spam, even across client websites too.

var emailAddress = ('[email protected]' + 'yourdomain.com');
document.write('<a href="mailto:' + emailAddress + '">' + emailAddress + '</a>');

Disabled JavaScript

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

For users with JavaScript disabled in their browser, they won’t see an email address, which would definitely be a problem in terms of usability. You could offer two different solutions, a progressive enhancement solution, or using graceful degradation. For purposes of this exercise, we’ll offer a straightforward graceful degradation technique using NoScript. Here’s a few ideas of some solutions, and will all appear for users without JavaScript enabled -

Type out the name without the @ symbol:

    <noscript>name[at]yourdomain.com</noscript>

Use an image of your email address:

    <noscript><img src="img/email-address.jpg" alt="My Email"></noscript>

Integration

All you need to do is include the snippet in your page source, and replace the email address ‘[email protected]’ and ‘yourdomain.com’.

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover