HTML dan CSS

Dalam tutorial ini, kita akan membuat form sederhana untuk mengirim email menggunakan EmailJS. Form ini akan memiliki tiga parameter utama: email tujuan, subjek, dan isi pesan.

Persiapkan text editor seperti Visual Studio Code, Notepad++ dan yang sejenisnya, dan browser (Google Chrome, Mozilla Firefox, Safari dll) untuk membuka halaman website yang akan dibuat

Langkah 1: Mendaftar dan Mengatur Akun EmailJS

  1. DAFTAR DI EMAIL JS
    • Kunjungi https://emailjs.com dan daftar akun (jika belum punya).
    • Setelah mendaftar, login ke dashboard EmailJS.

    Gambar 1. Halaman depan emailjs.com
  2. BUAT EMAIL SERVICE

    • Di dashboard EmailJS, klik "Add Email Service".

      Gambar 2. Halaman menu Email Service

    • Pilih penyedia email yang kamu gunakan (misalnya Gmail, Yahoo, dll.) dan ikuti instruksi untuk menghubungkan akun email kamu.

    • Pilih Email yahoo, disini saya menggunakan email yahoo pribadi, jadi penjelasan setup email akan mengikuti pilihan email yahoo

      Gambar 3. Pilih Yahoo untuk servicenya

    • 4 Parameter yang wajib diisi, Nama default terisi Yahoo, Service otomatis terisi oleh emailJS, user email adalah alamat email yahoo milik kita, App Password adalah kode yang diberikan oleh Yahoo melalui settingan third-party app password klik link berikut https://help.yahoo.com/kb/generate-third-party-passwords-sln15241.html

      Gambar 4. Parameter yang wajib diisi, dan penjelasan untuk mendapatkan App Password pada Email Yahoo

    • Setelah klik link Third-party app password maka akan tampil halaman untuk memandu kamu mendapatkan App Password di Email Yahoo, ikut saja langkah-langkah yang ada pada panduan itu.


      Gambar 5. Panduan Cara mendapatkan generate app password pada Email Yahoo

      Kemudian langkah selanjutnya adalah Masukan Nama Apps untuk generate app password email yahoo anda, lalu tekan generate password, setelah itu kode akan terlihat dan copy paste kedalam field app password dan klik Done seperti gambar 7

      Gambar 6. Generate app password

      Gambar 7. Copy Paste kode App Password ke Form Config Service

    • Setelah berhasil mendapatkan App password lalu simpan Config Service maka Email Service berhasil dibuat, simpan service ID untuk nantinya ditempatkan pada javascript pengiriman melalui form HTML

      Gambar 8. Email Service berhasil dibuat
  3. BUAT EMAIL TEMPLATE
    • Klik "Email Templates" di dashboard.
    • Klik "Create New Template" untuk membuat template email baru.
      Gambar 9. Halaman Email Templates

    • Dalam template, gunakan variabel seperti {{to_email}}, {{subject}}, dan {{message}} yang akan diisi dari form HTML, lalu tekan tombol Save untuk menyimpan settingan email template.

      Gambar 10. Penyesuaian nama parameter pada form tambah email template

      Gambar 11. Email template berhasil dibuat, simpan template ID untuk ditempatkan pada javascript melalui form HTML

Langkah 2: Menyiapkan Bagian Frontend

  1. Buat Struktur Proyek
    • Buat folder baru untuk proyek, misalnya email-form.
    • Di dalam folder, buat file index.html, style.css, dan main.js.
    • Tambahkan EmailJS SDK dengan menghubungkannya melalui CDN di file index.html.

Langkah 3: Buat Form HTML, Style CSS dan Javascript

Buat file HTML dengan nama index.html dengan script berikut :


<html lang="en">
<head>
    <title>Email Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

        <!-- Form Email -->
        <h1>Kirim Email</h1>
        <form id="email-form">
            <label for="to_email">Email Tujuan:</label>
            <input type="email" id="to_email" name="to_email" required>

            <label for="subject">Subjek:</label>
            <input type="text" id="subject" name="subject" required>

            <label for="message">Pesan:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit" id="button">Kirim</button>
        </form>
    </div>

    <!-- Setup EmailJS -->
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>

    <!-- Public Key EmailJS -->
    <script type="text/javascript">
      emailjs.init('PUBLIC_KEY')
    </script>
    <script src="main.js"></script>
</body>
</html>

Buat file CSS dengan nama style.css dengan script berikut :


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input, textarea {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: auto;
}

button {
    margin-top: 20px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    background-color: #28a745;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

Buat file javascript dengan nama main.js dengan script berikut :


const btn = document.getElementById('button');

document.getElementById('email-form')
 .addEventListener('submit', function(event) {
   event.preventDefault();

   btn.value = 'Sending...';

   const serviceID = 'SERVICE_ID';
   const templateID = 'TEMPLATE_ID';

   emailjs.sendForm(serviceID, templateID, this)
    .then(() => {
      btn.value = 'Send Email';
      alert('Email berhasil Terkirim!');
    }, (err) => {
      btn.value = 'Send Email';
      alert(JSON.stringify(err));
    });
});

Konfigurasi User ID, Service ID, dan Template ID

  • PUBLIC_KEY: Ganti dengan Public Key yang diberikan oleh EmailJS di dashboard. yang bisa didapatkan pada Dashboard Account
  • SERVICE_ID: Ganti dengan Service ID dari email service yang kamu buat di EmailJS. lihat gambar 8
  • TEMPLATE_ID: Ganti dengan Template ID dari template email yang kamu buat di EmailJS, lihat gambar 11

Dengan langkah-langkah di atas, kamu telah membuat form sederhana untuk mengirim email menggunakan EmailJS. Form ini memiliki tiga parameter utama: email to, subject, dan body. Ketika form disubmit, EmailJS akan mengirim email sesuai dengan input yang diberikan pengguna. Pastikan untuk mengganti placeholder dengan ID yang sesuai dari akun EmailJS kamu.

Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #Programmer Full Stack, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih