HTML Mailto Tutorial
When you create a website or blog, your readers may have suggestions or helpful feedback and wish to contact you. While you can simply type out your email address as text on the page, you can create a link that will send readers directly to your email instead. However, spam-bots seek out email addresses online to harvest for spamming purposes, and great alternatives to the mailto: link are there for your protection.
-
Elements of a Mailto Link
-
Creating a "mailto:" link uses almost exactly the same HTML as a regular hyperlink. The only element that changes is its href attribute, which is "mailto:username@email.com" Make sure that there are quotes around the href attribute, otherwise the link will not work correctly. A complete link will look like this:
<a href="mailto:username@email.com">Email Me</a>
What will show up on your page is a clickable link labeled "Email Me," and will open a new message in the reader's default email client and automatically enter your specified email address as the recipient.
Adding More Attributes
-
If you want to use a more advanced code that includes the email subject and body as well, there are simple attributes that can be added to the tag.
<a href="mailto:username@email.com?subject=Summer Vacation&body=I liked your summer vacation tips!">Email Me</a>
Question marks separate the email address from the email subject, and an ampersand separates the subject from the body. When the user clicks on this link, their email client will open with the recipient, subject and body already filled out for them.
Alternatives
-
While the mailto: link is useful HTML, you may want to seek alternative methods of contact to avoid spam-bots harvesting your email address. Using forms, where users can input their own information, is beneficial because you do not have to reveal your email address. Consider using Javascript as well, which uses codes that are difficult for spambots to read. For more alternatives and examples on how to use Javascript, refer to the Resources below.
-
