Email Hyperlinks: HTML mailto Examples
Providing a contact email on your website is a good way to let your visitors contact you. In this post, we will see how to create email hyperlinks on a web page.
Many people on the internet prefer contacting a webmaster or a business only via email and if you don't have a contact email (or a contact form) on your website, you may lose these people as potential customers, subscribers or followers.
You can present your email in a number of formats such as plain text, image or hyperlink. In this tutorial, I will demonstrate how to create email links on your website such as the following one.
Please click on the email address above and notice how it opens your email client automatically (if it is configured) and prepares a ready-to-send, empty email.
As you see, this makes things a lot easier and faster for a visitor to contact you via email. I mostly use a contact form on my websites but it is not necessary and providing an email just works fine as well. Though I should warn that by putting an email address openly on a web page, you may be inviting spam to your inbox. A reasonable solution for that would be to change your displayed email or use some sort of encoding if you start the receive a lot of spam email.
The following examples demonstrate how to create email hyperlinks on web pages:
HTML mailto Examples
Simple Email Hyperlink: The following code creates a plain simple email link.
<a href="mailto:email@tutsandtips.com">email@tutsandtips.com</a>
The above code will create the following:
Email Hyperlink with Title: The following code creates an email link with title. When you bring the cursor over the email address, a small title box will be displayed. You can change the title as you wish.
<a href="mailto:email@tutsandtips.com" title="Send Us an Email">email@tutsandtips.com</a>
The above code will create the following:
Email Hyperlink with Subject Line: The following code creates an email link with a subject line. This will be useful if you want to have a specific subject line for the emails you get from a certain web page.
<a href="mailto:email@tutsandtips.com?subject=Email%20-%20Contact%20Page" title="Send Us an Email">email@tutsandtips.com</a>
The above code will create the following:
In the above example, the subject line is "Email - Contact Page", and note that for spaces between words you should use %20 to avoid browser display issues.
Email Hyperlink with Subject and Body Lines: The following code creates an email link with a subject line and a descriptive note in the email body.
<a href="mailto:email@tutsandtips.com?subject=Email%20-%20Contact%20Page&body=This email comes from the contact page of your website." title="Send Us an Email">email@tutsandtips.com</a>
The above code will create the following:
If you click on the above email link, you will see how it pre-populates the subject and body fields. You can use such email hyperlinks in "tell a friend" type of links such as the below one.
As you see, we didn't include an email since this is a tell a friend link and the visitors will insert their friends' email address when the email window opens.
You can add a new line in the email body with %0A. If you need additional formatting in your emails, you should consider using a contact form instead of a basic mailto link.
Email Hyperlink with CC and BCC: You can also add carbon copy and blind carbon copy into your email links. The following code populates CC and BCC fields of the email.
<a href="mailto:email@tutsandtips.com?subject=Website%20Inquiry&cc=joe@tutsandtips.com&bcc=jane@tutsandtips.com">email@tutsandtips.com</a>
Email Hyperlink for Multiple Recipients: You may also need to include more than one email address to receive the email and to do that, you simply separate the email addresses by a comma.
<a href="mailto:joe@tutsandtips.com,jane@tutsandtips.com?subject=Website%20Inquiry">inquiry@tutsandtips.com</a>