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.

By submitting your email, you agree to receive email messages from us, and to our privacy policy.

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.

email@tutsandtips.com

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@tutsandtips.com

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@tutsandtips.com

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:

email@tutsandtips.com

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:

email@tutsandtips.com

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.

Tell a Friend

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@tutsandtips.com

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>

inquiry@tutsandtips.com

f t g+ in