Liên kết email HTML: mailto với subject, body, cc và tel

Cách tạo liên kết email

Bắt đầu href của liên kết bằng mailto: và địa chỉ. Nhấp vào sẽ mở một thư mới gửi tới địa chỉ đó trong ứng dụng thư của người đọc.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

Bản xem trước không mở ứng dụng khác: nhấp vào một trong các liên kết này ở đó sẽ hiện địa chỉ mà nó sẽ mở. Trên một trang thật, liên kết đầu mở một email mới và liên kết thứ hai bắt đầu cuộc gọi trên điện thoại.

Dùng chính địa chỉ làm chữ liên kết. Người đọc chưa cài ứng dụng thư (thường gặp trên máy tính dùng webmail trong trình duyệt) vẫn sao chép được, còn một liên kết chỉ ghi "Gửi email cho chúng tôi" sẽ khiến họ bế tắc.

Subject, body, cc và bcc

Liên kết mailto có thể điền sẵn nhiều phần hơn của thư. Thêm tham số sau dấu ? và nối chúng bằng &, giống chuỗi truy vấn của URL:

Nhiều người nhận được đặt ở phần địa chỉ, ngăn cách bằng dấu phẩy: mailto:ana@example.com,bob@example.com.

Các giá trị phải được mã hóa URL: khoảng trắng là %20, xuống dòng là %0D%0A, & là %26 và ? là %3F. Script trong ví dụ này giải mã từng liên kết để bạn thấy ứng dụng thư nhận được gì:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

Tiêu đề Order #123 phải viết là Order%20%23123: một dấu # trần sẽ kết thúc URL tại đó, và phần nội dung thư bị mất. Cũng đừng dùng + thay cho khoảng trắng. Trong liên kết mailto, + là dấu cộng thật, và nhiều ứng dụng thư hiển thị nó đúng như vậy.

Tạo liên kết mailto bằng JavaScript

Tự mã hóa bằng tay rất dễ sai. encodeURIComponent làm việc đó cho bạn. Gõ vào các ô và liên kết bên dưới sẽ cập nhật:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent biến & thành %26 và xuống dòng thành %0A; lệnh replace biến xuống dòng thành cặp %0D%0A mà email cần. Giữ nguyên phần địa chỉ như đã gõ: @ và , được phép ở đó mà không cần mã hóa.

Liên kết điện thoại với tel: và sms:

tel: tạo liên kết bấm để gọi. Viết số kèm mã quốc gia và không có khoảng trắng trong href; phần chữ hiển thị có thể định dạng tùy ý.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

• tel:+442079460958 hoạt động từ mọi quốc gia. Một số nội địa như tel:02079460958 chỉ dùng được với người gọi trong nước đó.
• Dấu gạch nối được phép làm ký tự phân cách (tel:+1-555-123-4567); khoảng trắng không thuộc định dạng, nên hãy bỏ chúng khỏi href.
• sms: mở ứng dụng nhắn tin. Thêm nội dung tin nhắn bằng ?body= chạy được trên nhiều ứng dụng, nhưng mức hỗ trợ khác nhau, nên đừng dựa vào nó.
• Trên máy tính, tel: mở một ứng dụng gọi điện nếu đã cài (như FaceTime hoặc softphone), và không làm gì trong trường hợp ngược lại.

Safari trên iPhone tự biến số điện thoại trong văn bản thường thành liên kết. Nếu điều đó làm hỏng thứ gì đó như mã đơn hàng, hãy tắt nó bằng <meta name="format-detection" content="telephone=no">.

Thư rác và địa chỉ email

Một địa chỉ trong liên kết mailto có thể bị đọc bởi bất kỳ bot nào tải trang về. Những mẹo như viết hello [at] example [dot] com hoặc ghép địa chỉ bằng JavaScript chặn được một số công cụ thu thập đơn giản, nhưng cũng làm liên kết khó dùng hơn. Một form liên hệ, được giới thiệu trong form trong HTML, giữ địa chỉ hoàn toàn bên ngoài trang. Với hầu hết các trang web, một bộ lọc thư rác tốt cho hộp thư là cách đơn giản hơn.

Tránh <form action="mailto:...">. Cách này phụ thuộc vào ứng dụng thư của người đọc, gửi các trường ở dạng mã hóa URL khó đọc, và không cho bạn biết thư có được gửi đi hay không.

Lỗi thường gặp

• Quên mailto:. href="hello@example.com" là liên kết tương đối tới một trang mang tên địa chỉ đó.
• Khoảng trắng hoặc # chưa mã hóa trong subject hoặc body. Mã hóa giá trị bằng %20, %23 hoặc encodeURIComponent.
• Dùng + thay cho khoảng trắng. Nó hiện ra thành dấu cộng.
• Dùng ? thứ hai thay vì &. Chỉ tham số đầu tiên đứng sau ?; các tham số còn lại được nối bằng &.
• Chỉ ghi "Gửi email cho chúng tôi", khiến người dùng webmail không có gì để sao chép.
• Số điện thoại nội địa trong tel:. Hãy thêm mã quốc gia.