Featured

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.

mailto web development

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!

Bagikan artikel ini

Twitter LinkedIn

Artikel Terkait