Tips and TricksTutorials

Protect your e-mail address in iWeb

Are you getting fed up of the amount of spam you seem to be receiving since you added your e-mail address to your iWeb site? Every site should have some way of contacting the site owner (unless it’s a small personal thing of course) but as soon as you add your e-mail address you leave yourself open to spambots which trawl the internet looking for e-mail address and then bombard them with dreaded spam. With this tutorial I will show you how to effectively ‘hide’ your e-mail address from those spambots and therefore stop you pulling your hair out as you delete the latest collection of viagra ads in your inbox.In this post I want to explain 3 methods for inserting an e-mail address into your iWeb site. To begin with there is the default method that is built into iWeb. All you have to do is go to the ‘Insert’ menu, choose ‘button’ and ‘e-mail me’; then, providing you have entered your e-mail address into inspector that is the job done.

And of course, there is the simple method of adding an e-mail link to a piece of text such as ‘E-Mail Me’ or ‘Contact Us’. You then open ‘Inspector’ choose the ‘Hyperlink’ button and select ‘An email message’ from the drop down list. Complete your e-mail address and an e-mail subject and that is it.

The trouble now though is that although using an image to cover your e-mail address (method 1) can be successful to a certain extent iWeb does publish your e-mail address to the entire internet for all to see. You can argue that that is the purpose, however there are certain people you don’t want e-mailing you. As I mentioned above, spambots trawl the internet looking for such unprotected e-mail address and then send spam after spam after spam, filling up your junk e-mail box.  Method 2 is even worse at attracting attention from spambots as your e-mail address not only appears in your code, but as plain text on your web-page. Now’s the time to fight back!!


To begin with, open iWeb and navigate to a page where you want your e-mail link to appear, then select to insert a HTML Snippet.

Copy and paste the following code into the transparent black box that appears remembering to change the text as mentioned below.

<script language="javascript"><!--
var part1 = "contact";
var part2 = " About iWeb Enquiry";
var part3 = "E-Mail Me";
document.write('<a href="mai' + 'lto:' + part1 + '@' + part2 + '">');
document.write(part3 + '</a>');
// -->

In the second line down change “contact” to the first part of your e-mail address before the @ symbol. The third line down, replace “” with everything that comes after the @ symbol. Still on the third line the ‘subject’ can be anything you want, but this is the line that will be filled in on your visitors e-mails should they click on your link.

Finally “E-Mail Me” is the text that will appear on your iWeb site and can be changed to anything you wish. When you have finished it should look like this: 

Just click apply and your link is there.

Sadly as the javascript is inserted via an HTML snippet there is no way to format it as you would a normal hyperlink, so the choice is yours as to whether you want lots of spam in your inbox or not. With a little imagination and a free icon or two you could soon make the link look like part of your site.

As with all my tutorials and posts, feel free to leave a comment. Let us know if your spam is getting less or if it hasn’t helped at all. Everything is useful.

You may also like


  1. thanks for making the effort to help us out with your fab site.

    i tried the HTML snippet, as blogged in “Protect your e-mail address in iWeb”, and hid the HTML box in my pages. will this now work to mask my email from spambots, even when running my own ‘Email Drew’ buttons?

    or do i have to delete all my buttons, and start from scratch with your HTML snippets?

  2. Drew, Thanks for you comment. Unfortunately the masking will only work to the links that you insert through your HTML snippets using the javascript I provided. You E-Mail Drew links will still be unprotected. Sorry!!


  3. I have tried this code a few times and it does not work. I copy, paste and change but the box remains empty

    1. Hi Phil,

      Thanks for your comment and I am sorry it doesn’t work. I tried copying the code from the web-page and pasted it into a HTML Snippet and it worked fine for me. Is it just this HTML Snippet you are having problems with?? Can you try it again and let me know how you get on.


  4. Seems to work now! How can we change the color of the font or the font itself???

  5. Thanks for your tips. I worked out how to change the font and size by adding another line ‘. However, when I add a colour code at the end of the style, the colour does not change.
    Please, can I change the colour and also remove the underline? Many thanks

    1. Here is how to alter the code to specify the font, text size and to remove the underline:

      var part1 = "who";
      var part2 = "";
      var part3 = "Email me";
      document.write(part3 + ‘
      // –>

      Notice that the font is in quotes. The quotes are only necessary if the font name contains spaces.

      1. Please elaborate on how to change the font, text size and removal of underline. I’m new to all this and don’t understand what to replace and/or add nor where to do so. Tried a few things, but wasn’t successful.

  6. nice! [IMG][/IMG]

  7. Great article. Thanks for taking teh time to put it together.

    It is greatly appreciated.

    I used the code and got the resulting hidden email link, but would like to change it for an image or different text, could you tell me where about’s I need to add the font, color and size tags in this snippet.

    Also, how would one replace this with an image instead?

    Many thanks.

  8. I love your email code, and it works fine when testing, however, it won’t activate email I publish it to the website.
    Also, what line (s) of code would I add to change font/color?
    Thanks for your iWeb how to pages. They have saved me lots of time and much potential frustration. After all, I’m really only a picture guy. Code is scary.

  9. I found another great and more secure idea:

    * Encrypt Email script
    * Tool URL:

  10. Use this modified javascript if you wish to use a clickable image instead of text

    var part1 = "contact";
    var part2 = "";

Leave a reply

Your email address will not be published. Required fields are marked *