Panduan Utama untuk Tautan Mailto: Sintaks, Parameter, dan Implementasi
Panduan definitif untuk tautan mailto. Pelajari sintaks lengkap, semua parameter (subjek, badan, cc, bcc), dan cara mengimplementasikannya dengan benar di HTML, Markdown, dan JavaScript.
Apa itu Tautan Mailto? (Dan Mengapa Anda Harus Menggunakannya)
Tautan mailto
adalah jenis tautan HTML yang mengaktifkan klien email default pengguna untuk mulai menulis email baru. Ini adalah skema URI (Uniform Resource Identifier) untuk alamat email, yang distandarisasi dalam RFC 6068.
Daripada membawa pengguna ke halaman web lain, tautan mailto
membuka jendela “Email Baru”, dengan alamat email penerima sudah diisi.
Keuntungan:
- Kesederhanaan: Ini adalah cara termudah untuk memungkinkan pengunjung mengirim email.
- Tanpa backend: Tidak memerlukan pemrosesan sisi server, tidak seperti formulir kontak.
- Keakraban: Pengguna berinteraksi dengan klien email mereka sendiri, yang sudah mereka kenal.
Kerugian:
- Ketergantungan klien: Mengharuskan pengguna untuk memiliki klien email yang dikonfigurasi di perangkat mereka.
- Spam: Alamat email dalam teks biasa dapat dikumpulkan oleh bot spam.
Anatomi Tautan Mailto: Dari Sederhana hingga Kompleks
Dasar-dasar: mailto:[email protected]
Bentuk paling sederhana dari tautan mailto
hanya menyertakan alamat email penerima.
<a href="mailto:[email protected]">Hubungi Kami</a>
Menambahkan Parameter Tunggal: Tanda Tanya ?
Untuk menambahkan parameter seperti subjek atau isi, Anda mulai dengan tanda tanya (?
) setelah alamat email. Parameter pertama biasanya adalah subject
.
<a href="mailto:[email protected]?subject=Pertanyaan produk">Kirim Pertanyaan</a>
Menambahkan Beberapa Parameter: Ampersand &
Untuk menambahkan lebih dari satu parameter, pisahkan dengan ampersand (&
).
<a href="mailto:[email protected]?subject=Pertanyaan produk&body=Halo, saya tertarik dengan...">Kirim Pertanyaan Rinci</a>
Penting: Hanya parameter pertama yang menggunakan ?
. Semua parameter berikutnya harus menggunakan &
.
Penyelaman Mendalam ke Semua Parameter Mailto
Ini adalah inti dari artikel ini. Setiap parameter menyertakan contoh kode.
subject
: Mengisi Baris Subjek Sebelumnya
Mengisi subjek email sebelumnya. Ingatlah untuk mengkodekan karakter khusus. Misalnya, spasi menjadi %20
.
<a href="mailto:[email protected]?subject=Permintaan%20Penawaran">Minta Penawaran</a>
body
: Mengisi Teks Isi dan Menangani Baris Baru (%0A
)
Mengisi isi email sebelumnya. Ini adalah parameter yang paling rawan kesalahan karena pengkodean. Baris baru harus dikodekan sebagai %0A
.
Contoh dengan baris baru:
<a href="mailto:[email protected]?subject=Laporan%20Bug&body=Akun%20saya%0A---%0ADetail%20bug:">Laporkan Bug</a>
Ini akan membuat isi email yang terlihat seperti ini:
Akun saya
---
Detail bug:
cc
& bcc
: Menambahkan Penerima Salinan Karbon dan Salinan Karbon Tersembunyi
Anda dapat menambahkan penerima di cc
(salinan karbon) dan bcc
(salinan karbon tersembunyi).
<a href="mailto:[email protected][email protected]&[email protected]">Kirim Laporan</a>
Beberapa Penerima: Cara Menambahkan Lebih dari Satu Alamat Email
Untuk mengirim ke beberapa penerima di bidang to
, cc
, atau bcc
, cukup pisahkan dengan koma (,
).
<a href="mailto:[email protected],[email protected]?subject=Upaya%20Bersama">Hubungi Penjualan & Pemasaran</a>
Menyatukan Semuanya: Contoh Dunia Nyata
Berikut adalah contoh kompleks yang menggabungkan semua parameter.
<a href="mailto:[email protected][email protected]&[email protected]&subject=Subjek%20Email&body=Ini%20adalah%20isi%20email.%0ADengan%20baris%20baru.">Contoh Lengkap</a>
mailto:[email protected]
: Penerima utama.[email protected]
: Parameter pertama, untuk salinan, menggunakan?
.&[email protected]
: Parameter kedua, untuk salinan tersembunyi, menggunakan&
.&subject=Subjek%20Email
: Parameter ketiga, subjek, menggunakan&
. Perhatikan%20
untuk spasi.&body=...
: Parameter keempat, isi, menggunakan&
. Perhatikan%0A
untuk baris baru.
Bosan mengkodekan ini secara manual dan khawatir tentang kesalahan pengkodean? Generator Tautan Mailto gratis kami membuat tautan yang sempurna dan bebas kesalahan dalam hitungan detik.
Cara Membuat Tautan Mailto di Lingkungan Favorit Anda
Cara membuat tautan mailto di HTML
Metode standar, menggunakan tag <a>
.
<a href="mailto:[email protected]">Kirim Email</a>
Cara menambahkan tautan mailto di Markdown
Sintaks Markdown untuk tautan berfungsi dengan sempurna.
[Kirim Email](mailto:[email protected])
Cara membuat tautan mailto menggunakan JavaScript
Anda dapat membuat dan memanipulasi tautan mailto secara dinamis di DOM.
const email = '[email protected]';
const subject = 'Subjek dinamis';
const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;
// Untuk mengarahkan pengguna
window.location.href = mailtoLink;
// Atau untuk mengatur href dari tautan yang ada
const linkElement = document.getElementById('tautan-kontak-saya');
linkElement.href = mailtoLink;
Kesimpulan: Anda Sekarang adalah Master Mailto
Anda telah mempelajari sintaks, parameter, dan praktik terbaik untuk membuat tautan mailto
yang tangguh. Mereka adalah alat yang kuat dan sederhana untuk komunikasi langsung. Untuk memastikan tautan Anda selalu sempurna, tandai alat generator kami!