Skip to main content
Instapage

How to Hide your Email Address on Web Pages

You have a website, you want to put your email address on the site so that people can contact you easily but you are also worried about spam flooding your mailbox once your email address begins to appear on a public web page.


Your concern is valid. The email harvesting bots, using simple regular expressions, will most definitely find your email address if it’s published in plain text but you may trick the less-clever bots by hiding your email address through simple CSS and JavaScript based techniques.


1. Hide Email through CSS


1a. CSS pseudo-classes


You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com.



<style>
email::after {
content: attr(data-domain);
}
email::before {
content: attr(data-user);
}
</style>

<!-- Set data-user and data-domain as your
email username and domain respectively -->

<email data-user="john" data-domain="gmail.com">@</email>

The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.


If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.



<style>
.domain::before {
content: "\0040"; /* Unicode character for @ symbol */
}
</style>

john<span class="domain">abc.com</span>

1b. Reverse the direction


You can write your email address in reverse (john@abc.com as moc.cba@nhoj) and then use the unicode-bidi and direction CSS properties to instruct the browser to display the text in reverse (or correct) direction. The text is selectable but the address would copied in reverse direction.



<style>
.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
</style>

<!-- write your email address in reverse -->
<span class="reverse">moc.cba@nhoj</span>

1c. Turn off ‘display’


You can add extra characters to your email address to confuse the spam bots and then use the CSS ‘display’ property to render your actual email address on the screen while hiding all the extra bits.



<style>
z {
display: none;
}
</style>

<!-- You can add any number of z tags but they'll stay hidden -->
john<z>REMOVE</z>@abc<z>REMOVE</z>.com

2. Obfuscate Email through JavaScript


2a. Using the ‘onclick’ event


You can create a regular mailto hyperlink for your email address but replace some of the characters – like the dot and the @ sign – with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.



<a href = "mailto:johnATgmailDOTcom"
onclick = "this.href=this.href
.replace(/AT/,'&#64;')
.replace(/DOT/,'&#46;')"
>Contact Me</a>

2b. Random Array


Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.



<span id="email"></span>

<script>
var parts = ["john", "abc", "com", "&#46;", "&#64;"];
var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
document.getElementById("email").innerHTML=email;
</script>

3. WordPress + PHP


If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes &#97; and the @ symbol becomes &#64;) though they will render correctly in the browser.



<?php echo antispambot("john@abc.com"); ?>

You can also encode email addresses in the browser.


Finally, if you really don’t want spam bots to see your email address, either don’t put it on the web page or use Google’s reCAPTCHA service. It hide your email address behind a CAPTCHA – see example – and people will have to solve it correctly to see your email address.




This story, How to Hide your Email Address on Web Pages, was originally published at Digital Inspiration on 04/01/2014 under Css, Email, Internet



from Digital Inspiration Technology Blog

Comments

Popular posts from this blog

How to Get SMS Alerts for Gmail via Twitter

How do you get SMS notifications on your mobile phone for important emails in your Gmail? Google doesn’t support text notifications for their email service but Twitter does. If we can figure out a way to connect our Twitter and Gmail accounts, the Gmail notifications can arrive as text on our mobile via Twitter. Let me explain:Twitter allows you to follow any @user via a simple SMS. They provide short codes for all countries (see list) and if you text FOLLOW to this shortcode following by the  username, any tweets from that user will arrive in your phone as text notifications. For instance, if you are in the US, you can tweet FOLLOW labnol to 40404 to get my tweets as text messages. Similarly, users in India can text FOLLOW labnol to 9248948837 to get the tweets via SMS.The short code service of Twitter can act as a Gmail SMS notifier. You create a new Twitter account, set the privacy to private and this account will send a tweet when you get a new email in Gmail. Follow this account …

Another SEO tool drops the word “SEO”

This guest post is by Majestic’s Marketing Director, Dixon Jones, who explains the reasons for their recent name change.
Majestic, the link intelligence database that many SEOs have come to use on a daily basis, has dropped the “SEO” from it’s brand and from its domain name, to become majestic.com. Since most people won’t have used Google’s site migration tool before, here’s what it looks like once you press the “go” button:

In actual fact – there’s a minor bug in the tool. The address change is to the https version of majestic.com (which GWT makes us register as a separate site) but that message incorrectly omits that. Fortunately, elsewhere in GWT its clear the omission is on Google’s side, not a typo from the SEO. It is most likely that the migration tool was developed before the need for Google to have separate verification codes for http and https versions of the site.
The hidden costs of a name change
There were a few “nay sayers” on Twitter upset that Majestic might be deserting it…

6 types of negative SEO to watch out for

The threat of negative SEO is remote but daunting. How easy is it to for a competitor to ruin your rankings, and how do you protect your site? But before we start, let’s make sure we’re clear on what negative SEO is, and what it definitely isn’t.Negative SEO is a set of activities aimed at lowering a competitor’s rankings in search results. These activities are more often off-page (e.g., building unnatural links to the site or scraping and reposting its content); but in some cases, they may also involve hacking the site and modifying its content.Negative SEO isn’t the most likely explanation for a sudden ranking drop. Before you decide someone may be deliberately hurting your rankings, factor out the more common reasons for ranking drops. You’ll find a comprehensive list here.Negative off-page SEOThis kind of negative SEO targets the site without internally interfering with it. Here are the most common shapes negative off-page SEO can take.Link farmsOne or two spammy links likely won’…