Link to email (mailto)

Basic Syntax of Mailto Links

In HTML, creating a mailto link uses the <a> tag's href attribute, starting with mailto:. The basic syntax is as follows:

<a href="mailto:someone@example.com">Send Email</a>

Clicking this link will open the user's default email client and automatically fill in the recipient's address. If the user does not have an email client installed, the browser may prompt them to choose another method to handle the request.

Adding Multiple Recipients

You can specify multiple recipients in a mailto link by separating them with commas:

<a href="mailto:someone@example.com,another@example.com">Send to Multiple Recipients</a>

Note: Do not add spaces after commas, as some email clients may fail to parse the addresses correctly.

Adding an Email Subject

Use the subject parameter to preset the email subject:

<a href="mailto:someone@example.com?subject=This is the Subject">Email with Subject</a>

If the subject contains spaces or special characters, URL encoding is required:

<a href="mailto:someone@example.com?subject=Meeting%20Invitation">Encoded Subject</a>

Adding Email Body Content

Use the body parameter to preset the email body content:

<a href="mailto:someone@example.com?body=This is the email body content">Email with Body</a>

The body content can include line breaks (%0D%0A represents a carriage return and line feed):

<a href="mailto:someone@example.com?body=First line%0D%0ASecond line%0D%0AThird line">Multi-line Body</a>

Combining Multiple Parameters

Multiple parameters can be used simultaneously by connecting them with &:

<a href="mailto:someone@example.com?subject=Test Email&body=This is a test email%0D%0APlease review">Complete Mailto Link</a>

Adding CC and BCC

Use the cc and bcc parameters to set carbon copy and blind carbon copy recipients:

<a href="mailto:someone@example.com?cc=cc@example.com&bcc=bcc@example.com">With CC and BCC</a>

Practical Examples

Website Contact Form

<a href="mailto:contact@company.com?subject=Website Inquiry&body=Dear Customer Service,%0D%0A%0D%0AI would like to inquire about...">Contact Us</a>

User Feedback Button

<button onclick="window.location.href='mailto:feedback@site.com?subject=User Feedback&body=My suggestion is:'">Submit Feedback</button>

Content Sharing Link

<a href="mailto:?subject=Shared Article&body=I found this interesting article:%0D%0Ahttps://example.com/article">Share with Friends</a>

Handling Special Characters

When email content contains special characters, URL encoding is necessary:

function createMailtoLink(email, subject, body) {
  const encodedSubject = encodeURIComponent(subject);
  const encodedBody = encodeURIComponent(body);
  return `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;
}

// Example usage
const mailtoLink = createMailtoLink(
  "someone@example.com",
  "Special Character Test",
  "This is an email containing &, ?, =, and other special characters"
);

Browser Compatibility Considerations

Different browsers may handle mailto links differently:

1. Some mobile browsers may ignore the body parameter
2. Character length limits: IE has a 2083-character limit
3. Certain security settings may prevent mailto links from automatically opening the email client

Techniques to Enhance User Experience

Adding Icons and Styles

<style>
  .mail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #4285f4;
    color: white;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

<a href="mailto:contact@example.com" class="mail-link">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </svg>
  Send Email
</a>

Fallback Solutions

For users who may not have an email client configured:

<a href="mailto:contact@example.com" onclick="return checkMailClient()">Contact Us</a>

<script>
  function checkMailClient() {
    const lastActive = Date.now();
    setTimeout(() => {
      if (Date.now() - lastActive < 200) {
        window.location.href = "/contact-form";
      }
    }, 100);
    return true;
  }
</script>

Security Considerations

1. Avoid exposing email addresses directly on the page to prevent scraping:

<script>
  document.write('<a href="mailto:' + 
    ['contact', 'example.com'].join('@') + 
    '">Contact Us</a>');
</script>

2. Using JavaScript to dynamically generate mailto links can reduce spam

3. Consider using contact forms instead of direct mailto links, especially for public websites

Advanced Use Cases

Pre-filling Dynamic Content

function sendFeedback(productId) {
  const productName = document.getElementById(`product-${productId}`).innerText;
  const mailto = `mailto:support@example.com?subject=Product Feedback: ${encodeURIComponent(productName)}&body=I have the following feedback about the product:`;
  window.location.href = mailto;
}

Combining with Form Data

<form id="contact-form">
  <input type="text" id="name" placeholder="Your Name">
  <textarea id="message" placeholder="Message"></textarea>
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
  function submitForm() {
    const name = document.getElementById('name').value;
    const message = document.getElementById('message').value;
    const mailto = `mailto:contact@example.com?subject=Message from ${encodeURIComponent(name)}&body=${encodeURIComponent(message)}`;
    window.location.href = mailto;
  }
</script>

Mobile Adaptation Issues

On mobile devices, mailto links may encounter the following issues:

1. Some mobile browsers ignore the body parameter
2. Stricter character limits
3. May display an app selector instead of directly opening the email app

Solution:

// Detect mobile devices and provide alternative solutions
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  document.getElementById('email-link').href = "/mobile-contact";
}

Alternatives to Mailto Links

When mailto doesn't meet requirements, consider:

1. Using third-party email API services
2. Implementing web-based email submission forms
3. Using customer service system interfaces

<!-- Example using Formspree or similar services -->
<form action="https://formspree.io/f/your-form-id" method="POST">
  <input type="email" name="email" placeholder="Your Email">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Testing and Debugging Tips

1. Test mailto links across different browsers and devices
2. Check handling of special characters and long content
3. Verify URL encoding is correct
4. Test fallback solutions when no default email client is present

// Console test for mailto links
console.log('mailto:test@example.com?subject=Test&body=This is a test message');

Performance Optimization Suggestions

1. Avoid generating numerous mailto links during page load
2. Use lazy loading for dynamic content
3. Consider event delegation for handling multiple mailto links

// Use event delegation for dynamically generated mailto links
document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('dynamic-mailto')) {
    const userId = e.target.dataset.userId;
    window.location.href = `mailto:user${userId}@example.com`;
  }
});

Accessibility Considerations

1. Provide meaningful text for mailto links
2. Offer additional contextual information
3. Ensure keyboard operability

<a href="mailto:accessibility@example.com" aria-label="Send email to accessibility support team">
  <span aria-hidden="true">✉️</span>
  <span class="sr-only">Send email to accessibility support team</span>
</a>

Internationalization Handling

For multilingual websites, email content may need to vary based on user language:

function getLocalizedMailto(lang) {
  const translations = {
    en: {
      subject: "Contact",
      body: "Hello, I would like to..."
    },
    zh: {
      subject: "联系",
      body: "您好，我想..."
    }
  };
  
  const t = translations[lang] || translations.en;
  return `mailto:contact@example.com?subject=${encodeURIComponent(t.subject)}&body=${encodeURIComponent(t.body)}`;
}

Integration with CRM Systems

Mailto links can be integrated with customer relationship management systems:

<a href="mailto:client123@example.com?subject=RE:%20Project Update&body=Dear Client,%0D%0A%0D%0ARegarding your inquiry about the project...&cc=sales@example.com" data-crm-id="12345">Follow Up with Client</a>

Tracking Mailto Link Clicks

Use JavaScript to track clicks on mailto links:

document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
  link.addEventListener('click', function() {
    ga('send', 'event', 'Email', 'click', this.href);
  });
});

Best Practices for Mailto Links

1. Always include the subject parameter to improve email identification
2. Keep the body parameter concise and clear
3. Clearly indicate in the link text that it will open an email client
4. Add visual emphasis to important mailto links
5. Provide alternative contact methods for mobile users

<div class="contact-options">
  <a href="mailto:help@example.com" class="primary-contact">Send Email</a>
  <span class="secondary-contact">Or call: 400-123-4567</span>
</div>