WordPress – How to hide or obfuscate your email address from spambots

Last Update: 15 March 2019

Tested: WordPress 5.1.1

All too often, I visit websites and email address are displayed in full using HTML.

<a href="mailto:name@domain.com">name@domain.com</a>

I consider this as sloppy coding! Now the client has to deal with an enormous amount of spam arriving in their inbox.

Initially, you can reduce unsolicited email spam by hiding or obfuscate all email addresses on a website before you go live.

In this way, spambots and list builders can’t harvest the email address.

There are multiple ways you can “disguise” an email address.

CSS pseudo-classes
CSS reverse character sequence
Including HTML comments
Converting to HTML character codes
Adding “remove” elements.

No matter which way you approach these methods the outcome is the same. Either spambots have worked out how to decipher the email address or, the active hyperlink is lost, requiring the user to copy paste or edit the email address – resulting in decreased usability.

Check the venerability of your obfuscated email address – Try this FREE online tool.

The aim here is to maintain an active HTML hyperlink which will open your email program and compose a new email.

So let’s get started!

1. How to hide or obfuscate an email hyperlink in WordPress using Javascript

2. Obfuscate your email address with WordPress built-in antispambot() function

3. Encode WordPress email links using javascript and ROT13

1 – How to hide or obfuscate an email hyperlink in WordPress using Javascript

STEP 1

In your WordPress content editor swap from visual mode to TEXT MODE and paste the following javascript code

<a href="javascript:window.location.href ='mailto:'+['name','domain.com'].join('@')+'?subject='+'Email Subject'">Click to Email</a>

STEP 2

If you switch back to VISUAL MODE, the Javascript renders the email link.

STEP 3

To edit the javascript and email address – you have to modify the LINK in your visual editor.

DISADVANTAGES

At any point in the future, if you enter TEXT MODE in the content editor again, you lose the javascript. Forcing you to recreate the javascript element again. Not ideal.

ADVANTAGES

It’s a quick option with no real overheads on the page load. Set once and forget. As long as you don’t enter text mode again.

2 – Obfuscate your email address with WordPress built-in antispambot() function

If you are developing with WordPress and PHP, you can use the built-in WordPress antispambot() function to obfuscate the output of an email address.

Code Reference…
https://codex.wordpress.org/Function_Reference/antispambot
http://hookr.io/functions/antispambot()

<?php echo esc_html( antispambot( 'john.doe@mysite.com' ) ); ?>

The function will render your email address by replacing random characters with HTML unicode characters.

The email address will output like this:

&#106;&#111;&#104;&#110;&#46;&#100;&#111;&#101;&#64;&#109;&#121;&#115;&#105;&#116;&#101;&#46;&#99;&#111;&#109;

And appear in your browser like this:

john.doe@mysite.com

However, this is not an active hyperlink.

Before you jump in – NO, you can’t just convert the whole hyperlink string.

<a href="mailto:john.doe@mysite.com">john.doe@mysite.com</a>

An encoded hyperlink will not be recognised as valid HTML markup.

&#60;&#97;&#104;&#114;&#101;&#102;&#61;&#34;&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#106;&#111;&#104;&#110;&#46;&#100;&#111;&#101;&#64;&#109;&#121;&#115;&#105;&#116;&#101;&#46;&#99;&#111;&#109;&#34;&#62;&#106;&#111;&#104;&#110;&#46;&#100;&#111;&#101;&#64;&#109;&#121;&#115;&#105;&#116;&#101;&#46;&#99;&#111;&#109;&#60;&#47;&#97;&#62;

In PHP output the encoded email address in a mailto hyperlink.

$email = esc_html( antispambot( 'john.doe@mysite.com') );
echo  '<a href="mailto:' . $email . '">Click to Email</a>';

When you look at the page source the HTML markup will look like this.

<a href="mailto:&#60;&#97;&#104;&#114;&#101;&#102;&#61;&#34;&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#106;&#111;&#104;&#110;&#46;&#100;&#111;&#101;&#64;&#109;&#121;&#115;&#105;&#116;&#101;&#46;&#99;&#111;&#109;&#34;&#62;&#106;&#111;&#104;&#110;&#46;&#100;&#111;&#101;&#64;&#109;&#121;&#115;&#105;&#116;&#101;&#46;&#99;&#111;&#109;&#60;&#47;&#97;&#62;">Click to Email</a>

Alternatively you can create a simple WordPress [shortcode] using the antispambot() function.

Add the following code to your child-theme functions.php file.

If you don’t know how to set up a WordPress child-theme, I’d suggest you first head over to our article – How to create a WordPress Child Theme.

/**
 * Hide email from Spam Bots using a shortcode.
 *
 * @param array  $atts    Shortcode attributes. Not used.
 * @param string $content The shortcode content. Should be an email address.
 *
 * @return string The obfuscated email address. 
 */
function wpcodex_hide_email_shortcode( $atts , $content = null ) {
	if ( ! is_email( $content ) ) {
		return;
	}

	$content = antispambot( $content );

	$email_link = sprintf( 'mailto:%s', $content );

	return sprintf( '<a href="%s">%s</a>', esc_url( $email_link, array( 'mailto' ) ), esc_html( $content ) );
}
add_shortcode( 'email', 'wpcodex_hide_email_shortcode' );

Then in the WordPress content editor wrap your email address with the shortcode [email][/email] element like this.

[email]john.doe@mysite.com[/email]

If you are using a WordPress Theme that has Footer and Sidebar text widgets – you can processes the shortcode in the widget text by placing this code into your child-theme functions.php file.

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

For more information…
https://developer.wordpress.org/reference/functions/shortcode_unautop
http://hookr.io/functions/shortcode_unautop
https://developer.wordpress.org/reference/functions/do_shortcode
http://hookr.io/functions/do_shortcode

DISADVANTAGES

Not all characters in the email address convert to HTML entities. The selection is random and changes each time the function is called.

Although this is the official WordPress method to block spam, in recent times, intelligent spambots can recognise HTML characters, decipher and re-generate the original email address.

Check the venerability of your obfuscated email address – Try this FREE online tool.

ADVANTAGES

Antispambot is core WordPress. However, it’s outdated and should be replaced with something more secure.

3 – Encode WordPress email links using javascript and ROT13

There are a few WordPress Plugins that offer this functionality out of the box.

Go ahead and give them a try.

https://wordpress.org/plugins/email-address-encoder/

https://wordpress.org/plugins/wp-mailto-links/

https://wordpress.org/plugins/simple-mail-address-encoder

However, if you don’t want to rely on another plugin, below I have outlined an email address obfuscation shortcode that uses a ROT13 javascript cipher with additional functionality.

The WordPress obfuscate email address shortcode includes:

Email address
Link text
Email subject
Custom CSS class
Body message – The composed email body text will maintain line returns within the shortcode.
ROT13 Javascript Cypher

STEP 1 – Add Code to your child-theme

Paste this code into to your child-theme functions.php file.
If you don’t know how to set up a WordPress child-theme, I’d suggest you first head over to my article – WordPress a Beginners Guide How to Create a WordPress Child Theme

Alternatively, in your child theme directory, create a folder /child-theme/shortcodes/ add a new file obfuscate_email.php, PASTE in the code and SAVE.

Now enqueue the file from your functions.php file. Not sure how to do this then head over to my article: WordPress a Beginners Guide to Child Theme Structure and Asset Handling.

STEP 2 – Create a Javascript File

In your child-theme folder create the following folder structure with your new javascript file

/wp-content/themes/child-theme/assets/js/obfuscate_email.js

PASTE in the following code into your javascript file and SAVE.

STEP 3 – Enqueue the Javascript File

In your child-theme functions.php file paste this additional code:

define( 'CHILD_THEM_URI', get_stylesheet_directory_uri() );

function child_theme_scripts(){
wp_enqueue_script( 'obfucate_email_script', CHILD_THEM_URI . '/assets/js/obfuscate_email.js', array( 'jquery' ) );
}
add_action('wp_footer', 'child_theme_scripts');

STEP 4 – Set Default Shortcode Values

Modify the default variables in the PHP source code.

If you update the email address in the PHP function, the default shortcode email address will update globally.

A great feature if you have one email address in multiple locations across your site – Header, Footer and Contact Us

'email' => 'example.one@domainname.com',
'subject' => 'Website Email Enquiry',
'text' => 'Click to email',
'class' =>''

STEP 5 – Shortcode Examples

In the WordPress content editor add your shortcode.

Example 1: Default Shortcode

[obfuscate_email]

Click to Email

Example 2: Custom – email address

[obfuscate_email email="example.two@domainname.com"]

Click to Email

Example 3: Custom – email address, link text, subject and CSS Class

[obfuscate_email email="example.three@domainname.com" text="Email Example 3" subject="Website - Example 3 - Email Enquiry" class="custom_class"]

CSS STYLE

a.custom_class{text-transform:uppercase; color:#ff6600; text-decoration: underline; }
a.custom_class:hover{ color:#000000;}

Email Example 3

Example 4: Custom – email body message with line returns.

Use [shift] [return] inside the shortcode to create a new line in the email body.

[obfuscate_email email="example.four@domainname.com" text="Email Example 4" subject="Website - Example 4 - Email Enquiry" body="Message with line returns
line 2 line 2 line 2 line 2 line 2 line 2
line 3 line 3 line 3 line 3 line 3 line 3"]

Email Example 4

The javascript email hyperlink will output like this:

<a href="javascript:window.location.href='mailto:' + [ 'example.four', 'domainname.com' ].join('@') + '?subject=Website - Example 4 - Email Enquiry&body=Message with line returns%250D%250A
line 2 line 2 line 2 line 2 line 2 line 2%250D%250A
line 3 line 3 line 3 line 3 line 3 line 3'" class="email_hide">Email Example 4</a>

Example 5: Custom – with ROT13 Cipher

[obfuscate_email email="example.five@domainname.com" text="Email Example 5" subject="Website - Example 5 - Email Enquiry" body="Message with line returns
line 2 line 2 line 2 line 2 line 2 line 2
line 3 line 3 line 3 line 3 line 3 line 3" cipher="true"]

Email Example 5

With the ROT13 Cipher the javascript email hyperlink will output like this:

<a href="javascript:window.location.href='mailto:' + [ encodeCipher( 'rknzcyr.svir' ), encodeCipher( 'qbznvaanzr.pbz' ) ].join('@') + '?subject=Website - Example 5 - Email Enquiry&body=Message with line returns%250D%250A
line 2 line 2 line 2 line 2 line 2 line 2%250D%250A
line 3 line 3 line 3 line 3 line 3 line 3'" class="email_hide">Email Example 5</a>

DISADVANTAGES

ROT13 is just a simple character cipher that replaces the current character with the 13th character after it in the alphabet. It’s very simple to decrypt and provides no real cryptographic security.

More information on ROT13 – https://en.wikipedia.org/wiki/ROT13

Contrary to belief, spam harvesters can interpret javascript; however, most people assume spam bots and email harvesters are too lazy to implement it, creating a false sense of security.

ADVANTAGES

str_rot13 — Performs the rot13 transform on a string and is native to PHP.

If you need to have a mailto hyperlink, it’s better to have some kind encryption, than none at all. ROT13 provides the most effective method of obfuscating your email address from most spambots. However, this may change.

Ultimately if you don’t want any robots or email harvesters scraping your email address, use a contact form with a spam captacha.

Check out our article – WordPress 5 ways to prevent email spam.