Learn how to create functional email links that open the user's default mail client, optionally pre-filling subject and body text, while understanding basic spam mitigation strategies.
What it is
An mailto: link is a URI scheme used in HTML anchors (<a>) to initiate an email composition window. When clicked, it triggers the operating system or browser to launch the configured default email client (such as Outlook, Apple Mail, or Thunderbird) with a new message draft. The recipient address is mandatory, but you can also specify parameters like subject, body, cc, and bcc.
The mental model is simple: it is not sending an email directly from the website; it is handing off control to the local email application. Related terms include "URI scheme," "query string," and "URL encoding."
Why it matters
- User Convenience: It saves users from manually copying addresses and typing standard subjects.
- Context Preservation: Pre-filled bodies allow you to include page URLs or reference numbers automatically.
- No Backend Required: Unlike contact forms, it requires no server-side processing or database storage.
- Accessibility: Properly labeled links are easily navigable by screen readers.
Syntax or steps
The basic structure follows standard URL syntax:
- Start with
mailto:followed immediately by the email address. - Add a question mark
?to begin query parameters. - Append key-value pairs separated by ampersands
&. - Use
%20for spaces and%0Afor line breaks in text values.
Example
<p>Contact us via <a href="mailto:support@example.com?subject=Website%20Feedback&body=Hello,%0AI%20would%20like%20to%20report%20an%20issue.%0A%0APage:%20https://example.com">email</a>.</p>Part-by-part explanation:
mailto:support@example.com: Defines the recipient.?subject=...: Sets the email subject line. Note that spaces are encoded as%20.&body=...: Adds a second parameter. The&separates parameters.%0A: Represents a newline character within the body text.<a>...</a>: The anchor tag wrapping the clickable text.
Common mistakes
- Unencoded Spaces: Writing
subject=My Subjectinstead ofsubject=My%20Subject. Browsers may handle this inconsistently; always encode special characters. - Missing Question Mark: Forgetting the
?before parameters results in the entire string being treated as the email address, causing failure. - Over-reliance on Body Text: Some email clients ignore the
bodyparameter entirely. Never assume the user will see your pre-filled text. - Plain Text Exposure: Hardcoding
mailto:links exposes your email address to web scrapers, increasing spam risk.
When to use it
Compare mailto: links with HTML Contact Forms:
| Feature | Mailto Link | Contact Form |
|---|---|---|
| Spam Protection | Poor (exposed address) | Good (can add CAPTCHA/validation) |
| Setup Complexity | Very Low | Medium (requires backend) |
| User Experience | Opens external app | Stays on site |
| Data Control | None | Full logging/storage |
Use mailto: for simple personal sites or when you want to avoid server maintenance. Use forms for business sites requiring lead tracking or spam prevention.
Practice
Guided Exercise: Create a link that sends an email to info@shop.com with the subject "Order Inquiry" and a body containing "Hi, I have a question about order #12345." Ensure all spaces are correctly encoded.
Challenge: Modify your solution to include a CC address of manager@shop.com. Hint: Use the cc parameter.
Quick check
Question: What character sequence represents a space in a URL-encoded string?
Answer: %20
Summary
Email links provide a lightweight way to initiate communication without backend infrastructure, relying on the user's local email client. While convenient, they require careful URL encoding and offer little protection against spam harvesting compared to interactive forms.