In this post, I will show you how to create a mailto link in HTML. This is generally known as an email link. If someone clicks the email link, it will take them to their default email client such as Gmail, Yahoo, Microsoft/Outlook, etc. And some of the fields such as “To, Subject, etc” will be pre-populated. This is what you’re going to build in this post.
Also, I will show you some advanced customization options. Let’s get started.
To create a mailto link use the following HTML code:
<a href="mailto:email@example.com">Email Me</a> <!-- or --> <a href="mailto:firstname.lastname@example.org">email@example.com</a>
These two lines create links labeled “Email Me” & “firstname.lastname@example.org” respectively. If someone clicks any of the links, it will open the user’s default email client with the “to” field pre-populated with “email@example.com.”
See the following code to create an HTML mailto link that prepopulates the email subject.
<a href="mailto:firstname.lastname@example.org?subject=About%20your%20service">Email Us</a>
After clicking the “Email Us” link, it will prepopulate the “To” & “Subject” fields. (as you see below)
<a href="mailto:email@example.com?subject=About%20your%20service&body=Hello,%20How%20are%20you">Email Us</a>
It looks like the following screenshot after I clicked the email link:
The following code prepopulates the to, cc, bcc, subject & body:
<a href="mailto:firstname.lastname@example.orgemail@example.comfirstname.lastname@example.org&subject=About%20your%20service&body=Hello,%20How%20are%20you">Email Me</a>
Upon clicking the “Email Me” link, it looks like the screenshot below.
- How to add a link in HTML?
- How to open a link in a new tab in HTML?
- How to create an HTML download link?
- What is the difference between a link & button?
- How to create an HTML button that works like a link?
- How to make a div clickable link?
- How to create HTML anchor links that jump to another section?
- How to create an HTML mailto link (including email subject)?
- How to center a link in HTML & CSS?
- How to deactivate links using CSS?
- How to remove the underline from a link?
I showed you how you can prepopulate all the email fields one by one using the mailto link. You may need to customize the “Subject & Body” fields. If you have not noticed, here the “%20” creates the space.
If you have any questions related to the HTML mailto link, let me know.