Cloak Front End Email

Plugin is easy to use: just install it, use short code [email] and it just works. If you want multiple email addresses go to the settings page and create your custom email address and use the short code referenced. Will be similar to [email name=”cfe-example”]. Simple to add a subject line with subject parameter in shortcode [email name=”cfe-example” subject=”My Email Subject Line”]

Simple and easy to use plugin for displaying your email on the front end of your website safely and securely through JavaScript cloaking / obfuscation. Email that is displayed is the email you have setup as your admin email in WordPress General Settings or the custom email you setup in on the “Cloak Email” settings page. Source code does not show your actual email address which keeps scrapers from email harvesting and putting you on their email spam lists.

How it works

The Cloak Front End Email plugin follows the same methodology as Cloudflare’s email cloaking. The email addresses are not in the source code of the website. Therefore any programing language that is doing a request to the site will scrape the source code of a website and since the email is not embedded in the source your emails will not be leaked. The plugin also protects against headless browsers PhantomJS, SlimerJS and Selenium that use default agent.

Source code will look like this (see screenshot below):
<span class=”cfe-jsemail”><a href=”#”>loading…</a></span>

*Note: If users have javascript disabled on their browser they will get text saying “loading…” in place of the actual email.

** Color Customization **
Currently the email link will default to your global styles. We do not have a color setting yet but plan to in the future. Until then it’s pretty easy to stylize the color with some very basic CSS.

Each email has a custom html class assigned to it so you could add css styles to your style sheet for each specific one (you would have to inspect the code in the browser to see what class is added, it’s dynamic so will depend on the email). It follows the same pattern as the shortcode name paramater [email name=”cfe-bob”]

.cfe-jsemail-cfe-bob a {color:#000;}

You can drop this code into the custom css module inside WordPress.

Appearance > Customize > Additional CSS

Another example with the default dashboard email [email]
<span class="cfe-jsemail-cfe-dashboard" data-subject=""><a href=”#”>loading…</a></span>

.cfe-jsemail-cfe-dashboard a {color:#000;}

Or you can set the global style using the below CSS.

.cfe-wrapper a {color:#000;}

Optional
.cfe-wrapper a:hover {color:purple;}