Cara Membuat Contact Form Sederhana Bagi Pemula

Posted by

Supaya web anda menjadi lebih profesional maka sediakan contact form sebagai media komunikasi antara anda dengan user.

Mungkin anda berfikir, kan sudah ada social media?

Jika kita lihat dan amati, web -web besar jarang yang menggunakan media social sebagai media komunikasi mereka.

Kenapa?

Karena sistem komunikasi di social media yang mana arusnya sangat deras, akan sulit untuk mengatur dan memaintain komunikasi yang ada.

Oleh sebab itu mereka pasti menyediakan contact form sebagai salah satu lini komunikasi, selain telepon dan live chat tentunya.

Simple Contact Form

Jika anda ingin membuat contact form, anda bisa menggunakan berbagai template yang bertebaran di internet, mulai dari yang gratisan hingga yang berbayar.

Jika anda hanya butuh contact form yang simple dan sudah bisa mem-validasi user input, saatnya kita have fun dengan code berikut.

A.  HTML Code

Sebagai awal, kita perlu menentukan input apa saja yang kita butuhkan dari user untuk menjalin komunikasi dengan mereka.

Di sini saya hanya akan menggunakan basic input sebagai berikut.

  • Name
    Sebagai identifikasi user
  • Email
    Agar saya bisa me-reply pesan dari user
  • Subject
    Sebagai identifikasi prioritas
  • Message
    Isi dari apa yang ingin mereka sampaikan

1.  Form Input

Untuk membuat form input saya akan menggunakan tag form dengan attribut sebagai berikut.

 <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST"> 

Supaya semua data di proses pada halaman yang sama, maka pada atribut action saya menggunakan php dengan code $_SERVER["PHP_SELF"]dan saya lakukan sanitasi dengan fungsi htmlspecialchars().

Selanjutnya saya akan menggunakan tag label dibandingkan menulis langsung kata – kata name, email, subject, dan message.

Kenapa?

Karena dengan menggunakan tag maka akan lebih mudah untuk melakukan kustomisasi terhadap elemen tersebut.

Lalu untuk tag input saya menggunakan php untuk mendefinisikan nilai dari atribut value.

Hal ini saya lakukan agar contact form ini lebih dinamis, dimana ketika terjadi kesalahan, user tidak perlu mengisi ulang lagi semua form input yang ada.

Lalu untuk masing – masing kolom input, perlu kita tambahkan template untuk menampilkan error terkait dengan masing – masing kolom input tersebut.

Sebagai contoh, berikut ini code untuk object name.

  
<label for="name">Name:</label>
<input type="text" name="name" value="<?php echo $name; ?>" required> 
<!-- untuk menampilkan error jika terjadi kesalahan penginputan nama --> 
<p><?php if(isset($name_error)) echo $name_error; ?></p><br>
 

Dan berikut ini contoh untuk form input untuk ke empat object di atas.

 
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
  <label for="name">Name:</label>
  <input type="text" name="name" value="<?php echo $name; ?>" required>
  <p><?php if(isset($name_error)) echo $name_error; ?></p><br>
  
  <label for="email">Email:</label>
  <input type="email" name="email" value="<?php echo $email; ?>" required>
  <p><?php if(isset($email_error)) echo $email_error; ?></p><br>
  
  <label for="subject">Subject:</label>
  <input type="text" name="subject" value="<?php echo $subject; ?>" required>
  <p><?php if(isset($subject_error)) echo $subject_error; ?></p><br>
  
  <label for="message">Message:</label>
  <textarea name="message" required><?php echo $message; ?></textarea>
  <p><?php if(isset($message_error)) echo $message_error; ?></p><br>
  
  <input type="submit" name="submit" value="Submit">
</form>
 

Loh, kok tag textarea beda sendiri strukturnya?

Tag textarea berbeda dari rekannya yang lain bukan berarti karena dia anti – mainstream yah. Hal ini karena tag textarea tidak memiliki atribut value.

Oleh sebab itu saya define value di luar dari tag tersebut.

2.  Sent Notification

Selanjutnya saya akan membuat template untuk notifikasi kepada user, apakah pesan mereka berhasil di kirim atau tidak.

Jangan sampai pengunjung kita lelah menunggu balasan email dari kita, sedangkan pesan mereka ternyata tidak pernah terkirim!

Hal tersebut bisa di sebabkan oleh berbagai faktor seperti koneksi user yang kurang baik, server mengalami timed-out, dan lain sebagainya.

Untuk membuat notifikasi tersebut akan saya bahas di segmen PHP Code di bawah. Pada segmen ini saya hanya akan membuat template untuk menampilkan notifikasi saja.

Untuk menampilkan notifikasi, saya buat dengan code berikut ini.


<?php echo '<h3>'.$notif.'</h3>'; ?>
 

3.  HTML Set

Dari semua code di atas, jika kita susun dan gabungkan kurang lebih akan seperti berikut ini.

 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
  <title>contact form</title>
  <meta charset="utf-8"> 
</head>
 
<body>
  <?php echo '<h3>'.$notif.'</h3>'; ?>
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    <label for="name">Name:</label>
    <input type="text" name="name" value="<?php echo $name; ?>" required>
    <p><?php if(isset($name_error)) echo $name_error; ?></p><br />
 
    <label for="email">Email:</label>
    <input type="email" name="email" value="<?php echo $email; ?>" required>
    <p><?php if(isset($email_error)) echo $email_error; ?></p><br />
 
    <label for="subject">Subject:</label>
    <input type="text" name="subject" value="<?php echo $subject; ?>" required>
    <p><?php if(isset($subject_error)) echo $subject_error; ?></p><br />
 
    <label for="message">Message:</label>
    <textarea name="message" required><?php echo $message; ?></textarea>
    <p><?php if(isset($message_error)) echo $message_error; ?></p><br />
  
    <input type="submit" name="submit" value="Submit">
  </form> 
</body> 
</html>
 

B.  PHP Code

Selanjutnya, kita akan bermain dengan PHP code.

1.  Sanitasi Input

Sanitasi sangat penting peranannya, karena kalau kita lalai atau bahkan tidak melakukan sanitasi, maka user bisa saja melakukan injeksi code ke dalam kolom input kita.

Hasil input keempat object di atas akan saya sanitasi terlebih dahulu menggunakan fungsi dari PHP yaitu trim(), stripslashes(), dan htmlspecialchars().

Setelah itu hasil dari sanitasi saya simpan ke dalam variable agar bisa di gunakan kembali.

Code untuk proses di atas saya definisikan sebagai berikut.


 $name = htmlspecialchars(stripslashes(trim($_POST['name'])));
 $subject = htmlspecialchars(stripslashes(trim($_POST['subject'])));
 $email = htmlspecialchars(stripslashes(trim($_POST['email'])));
 $message = htmlspecialchars(stripslashes(trim($_POST['message'])));
 

Setelah hasil input bersih dari hal – hal yang berbahaya, selanjutnya kita perlu untuk melakukan validasi terhadap hasil input dari user tersebut.

Validasi bertujuan agar user memasukkan data dan informasi yang relevan. Jangan sampai user hanya menginput aaaa pada alamat email.

Bagaimana cara kita me-reply pesan dari user tersebut jika alamat emailnya aaaa saja?

Pada contoh ini saya akan menggunakan regular expression untuk melakukan validasi dengan code sebagai berikut.


if(!preg_match("/^[A-Za-z .'-]+$/", $name)){
  $name_error = 'Cek lagi nama anda'; 
}
 
if(!preg_match("/^[A-Za-z .'-]+$/", $subject)){
  $subject_error = 'Cek lagi Subject yang anda masukkan'; 
}
 
if(!preg_match("/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/", $email)){
  $email_error = 'Cek lagi email anda'; 
}
 
if(strlen($message) === 0){
  $message_error = 'Pesan anda kosong'; 
}
 

Dari kode di atas anda bisa lihat kalau saya melakukan validasi untuk tiap object hasil dari sanitasi yang telah di simpan dalam variable.

Dari validasi tersebut, maka jika user memasukkan email aaaa maka pesan error akan di tampilkan pada template html di atas.

3.  Send Mail

Setelah itu saya menggunakan fungsi php mail() untuk mengirimkan pesan tersebut ke email inbox saya.

Untuk menggunakannya anda bisa menggunakan code sebagai berikut.

 
if(isset($_POST['submit']) && !isset($name_error) && !isset($subject_error) && !isset($email_error) && !isset($message_error)){
  $to = 'email-anda@xxx.com'; // alamat email anda
  $body = " Name: $namen E-mail: $emailn Message:n $message";
 
  if(mail($to, $subject, $body)){
    $notif = '<p style="color: green">Message sent</p>';
    $name = $subject = $email = $message = '';
  } else {
    $notif = '<p>Error occurred, please try again later</p>';
  } 
}
 

Karena saya menggunakan halaman yang sama untuk untuk menampilkan form serta pemrosesannya, maka saya harus mengecek apakah ketika user mengakses halaman contact merupakan fresh load ataukah karena klik tombol submit.

Setelah itu, saya perlu mengecek apakah ada pessan error yang muncul atau tidak.

Semua proses pengecekan ini bisa anda lihat pada code if ( ) di atas.

Jika semua kondisi terpenuhi, maka code berikutnya baru bisa di proses.

Pada proses selanjutnya, php akan mencoba mengirim email dengan format mail($to, $subject, $body).

Dimana $to merupakan variable dari alamat email kita dan $subject merupakan variable yang telah kita definisikan sebelumnya.

Sedangkan $body merupakan isi / konten email yang terdiri dari object Name User, Email User, dan Message User.

4.  Notifikasi Status Pengiriman Email

Supaya user mengetahui apakan pesan yang mereka kirimkan berhasil atau tidak, maka saya akan menyertakan conditional constraint pada proses pengiriman email seperti berikut ini.

 
if(mail($to, $subject, $body)){
  $notif = '<p style="color: green">Message sent</p>';
  $name = $subject = $email = $message = ''; 
} else {
  $notif = '<p>Error occurred, please try again later</p>'; 
}
 

Anda bisa lihat pada code di atas, maka notifikasi akan ditampilkan ke user mengenai status berhasil atau tidaknya email dikirimkan.

5.  Reset Notif and Error Message

Tentunya aneh kan jika user mendapatkan pesan error namun setelah di perbaiki pesan error tau notifikasi tersebut tetap nangkring di sana.

Oleh sebab itu kita perlu menambahkan code untuk me-reset pesan error serta notifikasi yang di tampilkan dengan mendefinisikan code berikut ini.


$name_error = $subject_error = $email_error = $message_error = null; $notif = '';
 

Kita akan meletakkan code tersebut pada bagian paling atas sebelum php melakukan proses apapun.

6.  PHP Set

Dari semua PHP code di atas jika kita combine maka akan menghasilkan baris code sebagai berikut.

 
<?php
  $name_error = $subject_error = $email_error = $message_error = null; $notif = '';
  if(isset($_POST['submit'])){ 
    $name = htmlspecialchars(stripslashes(trim($_POST['name']))); 
    $subject = htmlspecialchars(stripslashes(trim($_POST['subject']))); 
    $email = htmlspecialchars(stripslashes(trim($_POST['email']))); 
    $message = htmlspecialchars(stripslashes(trim($_POST['message'])));
 
    if(!preg_match("/^[A-Za-z .'-]+$/", $name)){
      $name_error = 'Cek lagi nama anda';
    }
 
    if(!preg_match("/^[A-Za-z .'-]+$/", $subject)){ 
      $subject_error = 'Cek lagi Subject yang anda masukkan'; 
    }
 
    if(!preg_match("/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/", $email)){ 
      $email_error = 'Cek lagi email anda'; 
    }
 
    if(strlen($message) === 0){ 
      $message_error = 'Pesan anda kosong'; 
    } 
  }
 
  if(isset($_POST['submit']) && !isset($name_error) && !isset($subject_error) && !isset($email_error) && !isset($message_error)){ 
    $to = 'email-anda@xxx.com'; // edit dan masukkan email anda 
    $body = " Name: $namen E-mail: $emailn Message:n $message";
 
    if(mail($to, $subject, $body)){ 
      $notif = '<p style="color: green">Message sent</p>'; 
      $name = $subject = $email = $message = ''; 
    } else { 
      $notif = '<p>Error occurred, please try again later</p>'; 
    } 
  } 
?>
 

C.  CSS Code

Selanjutnya kita akan bermain sedikit dengan make up minimalis menggunakan CSS.

Adapun make up sederhana yang saya poleskan ke contact form agar tidak tampil memalukan di hadapan anda yaitu sebagai berikut.

 
form { 
  width: 300px; 
  margin: 5% auto; 
}
 
label { 
  width: 30%; 
  display: inline-block; 
}
 
label[for="message"] { 
  vertical-align: top; 
}
 
input, textarea { width: 65%; }
 
textarea { height: 100px; }
 
input[type="submit"] { 
  width: 30%; 
  height: 30px; 
  margin: 0 auto; 
  display: block; 
}
 
p { margin: 0; color: red; text-align: center; }
 

D.  Combining

Last but not least, kita akan menggabungkan semua code di atas menjadi satu.

Berikut ini merupakan code yang saya gabung menjadi satu file.

  
<?php 
/** * PHP Code **/ 
$name_error = $subject_error = $email_error = $message_error = null; 
$notif = '';
 
if(isset($_POST['submit'])){ 
  $name = htmlspecialchars(stripslashes(trim($_POST['name']))); 
  $subject = htmlspecialchars(stripslashes(trim($_POST['subject']))); 
  $email = htmlspecialchars(stripslashes(trim($_POST['email']))); 
  $message = htmlspecialchars(stripslashes(trim($_POST['message'])));
 
    if(!preg_match("/^[A-Za-z .'-]+$/", $name)){ 
      $name_error = 'Cek lagi nama anda'; 
    }
 
    if(!preg_match("/^[A-Za-z .'-]+$/", $subject)){ 
      $subject_error = 'Cek lagi Subject yang anda masukkan'; 
    }
 
    if(!preg_match("/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/", $email)){ 
      $email_error = 'Cek lagi email anda'; 
    }
 
    if(strlen($message) === 0){ 
      $message_error = 'Pesan anda kosong'; 
    } 
}
 
if(isset($_POST['submit']) && !isset($name_error) && !isset($subject_error) && !isset($email_error) && !isset($message_error)){ 
  $to = 'email-anda@xxx.com'; // edit dan masukkan email anda 
  $body = " Name: $namen E-mail: $emailn Message:n $message";
 
  if(mail($to, $subject, $body)){ 
    $notif = '<p style="color: green">Message sent</p>'; 
    $name = $subject = $email = $message = ''; 
  } else { 
    $notif = '<p>Error occurred, please try again later</p>'; 
  } 
} 
?>
 
<!-- - HTML Code - -->
 
<!DOCTYPE html>
 
<html lang="en">
 
<head> 
  <title>contact form</title> 
  <meta charset="utf-8">
 
  <!-- - CSS Code - --> 
  <style> 
 
  form { width: 300px; margin: 5% auto; } 
  label { width: 30%; display: inline-block; } 
  label[for="message"] { vertical-align: top; } 
  input, textarea { width: 65%; } 
  textarea { height: 100px; } 
  input[type="submit"] { width: 30%; height: 30px; margin: 0 auto; display: block; } 
  p { margin: 0; color: red; text-align: center; }
 
  </style> 
</head>
 
<body> 
  <?php echo '<h3>'.$notif.'</h3>'; ?> 
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST"> 
    <label for="name">Name:</label> 
    <input type="text" name="name" value="<?php echo $name; ?>" required> 
    <p><?php if(isset($name_error)) echo $name_error; ?></p><br />
 
    <label for="email">Email:</label> 
    <input type="email" name="email" value="<?php echo $email; ?>" required> 
    <p><?php if(isset($email_error)) echo $email_error; ?></p><br />
 
    <label for="subject">Subject:</label> 
    <input type="text" name="subject" value="<?php echo $subject; ?>" required> 
    <p><?php if(isset($subject_error)) echo $subject_error; ?></p><br />
 
    <label for="message">Message:</label> 
    <textarea name="message" required><?php echo $message; ?></textarea> 
    <p><?php if(isset($message_error)) echo $message_error; ?></p><br />
 
    <input type="submit" name="submit" value="Submit"> 
  </form> 
</body> 
</html>
 

Baris code di atas, kurang lebih muncul seperti berikut ini.

simple-contact-form
Output dari simple contact form

Final Words

Contact form di atas masih terbilang sangat sederhana, namun sudah cukup untuk berperan di web kita.

Anda bisa untuk memodifikasi lebih lanjut dengan menambahkan kolom telepon / handphone, lokasi, dan lain sebagainya.

Tampilan pun masih terbilang sederhana, sehingga anda perlu untuk memoles lagi dengan CSS agar sesuai dengan selera anda.

Saya harap anda bisa menangkap konsep yang ada mengenai bagaimana sistem kerja dari suatu contact form.

Leave a Reply

Your email address will not be published. Required fields are marked *