Ketika kita ingin membuat portfolio atau landing page, kita ingin pengunjung untuk bisa mengirimkan pesan. Pesan itu bisa dikirim ke WhatsApp, DM Instagram atau Email.
Platform platform ini punya kelebihan dan kekurangannya masing masing. Salah satunya adalah Email. Email merupakan platform (bisa jadi) social media tertua dan masih exist hingga kini. Mau apapun social medianya, email masih jadi salah satu cara untuk mengautentikasi user untuk bisa mendaftar dan masuk
Tidak hanya itu, komunikasi menggunakan email juga dinilai formal dan sering dibutuhkan untuk beberapa kondisi seperti melamar pekerjaan, menawarkan job atau promosi
Nah, pasti kita butuh penggunaan email ini website pribadi kita. Jadi ketika pengunjung tertarik dengan produk kita atai jasa kita, pengunjung tinggal masukkan nama, email dan isi pesannya sehingga bisa diterima oleh email kita
Bagaimana caranya? Yuk kita ikuti langkah langkah dibawah
Pertama. Buat form html lalu tambahkan script berikut
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
// https://dashboard.emailjs.com/admin/account
emailjs.init('YOUR_PUBLIC_KEY');
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = Math.random() * 100000 | 0;
// these IDs from the previous steps
emailjs.sendForm('contact_service', 'contact_form', this)
.then(function() {
console.log('SUCCESS!');
}, function(error) {
console.log('FAILED...', error);
});
});
}
</script>
letakkan kode diatas di antara tag <head> dan </head>
Lalu buat form seperti ini
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
di atas input mempunya property name bernama user_name, ini akan kita manfaatkan untuk mengedit email yang akan kita terima
Setelah itu, kita akan menggunakan tool bernama emailjs. sebuah cdn javascript yang memudahkan kita untuk mengirim email dari website html css static tanpa menggunakan framework seperti React, atau Vue
Kalian daftar lalu setelah itu buka dashboard, lalu kalian pilih email service
Lalu pilih Add New Service dan pilih Gmail, maka kalian akan mendapatkan Service ID, ini akan pakai saat mengatur kode yang berada di template website tadi
Lalu pilih Email Templates yang berada di sidebar, dan pilih Setting maka kalian akan melihat Template ID
Kita juga membutuhkan PUBLIC KEY, yang bisa kita lihat di Account berada di sidebar
Kita balik lagi kodingan form html yang barusan kita buat
Ganti YOUR PUBLIC KEY dengan PUBLIC KEY kalian
(function() {
// https://dashboard.emailjs.com/admin/account
emailjs.init('YOUR_PUBLIC_KEY');
})();
Lalu ganti contact_form dengan Template ID, dan contact_service dengan Service ID
emailjs.sendForm('contact_service', 'contact_form', this)
Setelah itu kita uji coba
Dan tadaaaa, email berhasil diterima
