Javascript for disguising e-mail address

[kriskd]

Over in the CSS group, someone was kind enough to show me how to incorporate CSS (in particular the class tag) into this piece of Javascipt:

<SCRIPT LANGUAGE="JavaScript">
<!--
var contact = " E-mail us"
var email = "myname"
var emailHost = "somedomain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" +
contact + "</a>")
// -->
</script>

Being relatively new to Javascript and wanting to use this for all my mailto links, I was hoping to get some tips on how to incorporate this or something similar for:

- A mailto link connected to an image (jpg/gif) which uses the Javascript
- My e-mail address which appears in the code for my Paypal donation button: <input type="hidden" name="business" value="[e-mail]">
- The e-mail address connected to the Sumbit Form button on my FrontPage form: S-Email-Address="[e-mail]" B-Email-Label-Fields="TRUE"

I regret that I'm very much a beginner beyond HTML basics and appreciate any assistance I can get with these tasks.

Kris

[HarryM]

I'm not a javasript expert, so can't really answer your question. However I would point out there there are safer ways to do this.

The first issue is document.write is not supported by all browsers, certainly not Opera 6 so there are probably others. The second is there may be spiders already out there who can extract the email address from your js script, and if not there probably soon will be.

It's much safer to set the email address server-side, for example using php. It's relatively simple, and much more secure. Most servers have php, and you don't need to learn it to get such a standard script to work.

[kriskd]

It's much safer to set the email address server-side, for example using php. It's relatively simple, and much more secure. Most servers have php, and you don't need to learn it to get such a standard script to work.

I'll have to do some research on this as I don't know how to accomplish it with PHP either.

My main e-mail associated with my webpage can easily receive 100 spams a day. I want to switch it to another e-mail and kill that one completely, but of course I want to have some sort of protections to limit this happening to the new e-mail as well.

Kris

[HarryM]

I was in exactly the same position, getting loads of spam, which is why I went to a php form method. I still get loads of spam but at least I can identify real contacts. :(

The php forum is the place to look, but this is a cut-down example version of what I use. I don't take any credit for this code because the original I created was very insecure, and my hosting company helpfully rewrote it.

In your contact form page include something like this, but you do not include an email address in the 'hidden' fields.

<form method='POST' action='somename.php'>
<p>Please enter your query or comment in the box below.
<p><textarea rows='6' name='message' cols='50'></textarea>
<p>You may leave your name and e-mail address if you wish.
<p>Name : <input typ='text' size='35' name='name' />
<p>E-mail address : <input typ='text' size='35' name='email' />
<p><input type='submit' value='Send' name='send' />
<input type='hidden' name='state' value='1'>
</form>

Create a normal html document called 'somename.php'. (Not the extension must be '.php') Include the following as the first lines.

<?php
$email = $HTTP_POST_VARS[email];
if (!$email) $email = "[e-mail]";
$mailto = "your email address";
$mailsubj = "user contact";
$mailhead = "From: $email\n";
$mailbody = $HTTP_POST_VARS[message];
if ($name) {
$mailbody .= "\n\n";
$mailbody .= "From: $name\n";
}
mail($mailto, $mailsubj, $mailbody, $mailhead);
?>

Then your normal html and text follows. The text can include...

<p>Text of your email:
<p><? echo nl2br(strip_tags($mailbody));?>

When the form info is sent to 'somename.php', php sends the email and then creates a normal page without the email address. If the user doesn't leave an email address, the script substitutes '[e-mail]'.

[Rambo Tribble]

I'm not sure how you got the impression that Opera doesn't support document.write(), HarryM. Opera, like many browsers, allows JavaScript to be turned off, but with JavaScript "on", Opera works like virtually any other browser in regard to document.write().

To access Opera's JavaScript, configuration go to File - Quick Preferences, or press the F12.

Document.write() has been standard JavaScript syntax since JavaScript 1.0.

[HarryM]

Rambo Tribble,

I didn't say Opera, I said Opera 6, which has poor DHTML support. Works fine in Opera 7, but there are a lot of old browsers out there.

[will1480]

I would reccomend using PHP. PHP has a built in mail function, so all you have to do is process the form data. If you sticky me, I will send you what I use. Its very simple and comes out in a nice format. One percaution, the simple mail function will be bouced by alot of servers, such as yahoo if you are not sending it from an unregistered dns ip. I ran into this problem using a redirect server to host my local sites. SO if this is a locally hosted site and you are just using a pointer, you may run into some problems. I hear there are workarounds for this, but they are beyond my basic PHP knoledge. This is all to avoid the SPAMMERS.

[sebbothebutcher]

an image as a mailto link is very easy: just write something like this:

<a href="mailto:[e-mail]"> 
<img src="someimage.jpg" name="notreallynecessary"> 
</a> 

this is fairly simple: everything that is between the opened (<a>) and the closed (</a>) anchor tag is used as a link.

[rogerd]

I'd add the caution that forms are great for e-mail address security, but not all users like to fill out forms. Some prefer the speed of dashing off an e-mail and also the fact that it generates a record of who was contacted and what was said.

[HarryM]

The issue of whether to use forms or mailto: has been discussed many times at Webmasterworld, and it's really up to the individual to decide what suits their needs. As to a record of the contact, it is possible to set php to send a copy email to the sender. I would suggest a tick box that shows the sender they have that option.

[kriskd]

Resurrecting an old topic here....

Can someone share with me how I would have an image (jpg or gif) in place of the "E-mail Me" text?

<SCRIPT LANGUAGE="JavaScript">
<!--
var contact = " E-mail us"
var email = "myname"
var emailHost = "somedomain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" +
contact + "</a>")
// -->
</script>

Although I respect the discussion on what is the safest & most effective way to disguise an e-mail address on a web page, doing this is helping me to learn javascript. Certainly it must be simple enough to implement the above code with an image instead of a clickable link.

[kriskd]

I figured it out! Here's how to use that piece of javascript with a clickable image instead of a text link:

<script LANGUAGE="JavaScript">
<!--
var contact = "<IMG SRC='../images/myimage.gif' border='0'>"
var email = "username"
var emailHost = "mydomain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" +
contact + "</a>")
// -->
</script>

[ArrTu]

I took a diferent approach when I wanted to hide my email address from browser sniffers looking for mailto:

(not sure if it makes a difference, but im sure someone will say if it doesn't)

<a href="&#109;&#97; &#105;&#108;&#116;&#111;&#58;&#114;&#111;&#98; &#101;&#114;&#116;&#64;&#119;&#101;&#98;&#119;&#117; &#114;&#120;&#46;&#99;&#111;&#46; &#117;&#107">or Robert</a>

This is my email address input in ascii and seems to do the trick without the quibbles of the javascript method

[edited by: korkus2000 at 1:28 pm (utc) on May 31, 2004]
[edit reason] fix sidescroll [/edit]

[MichaelBluejay]

I'm always suprised that these discussions always fail to point out a couple of obvious (well, what *should* be obvious) and important things:

(1) To make sure that users without JavaScript enabled can see your email address you need to use NoScript tags, which will show only in browsers that have JavaScript disabled:

<SCRIPT language=JavaScript>a='mail'; b='example.com'; document.write('<A href="mailto:' +a+ '@' +b+'">'+a+'@'+b+'</A>')</SCRIPT><NOSCRIPT>mail(at)example.com</NOSCRIPT>

Your address shows up on non-Javascript browsers as <mail(at)example.com>. Yes, it requires the user figure out that (at) means the @ sign, but that's 100 times better than stranding them with no clue as to what your address is.

(2) Of all the various methods for hiding your addresses from spammers, JavaScript is one of the best. Saying that the JavaScript method is useless because spambots could theoretically figure it out is pretty shortsighted. The facts of the matter are:

(a) Very, very, very few spambots read Javascript. I've scripted dozens of addresses for years are rarely, rarely, rarely get any spam to them.
(b) It's unlikely that spammers will start going after JavaScripted addresses any time soon. People who have scripted their addresses obviously don't want spam, and therefore aren't a good target market for spammers. Besides, why would spammers go to the extra trouble to write and/or acquire JavaScript-reading spambots when they already have easy access to millions of addresses without going to such trouble?
(c) ALL methods of foiling spambots have downsides, some serious. The downsides with JavaScript are mild by comparison. Really, when your dig at JavaScript is that it *might* not be 100% successful, in *theory* -- that's just a pretty weak argument against JavaScript. The downsides with some of the other methods are way more severe, such as...

(3) The PHP method *hides the address from the user*! The user can't see or copy the address until they click the link. This is a serious, serious downside considering all the people who use web-based email. Probably most of us on WebmasterWorld use email clients, but it's extremely importan to remember that our visitors and our customers aren't as married to their computers as we are.

I have a big page with a rundown of the various anti-spam methods with their pros and cons listed, search Google for "bluejay spam".

[isitreal]

bluejay, you missed the best method of all, using scripted spider traps [webmasterworld.com], catch them before they even get to the page....