Cara Membuat Form Kirim Email di PHP

Sigit N
PHP, HTML (HyperText Markup Language)
Cara Membuat Form Kirim Email di PHP
Konten Halaman

Pada kesempatan kali ini saya menjelaskan bagaimana cara mengirimkan email secara sederhana dari data Form HTML dan melanjutkan data agar terkirim atau sampai di sebuah alamat email dengan bantuan PHP mail sender.

Contoh kasus di sini yang saya pakai adalah semisal memberi tahu pemilik website ketika ada user, atau pengunjung mengisi sebuah form contact yang tersedia di website dan melakukan submit maka email dirikan dengan data yang diisikan oleh si pengunjung. di sini environment yang gunakan yaitu :

  • Akun email SMTP
  • Library PHPHMailer
  • Bootstrap template HTML

pastikan kalian sudah melakukan instalasi di sistem operasi anda sebuah bahasa pemrograman PHP bagi kalian yang belum melakukan install PHP bisa ikuti penjelasan di posting Cara install PHP di Windows dan Berjalan di CMD (Command Prompt) dan baca juga post saya mengenai pembuatan form di html dan php Belajar Membuat Halaman Form Login Dengan PHP, MySql, dan HTML

Persiapan untuk mengirim Email SMTP di PHP

Apa itu SMTP ?, SMTP adalah Simple Mail Transfer Protocol sebuah standar Internet untuk transmisi email, jadi dengan protokol ini kalian bisa kirim email melalui protokol tersebut dengan PHP. yang kita butuhkan adalah akun email yang menyediakan SMTP untuk diakses secara bebas, contoh email akun yang menyediakannya dari Gmail atau akun google. Maka di penjelasan tutorial Kirim Email dengan PHP ini menggunakan SMTP dari Gmail Google. Cara mendapatnya cukup mudah kalian harus memiliki akun Gmail dan Melakukan setting di akun yang mengenai fitur SMTP di pengaturan akun, berikut cara aktivasi SMTP di akun Gmail kalian:

1. membuka akun gmail bagian setting

setting smtp di gmail

  1. pergi ke https://gmail.com
  2. klik tombol gear pada pojok kanan bagian atas
  3. kemudian klik tombol “Lihat semua setelan”

setting smtp di gmail

  1. klik menu “Penerusan dan POP/IMAP”
  2. lalu pilih opsi “Aktifkan IMAP”
  3. dan simpan perubahannya dengan klik tombol “Simpan Perubahan”

Jika tidak ada kendala maka anda akan di pindah halaman ke inbox email maka settingan akun untuk SMTP di Gmail sudah berhasil. kalian bisa baca juga mengenai Konfigurasi yang disarankan Gmail SMTP dari Google

dan pastikan aplikasi settingan di akun google anda seperti ini, dengan kondisi “Izinkan aplikasi yang kurang aman: AKTIF”: ada di https://myaccount.google.com/u/1/lesssecureapps setting smtp di gmail

dan kemungkinan kedepannya akan kita update untuk menggunakan SMTP email akun selain google karena ada issue update di 30 mei 2022

2. Menyiapkan Library PHPHMailer

untuk mendapatkan PHPHMailer kalian bisa menggunakan composer atau bisa langsung mendownloadnya mengakses repo GitHub di https://github.com/PHPMailer/PHPMailer dengan mendonload codenya berupa zip dan di ekstrak di folder project kita ini berikut cara download dari Repo GitHub berbentuk file zip:

pilih code download zip di github

  1. kunjungi https://github.com/PHPMailer/PHPMailer
  2. pilih tombol “Code” yang berwarna hijau dan drop down

pilih tombol “Download ZIP”

  1. pilih tombol “Download ZIP”

pilih tombol “Download ZIP”

  1. setelah di Download mari kita extract file zipnya dan rename nama folder menjadi “PHPMailer” jika berhasil berikut ini file isi zip dari PHPMailer isi file phpmailer

3. Mencoba Menjalankan PHPMailer di PHP

Pengetesan PHPMailer di project kita dengan menggunakan code PHP sebagai berikut :

<?php
require_once("phpmailer/src/PHPMailer.php");
require_once("phpmailer/src/SMTP.php");

$mail = new PHPMailer\PHPMailer\PHPMailer();
$mail->SMTPDebug = 3;
$mail->isSMTP();
$mail->Host = "smtp.gmail.com";
$mail->SMTPAuth = true;
$mail->Username = "[email protected]";
$mail->Password = "CaraKirimEmail";
$mail->SMTPSecure = "ssl";
$mail->Port = 465;
$mail->From = "[email protected]";
$mail->FromName = "Mimin Pemburukode.com";

$mail->addAddress("[email protected]", "Kirim Email XYZ");
$mail->isHTML(true);
$mail->Subject = "PHP Mailer testing";
$mail->Body = "<i>Hallo ini pesan dari PHP dengan PHPMailer </i>";
$mail->AltBody = "ini pesan dari PHPHMailer localhost";

if(!$mail->send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Berhasil Mengirim Email Dengan PHP";
}

Penjelasan :

  • require_once("phpmailer/src/PHPMailer.php"); : melakukan import atau memanggil file yg lain berupa library PHPMailer
  • require_once("phpmailer/src/SMTP.php"); : bagian ini melakukan import untuk mengirim email dengan fungsi PHPMailer SMTP
  • $mail = new PHPMailer\PHPMailer\PHPMailer(); :setelah berhasil import library PHPMailer maka akan ada class parent nya dan menurunkan ke variable $mail
  • $mail->isSMTP(); : memilih type SMTP untuk mengirim email
  • $mail->Host = "smtp.gmail.com"; : memberikan value host SMTP disini saya menggunakan host yang disarankan Gmail
  • $mail->SMTPAuth = true; : memberi value true untuk autentikasi
  • $mail->Username = "[email protected]"; : user yangdisgunakan atau email yang kalian gunakan untuk mengirimkan Email
  • $mail->Password = "CaraKirimEmail"; : ini password dari user gmail
  • $mail->SMTPSecure = "ssl"; : protocol yang digunakan adalah ssl Secure Socket Layer
  • $mail->Port = 465; : bagian ini untuk port SMTP mana yang akan digunakan di Gmail
  • $mail->From = "[email protected]"; : usahakan sama dengan yang kita gunakan maka disamakan dengan username kita
  • $mail->FromName = "Mimin Pemburukode.com"; : from name disini untuk dimunculkan di inbox penerima
  • $mail->addAddress("[email protected]", "Kirim Email XYZ"); : ini bagian email tujuan dan nama penerima
  • $mail->isHTML(true); : bagian ini berupa html atau tidak
  • $mail->Subject = "PHP Mailer testing"; : subject atau judul dari email yang akan kita kirim
  • $mail->Body = "<i>Hallo ini pesan dari PHP dengan PHPMailer </i>"; : isi body jika menggunakan HTML tag
  • $mail->AltBody = "ini pesan dari PHPHMailer localhost"; : alternatif jika html tidak bisa di muat
  • if(!$mail->send()) { : pengecekan jika bagian ketika email tidak berhasil dikirim
  • . $mail->ErrorInfo; : menampilkan info error jika gagal dikirim
  • Ketika kita mengaktifkan mode debug, memberi value 3 $mail->SMTPDebug = 3;, Maka jika berhasil mengirimkan email dengan PHP dan PHPMailer program kodingan PHP yang kita buat diatas mengembalikan text seperti ini :
2022-04-23 22:18:32 Connection: opening to ssl://smtp.gmail.com:465, timeout=300, options=array()
2022-04-23 22:18:32 Connection: opened
2022-04-23 22:18:32 SERVER -> CLIENT: 220 smtp.gmail.com ESMTP nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:32 CLIENT -> SERVER: EHLO php-kirim-email.local
2022-04-23 22:18:33 SERVER -> CLIENT: 250-smtp.gmail.com at your service, [36.78.219.238]250-SIZE 35882577250-8BITMIME250-AUTH LOGIN PLAIN XOAUTH2 PLAIN-CLIENTTOKEN OAUTHBEARER XOAUTH250-ENHANCEDSTATUSCODES250-PIPELINING250-CHUNKING250 SMTPUTF8
2022-04-23 22:18:33 CLIENT -> SERVER: AUTH LOGIN
2022-04-23 22:18:33 SERVER -> CLIENT: 334 VXNlcm5hbWU6
2022-04-23 22:18:33 CLIENT -> SERVER: [credentials hidden]
2022-04-23 22:18:33 SERVER -> CLIENT: 334 UGFzc3dvcmQ6
2022-04-23 22:18:33 CLIENT -> SERVER: [credentials hidden]
2022-04-23 22:18:33 SERVER -> CLIENT: 235 2.7.0 Accepted
2022-04-23 22:18:33 CLIENT -> SERVER: MAIL FROM:<[email protected]>
2022-04-23 22:18:34 SERVER -> CLIENT: 250 2.1.0 OK nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:34 CLIENT -> SERVER: RCPT TO:<[email protected]>
2022-04-23 22:18:34 SERVER -> CLIENT: 250 2.1.5 OK nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:34 CLIENT -> SERVER: DATA
2022-04-23 22:18:34 SERVER -> CLIENT: 354 Go ahead nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:34 CLIENT -> SERVER: Date: Sat, 23 Apr 2022 22:18:32 +0000
2022-04-23 22:18:34 CLIENT -> SERVER: To: Kirim Email XYZ <[email protected]>
2022-04-23 22:18:34 CLIENT -> SERVER: From: "Mimin Pemburukode.com" <[email protected]>
2022-04-23 22:18:34 CLIENT -> SERVER: Subject: PHP Mailer testing
2022-04-23 22:18:34 CLIENT -> SERVER: Message-ID: <[email protected]>
2022-04-23 22:18:34 CLIENT -> SERVER: X-Mailer: PHPMailer 6.6.0 (https://github.com/PHPMailer/PHPMailer)
2022-04-23 22:18:34 CLIENT -> SERVER: MIME-Version: 1.0
2022-04-23 22:18:34 CLIENT -> SERVER: Content-Type: multipart/alternative;
2022-04-23 22:18:34 CLIENT -> SERVER: boundary="b1_ePpM65VnDMtiJW068lWZ0xPv08h0b34FXZCrEArGg"
2022-04-23 22:18:34 CLIENT -> SERVER: Content-Transfer-Encoding: 8bit
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: This is a multi-part message in MIME format.
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: --b1_ePpM65VnDMtiJW068lWZ0xPv08h0b34FXZCrEArGg
2022-04-23 22:18:34 CLIENT -> SERVER: Content-Type: text/plain; charset=us-ascii
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: ini pesan dari PHPHMailer localhost
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: --b1_ePpM65VnDMtiJW068lWZ0xPv08h0b34FXZCrEArGg
2022-04-23 22:18:34 CLIENT -> SERVER: Content-Type: text/html; charset=us-ascii
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: <i>Hallo ini pesan dari PHP dengan PHPMailer </i>
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: --b1_ePpM65VnDMtiJW068lWZ0xPv08h0b34FXZCrEArGg--
2022-04-23 22:18:34 CLIENT -> SERVER:
2022-04-23 22:18:34 CLIENT -> SERVER: .
2022-04-23 22:18:35 SERVER -> CLIENT: 250 2.0.0 OK 1650752313 nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:35 CLIENT -> SERVER: QUIT
2022-04-23 22:18:35 SERVER -> CLIENT: 221 2.0.0 closing connection nk8-20020a17090b194800b001d954837197sm199510pjb.22 - gsmtp
2022-04-23 22:18:35 Connection: closed
Berhasil Mengirim Email Dengan PHP

Membuat Contact Form Email dari template Bootstrap

Setelah menyiapkan akun email dari gmail google tahap selanjutnya kita merancang sebuah form HTML dari template Bootstrap yang kita butuhkan untuk form contact yaitu form input name, nomor telepon, email pengirim, dan pesan text. berikut ini gambaran mockup untuk Contact Form HTML :

mockup Contact Form HTML

1. Download Template Bootstrap 5

Untuk mendapatkan file Booststrap 5, bisa mengunjungi link berikut https://getbootstrap.com/docs/5.0/getting-started/download/ atau klik disini untuk langsung mendaparkan file zip template boostrap

2. HTML Form Contact Bootstrap

Berikut ini HTML yang kita pakai sesuai dengan mockup Form contact kita buat, disini saya masih menggunakan html dan belum melakukan coding di file .php , make file berikut disimpan menjadi index.html :

<!-- index.html -->
<!DOCTYPE html>
<html lang="id-ID">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <title>Kirim email dengan Form HTML</title>
  </head>
  <body>
    <div class="container">
      <main>
        <div class="p-3">
          <div class="text-center">
            <h4 class="mb-3">Contact Form</h4>
          </div>
          <form>
            <div class="row g-3">
              <div class="col-12">
                <label for="name" class="form-label">Nama :</label>
                <input
                  type="text"
                  class="form-control"
                  id="nama"
                  placeholder="Nama Kamu"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="phone" class="form-label">Nomer Telephone :</label>
                <input
                  type="number"
                  class="form-control"
                  id="phone"
                  placeholder="Nomor yang bisa dihubungi"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="email" class="form-label">Email :</label>
                <input
                  type="email"
                  class="form-control"
                  id="email"
                  placeholder="Email kamu untuk kami balas"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="email" class="form-label">Pesan dan Kesan :</label>
                <div class="form-floating">
                  <textarea
                    class="form-control"
                    placeholder="Leave a comment here"
                    id="floatingTextarea2"
                    style="height: 100px"
                  ></textarea>
                  <label for="floatingTextarea2">Pesan yang disampaikan</label>
                </div>
              </div>
            </div>

            <hr class="my-4" />

            <button class="w-100 btn btn-primary btn-lg" type="submit">
              Kirim
            </button>
          </form>
        </div>
      </main>
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

hasil dari coding HTML diatas tadi : Contact Form HTML Bootsrap vesion 5

Integrasi HTML dan PHP dengan SMTP PHPmailer untuk Form kirim email

Ditahan ini mari kita gabungkan kodingan dari pengetesan PHPMailer tadi dengan coding HTML hasil dari mockup yang kita gunakan, berikut ini kodingan antara PHP dan PHPMailer untuk melakukan pengiriman email dari data Form HTML :

buat file email.php dan isikan file nya dengan code berikut:

// email.php
<?php
require_once("phpmailer/src/PHPMailer.php");
require_once("phpmailer/src/SMTP.php");

session_start();

if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == 'POST') {
  $_SESSION["success"] = true;
  $_SESSION["nama"] = $_POST['nama'];

  if ( !isset($_POST['nama']) || !isset($_POST['phone']) || !isset($_POST['email']) || !isset($_POST['pesan']) ) {
      $_SESSION["success"] = false;
      $_SESSION["message"] = 'nama, phone, email, atau pesan wajib di isi';
  } else {
    $nama = $_POST['nama'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $pesan = $_POST['pesan'];

    kirimEmail($nama, $phone, $email, $pesan);
  }
}

function kirimEmail($nama, $phone, $email, $pesan){

  $kirimPesan = "ada pesan dari: ".$nama;
  $kirimPesan .= " | phone: ".$phone;
  $kirimPesan .= " | email: ".$email;
  $kirimPesan .= " | pesan: ".$pesan;

  $mail = new PHPMailer\PHPMailer\PHPMailer();
  $mail->SMTPDebug = 3;
  $mail->isSMTP();
  $mail->Host = "smtp.gmail.com";
  $mail->SMTPAuth = true;
  $mail->Username = "[email protected]";
  $mail->Password = "CaraKirimEmail";
  $mail->SMTPSecure = "ssl";
  $mail->Port = 465;
  $mail->From = "[email protected]";
  $mail->FromName = "Contact Form Pemburukode.com";

  $mail->addAddress("[email protected]", "Contact Form");
  $mail->isHTML(true);
  $mail->Subject = "PHP Mailer testing";
  $mail->Body = $kirimPesan;
  // $mail->AltBody = $kirimPesan;

  if(!$mail->send()) {
    $_SESSION["success"] = false;
    $_SESSION["message"] = 'ada masalah di server kami';
  } else {
    $_SESSION["success"] = true;
    $_SESSION["message"] = 'Berhasil menyambungkan ke Email';
  }

  return header('Location: '. $_SERVER['HTTP_REFERER']);
}

buat file index.php dan isikan file nya dengan code berikut:

// index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="id-ID">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <title>Kirim email dengan Form HTML</title>
  </head>
  <body>
    <div class="container row">
      <main class="col-6">
        <div class="p-3">
          <div class="text-center">
            <?php
              if (isset($_SESSION["message"])) {
                echo $_SESSION["message"];
                $_SESSION["message"] = null;
              }
            ?>
            <h4 class="mb-3">Contact Form</h4>
          </div>
          <form action="email.php" method="POST">
            <div class="row g-3">
              <div class="col-12">
                <label for="name" class="form-label">Nama :</label>
                <input
                  name="nama"
                  type="text"
                  class="form-control"
                  id="nama"
                  placeholder="Nama Kamu"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="phone" class="form-label">Nomer Telephone :</label>
                <input
                  name="phone"
                  type="number"
                  class="form-control"
                  id="phone"
                  placeholder="Nomor yang bisa dihubungi"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="email" class="form-label">Email :</label>
                <input
                  name="email"
                  type="email"
                  class="form-control"
                  id="email"
                  placeholder="Email kamu untuk kami balas"
                />
              </div>
            </div>

            <div class="row mt-2">
              <div class="col-12">
                <label for="email" class="form-label">Pesan dan Kesan :</label>
                <div class="form-floating">
                  <textarea
                    name="pesan"
                    class="form-control"
                    placeholder="Leave a comment here"
                    id="floatingTextarea2"
                    style="height: 100px"
                  ></textarea>
                  <label for="floatingTextarea2">Pesan yang disampaikan</label>
                </div>
              </div>
            </div>

            <hr class="my-4" />

            <button class="w-100 btn btn-primary btn-lg" type="submit">
              Kirim
            </button>
          </form>
        </div>
      </main>
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>