- 0 Komentar

Membuat Contact Form Sederhana

Ali
4 minutes read
Tech

contact_form
Dalam membuat website yang baik tentu kita biasanya selalu membuat sebuah contact form yang disematkan dalam menu about atau profile atau menu lainya tergantung dari si designer webnya mau taru di mana tujuan dibuat contact form berfungsi agar mempermudah penggunjung untuk menghubungi kita atau juga bisa berfungsi untuk membuat kritikan, saran ataupun masukan (feedback).

Dalam postingan kali ini saya memberikan sebuah contoh pembuatan contact form sederhana dengan PHP. Langsung saja tanpa basa-basi ayo kita praktek. Pertama-tama anda harus membuat form nya terlebih dahulu, copy-paste code di bawah ini dengan notepad dan berinama index.php.
<?php
 $msg="";
  if ($_SERVER['REQUEST_METHOD'] == 'POST'){
  $to      = '1.alisoftware@gmail.com'; //Email di sini diseaikan dengan email Anda
  $subject = $_POST["subject"];
  $message = $_POST["pesan"];
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  $headers .= 'To: ' . $to . "\r\n";
  $headers .= 'From: '. $_POST["nama"] . $_POST["email"] . "\r\n";
  
  /* Fitur Mail tidak di aktifkan sebab akan memunculkan Error
   * jika PHP server belum di set SMTP dan SMTP_PORT nya
   * Jika Anda ingin bisa menggunakan fitur mail silahkan
   * Anda configurasi file php.ini dan cari section [mail function]
   * 
   * Contoh untuk GMAIL:
     [mail function]
   SMTP = ssl://smtp.gmail.com
   smtp_port = 465
   username = info@Mmydomainname.com
   password = myemailpassword
   sendmail_from = info@mydomainname.com
   
   * Jika sudah dikonfigurasikan dengan benar, silah kan hapus
   * komentar di bawah ini. */
  //mail($to, $subject, $message, $headers); 
    
  $msg="Pesan telah di kirim, terima kasih";  
 } 
 ?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css"/>
</head>
 <body>
  <div id="container"> 
    <div id="content">
   <div id="title_form">Contact Form</div>
   <?php if ($msg!=''): ?>
   <div class="msg"><p><?php echo $msg;?></p></div>
   <?php endif;?>
   <form method="POST">
    <table border="0">
     <tr>
      <td><div class="label_width">Nama</div></td>
      <td><input type="text" name="nama" class="text_width"/></td>
     </tr>
     <tr>
      <td><div class="label_width">Email</div></td>
      <td><input type="text" name="email" class="text_width"/></td>
     </tr>
     <tr>
      <td><div class="label_width">Subject</div></td>
      <td><input type="text" name="subject" class="text_width"/></td>
     </tr>
     <tr>
      <td><div class="label_width">Pesan</div></td>
      <td><textarea name="pesan" class="text_width"></textarea></td>
     </tr>
     <tr><td></td><td><input type="submit" name="kirim" value="Kirim" style="float:right;height:30px;width: 100px"/></td></tr>
    </table>
   </form>
   </div> 
 </div> 
 </body>
</html>

Kemudian buat stylenya, copy-paste kode di bawah ini dengan notepad dan berinama style.css

body{background-color:#f1f1f1;
  font: 12px Verdana, Arial, Helvetica, sans-serif;
  color: #666666;
  padding:0px;margin:0px;}
 #content{left:30%;border:1px solid #ccc;} 
 #container{
  height:150px;
  margin-top:10%;
  background-repeat:repeat-x, repeat-y;
 }
 #container #content{
  border:0px #000 solid;
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
  padding-top:30px;
  padding-bottom:30px;
  padding-left:35px;
  /* jarak kanan dan kiri */
  margin-left:30%;
  margin-right:33%;
  background:white;
 }
 #title_form{border-bottom:1px solid #ccc;
 text-shadow:1px 1px #ccc;font-size:24px;
 font-weight:bold;
 width:430px;
 margin-bottom:10px;
 }
 
 .label_width{width:70px;}
 .text_width{width:350px};
 .btn{width: 800px;}
 .msg{height:30px;width:430px;background: #ccc}
 .msg p{text-shadow:1px 1px #f1f1f1;text-align:center;padding:5px;}

Selesai. Semoga bermanfaat.

%d bloggers like this: