Link Email HTML: mailto dengan Subject, Body, CC dan tel

Cara membuat link email

Awali href link dengan mailto: lalu alamat emailnya. Saat diklik, link ini membuka pesan baru ke alamat itu di aplikasi email pembaca.

<!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>

Preview tidak membuka aplikasi lain: mengklik salah satu link ini di sana menampilkan alamat yang akan dibukanya. Di halaman sungguhan, link pertama membuka email baru dan link kedua memulai panggilan di ponsel.

Pakai alamat emailnya sendiri sebagai teks link. Pembaca yang belum mengatur aplikasi email (umum di desktop yang memakai webmail di browser) tetap bisa menyalinnya, sedangkan link yang hanya bertuliskan "Email kami" membuat mereka buntu.

Subject, body, cc dan bcc

Link mailto bisa mengisi lebih banyak bagian pesan. Tambahkan parameter sesudah ? dan gabungkan dengan &, seperti query string pada URL:

Beberapa penerima ditulis di bagian alamat, dipisahkan koma: mailto:ana@example.com,bob@example.com.

Nilainya harus memakai URL encoding: spasi menjadi %20, pindah baris menjadi %0D%0A, & menjadi %26 dan ? menjadi %3F. Script di contoh ini menerjemahkan balik setiap link supaya kamu bisa melihat apa yang diterima aplikasi email:

<!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>

Subject Order #123 harus ditulis Order%20%23123: # tanpa encoding akan mengakhiri URL di situ, dan body-nya hilang. Jangan pakai + untuk spasi juga. Di link mailto, + adalah tanda plus biasa, dan banyak aplikasi email menampilkannya apa adanya.

Membuat link mailto dengan JavaScript

Encoding manual mudah salah. encodeURIComponent mengerjakannya untukmu. Ketik di kolom-kolomnya dan link di bawahnya ikut berubah:

<!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 mengubah & menjadi %26 dan pindah baris menjadi %0A; replace membuat pindah baris menjadi pasangan %0D%0A yang diharapkan email. Biarkan bagian alamat seperti yang diketik: @ dan , boleh ada di situ tanpa encoding.

Link telepon dengan tel: dan sms:

tel: membuat link untuk menelepon. Tulis nomornya dengan kode negara dan tanpa spasi di href; teks yang terlihat boleh diformat sesukamu.

<!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 berfungsi dari negara mana pun. Nomor lokal seperti tel:02079460958 hanya berfungsi untuk penelepon di dalam negara itu.
• Tanda hubung boleh dipakai sebagai pemisah (tel:+1-555-123-4567); spasi bukan bagian dari formatnya, jadi jangan tulis spasi di href.
• sms: membuka aplikasi pesan. Menambahkan pesan dengan ?body= berfungsi di banyak aplikasi, tapi dukungannya berbeda-beda, jadi jangan mengandalkannya.
• Di desktop, tel: membuka aplikasi panggilan kalau ada yang terpasang (seperti FaceTime atau softphone), dan tidak melakukan apa-apa kalau tidak ada.

Safari di iPhone otomatis mengubah nomor telepon di teks biasa menjadi link. Kalau itu merusak sesuatu seperti nomor pesanan, matikan dengan <meta name="format-detection" content="telephone=no">.

Spam dan alamat email

Alamat di link mailto bisa dibaca oleh bot mana pun yang mengunduh halamannya. Trik seperti menulis hello [at] example [dot] com atau menyusun alamat dengan JavaScript menghentikan sebagian scraper sederhana, tapi juga membuat link lebih sulit dipakai. Formulir kontak, yang dibahas di form HTML, menjauhkan alamat dari halaman sepenuhnya. Untuk kebanyakan situs, filter spam yang bagus di kotak masuk adalah jawaban yang lebih sederhana.

Hindari <form action="mailto:...">. Cara ini bergantung pada aplikasi email pembaca, mengirim isian dalam bentuk URL encoded yang sulit dibaca, dan tidak memberimu konfirmasi bahwa ada yang terkirim.

Kesalahan umum

• Lupa menulis mailto:. href="hello@example.com" adalah link relatif ke halaman yang namanya sama dengan alamat itu.
• Spasi atau # tanpa encoding di subject atau body. Encode nilainya dengan %20, %23, atau encodeURIComponent.
• Memakai + untuk spasi. Hasilnya muncul sebagai tanda plus.
• ? kedua, bukan &. Hanya parameter pertama yang ditulis sesudah ?; sisanya digabungkan dengan &.
• "Email kami" sebagai satu-satunya teks, sehingga pengguna webmail tidak punya apa pun untuk disalin.
• Nomor telepon lokal di tel:. Sertakan kode negaranya.