Wednesday, January 4, 2012

How to prevent mailto in email client

Recently I was designing an email that gets sent to customers. In it I had an email address, but it wasn't meant to be used to send an actual email, just to copy and paste. Gmail automatically converted it to a mailto link, which made it clickable and thus harder to select the text. Here's what I did to force it back to text.

The problem:

Original HTML of email that I'm sending:

<p>Please add blah@yadda.com to your address book.</p>

HTML of email that I receive:

<p>Please add <a href="mailto:blah@yadda.com" target="_blank">blah@yadda.com</a> to your address book.</p>

What I see:

Please add blah@yadda.com to your address book.

Solution:

<p>Please add blah<span>@</span>yadda<span>.</span>com to your address book.</p>

What I see now:

Please add blah@yadda.com to your address book.

Unfortunately, this will only work for HTML emails, not plaintext emails.