Mailto Link + SVG Icon

Apa itu mailto link? Mailto link atau disebut juga link send email adalah elemen interaktif yang berfungi untuk menavigasi atau mengarahkan tindakan klik pengguna menuju/membuka app mail client. Secara gamblang, link mailto berfungsi sebagai pemanggil aplikasi/program email client di sistem operasi.

Biasanya Link mailto digunakan untuk membuat widget atau tombol send email di website/blog, dengan menggunakan link mailto pengunjung blog tidak perlu meninggalkan halaman dan mengetikkan email anda secara manual untuk mengimkan feedback kepada anda (pemilik blog).

Ketika elemen interaktif yaitu link mailto diklik, jendela akan membuka software/aplikasi e-mail client yang ada di sistem operasi pengguna misalnya windows mail, microsoft ouloock untuk versi dekstop atau gmail, yahoo dan app email clients lainnya untuk versi mobile. [ads id="ads1"]
Mailto Link + Svg Mail Icon

Format HTML Link Mailto

Berikut ini adalah hyperlink mailto dalam format kode html.
<a href="mailto:yourmail@gmail.com">Send Email</a>

Keluaran (Output)

Send Email Sekilas ini mungkin terlihat sama dengan link (anchor elemen) pada umumnya, yang membedakan link mailto adalah value pada attribute href alamat yang ditunjuk oleh hyperlink mailto tidak berbasis http atau https.

Link Mailto + Icon Email SVG

<div class="mailto-link">
 <a href="mailto:cordialblogger@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><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>
</div>

CSS

<style type="text/css">
.mailto-link{
display:flex;
margin:10px 0;
}
.mailto-link a svg{
width:20px;
height:20px;
fill:#000;
margin-right:13px;
}
.mailto-link a{
padding:0;
display:flex;
color:#3367d6;
font-size:16px;
font-weight:bold;
align-items:center;
}
.mailto-link a:hover{
color:#fc4f08
}
.mailto-link a svg:hover{
fill:#fc4f08
}
</style>

Keluaran (Output)

Sekarang uji coba elemen interaktif (link mailto) di atas melalui pc atau smartphone anda untuk melihat cara kerja link mailto secara langsung. Ini berbeda dengan widget contact form yang saya share pada artikel yang lalu saya pikir cara kerja link mailto lebih mirip dengan modal dialog di javavcript.
Lebih baru Lebih lama
Close