How to create mailto link in HTML
Using mailto is straightforward. To create a mailto link, you simply use the <a> tag in HTML. Here is the basic syntax:
<a href="mailto:recipient@example.com">Your Link Text</a>
Example
Here is a simple example of a mailto link:
<a href="mailto:example@example.com">Send Email</a>
When you click this link, it will open the default email application on your device with the recipient's email set to example@example.com.
HTML mailto Parameters
When creating a mailto link, you can use various parameters to customize the email further. Here are some common parameters:
1. Subject: To add a subject to the email, use the subject parameter:
<a href="mailto:example@example.com?subject=Your%20Subject">Send Email</a>
2. Body: To add a body text, use the body parameter:
<a href="mailto:example@example.com?body=Your%20Message%20Here">Send Email</a>
3. CC and BCC: You can also add Carbon Copy (CC) and Blind Carbon Copy (BCC) recipients:
<a href="mailto:example@example.com?cc=cc@example.com&bcc=bcc@example.com">Send Email</a>
Combining Parameters
You can combine multiple parameters in one link by using the ampersand (&) symbol:
<a href="mailto:example@example.com?subject=Subject&body=Message&cc=cc@example.com&bcc=bcc@example.com">Send Email</a>
Output
When a user clicks the link, their email application will open with:
- To: example@example.com
- CC: cc@example.com
- BCC: bcc@example.com
- Subject: Subject
- Body: Message
Examples of Mailto in HTML
Example 1. How to add Multiple Recipients?
You can also send an email to multiple recipients using commas:
<a href="mailto:example1@example.com,example2@example.com?subject=Group%20Email">Send Group Email</a>
Example 2. How to add Subject and Body
You can enhance your mailto link by adding a subject and body text. Here's how:
<a href="mailto:example@example.com?subject=Hello&body=This%20is%20a%20test%20email.">Send Email</a>
Explanation
- recipient@example.com is the email address that will receive the email.
- subject=Hello specifies the subject line of the email.
- body=This%20is%20a%20test%20email. is the pre-filled content of the email body. Note that spaces are replaced with %20.
When this link is clicked, it opens a new email draft with "Hello" as the subject and "This is a test email." as the body.
Example 3. How to add Special Characters in Subject and Body
If you need to include special characters (like spaces or punctuation) in the subject or body, you should encode these characters to ensure they are properly interpreted. For example, spaces can be replaced with %20, and line breaks can be added with %0A:
<a href="mailto:example@example.com?subject=Special%20Subject&body=Line1%0ALine2">
Send Email with Special Characters
</a>
Mailto and Spam
While mailto links are a convenient way to facilitate communication, they also come with a risk of spam. Spammers often scrape websites for email addresses, which can lead to unsolicited emails. Here are some strategies to minimize spam:
1. Masking Email Addresses
To prevent automated bots from collecting your email, consider masking it. Instead of displaying it directly, you can use JavaScript:
<script>
var user = "example";
var domain = "example.com";
document.write("<a href='mailto:" + user + "@" + domain + "'>" + user + "@" + domain + "</a>");
</script>
2. Use Contact Forms
Instead of displaying an email address, use a contact form that collects user input and sends an email behind the scenes. This prevents your email from being visible in the source code.
Frequently Asked Questions
What is the difference between a mailto link and a contact form?
A mailto link opens the user's default email client to send an email, while a contact form collects user inputs directly on the webpage, sending them via a server-side script for processing.
How do you write mailto in HTML?
To write a mailto link in HTML, use <a href="mailto:email@example.com">Email Us</a>.
What is a mailto URL?
A mailto URL is a hyperlink in HTML that opens the default email client when clicked, pre-filling the recipient's email address.
Conclusion
In summary, mailto links in HTML provide a simple and effective way to enable email communication directly from web pages. By leveraging parameters like subject, body, CC, and BCC, you can customize these links to suit user needs. Implementing strategies to counter spam risks ensures secure and user-friendly experiences
518+ registered 
