A safe and convenient way to have an email address on a web page

The challenge

You want to put your email address on a web page so it’s easy for genuine visitors to contact you, but you also want to prevent malicious bots from harvesting your email address and targeting it with spam.

Try our solution. We’ll even generate all the code you need!

The solution

Use a read-only, auto-selecting text box that makes it easy for a visitor to copy your email address, plus a button that provides a standard mail-to link:

With this approach, it means:

(iPads don’t allow users to select text in a read-only text box. But they can still use the button.)

The html

First, create a read-only text box that auto-selects its contents when clicked:

<input id="email_text_box" type="text" size="20" readonly onclick="this.select();">

Add the button:

<input class="email_button" type="button" value="email" onclick="window.open('mailto:' + document.getElementById('email_text_box').value,'_self');">

Then add the Javascript code to put the email address into the text box. This needs to occur after the input box. It can be at the bottom of your page, or placed immediately after the input box.

In the code that follows, you’ll need to replace **name** and **server.com** with the two parts of the email address you want to display:

That’s the only change you need to make to this code:

<script type="text/javascript"><!--
    nameStr = "**name**";
    serverStr = "**server.com**";
    document.getElementById("email_text_box").value
        = nameStr + "@" + serverStr;
//-->
</script>

Create your code

To easily create the code for your web page, enter your email address in the email address box below and click Get code. Then just copy the code and paste it into your web page!

(Your email address isn’t sent to our server or anywhere else. Javascript running in your browser inserts it into the html code.)

Email address: