Membuat Contact Form Menggunakan PHPMailer

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
September 24, 2018




Selamat pagi sobat blogger kali ini kami akan share bagaimana membuat contact form menggunakan PHPMailer.  Dalam formulir dibawah, bidang input file diatur dengan atribut "multiple" untuk memungkinkan memilih lebih dari satu file untuk lampiran email. File yang dipilih dalam array global $ _FILES diulang dan dilampirkan ke email dengan menggunakan objek PHPMailer.



Memilih Beberapa Lampiran menggunakan Formulir HTML

Formulir HTML berikut berisi bidang masukan untuk memasukkan data email seperti nama dan email pengirim, subjek dan konten isi. Ini juga berisi input file untuk memilih lebih dari satu file dengan mengaktifkan properti "multiple".

 <form id="frmEnquiry" action="" method="post" enctype='multipart/form-data'>
 <div id="mail-status"></div>
 <div>
  <input
  type="text" name="userName" id="userName"
  class="demoInputBox" placeholder="Name">
 </div>
 <div>
  <input type="text" name="userEmail" id="userEmail"
  class="demoInputBox" placeholder="Email">
 </div>
 <div>
  <input type="text" name="subject" id="subject"
  class="demoInputBox" placeholder="Subject">
 </div>
 <div>
  <textarea name="content" id="content" class="demoInputBox"
  cols="60" rows="6" placeholder="Content"></textarea>
 </div>
 <div>
  <label>Attachment</label><br /> <input type="file"
  name="attachment[]" class="demoInputBox" multiple="multiple">
 </div>
 <div>
  <input type="submit" value="Send" class="btnAction" />
 </div>
</form> 


Menambahkan CSS Untuk Mempercantik Contact Form

Contact form penting untuk mempunyai yampilan yang menarik dan bagus oleh karenanya di perlukan CSS.

 <style>
body {
 width: 610px;
 margin: 100px auto;
 background: #5F9EA0;
}

#frmEnquiry {
 background: #6495ED;
 padding: 15px 30px;
}

#frmEnquiry div {
 margin-bottom: 20px;
}

#frmEnquiry div label {
 margin-left: 5px
}

.demoInputBox {
 padding: 10px;
 border: #F0F0F0 1px solid;
 border-radius: 4px;
 background-color: #FFF;
 width: 100%;
}

.demoInputBox:focus {
 outline:none;
}

.error {
 background-color: #FF6600;
 border: #AA4502 1px solid;
 padding: 5px 10px;
 color: #FFFFFF;
 border-radius: 4px;
}

.success {
 background-color: #9fd2a1;
 border: #91bf93 1px solid;
 padding: 5px 10px;
 color: #3d503d;
 border-radius: 4px;
 cursor: pointer;
 font-size: 0.9em;
}

.info {
 font-size: .8em;
 color: #FF6600;
 letter-spacing: 2px;
 padding-left: 5px;
}

.btnAction {
 background-color: #263327;
 border: 0;
 padding: 10px 40px;
 color: #FFF;
 border: #F0F0F0 1px solid;
 border-radius: 4px;
 cursor:pointer;
}
.btnAction:focus {
 outline:none;
}
.invalid {
 background: #fbf2f2;
 border: #e8e0e0 1px solid;
}
</style> 


Memposting Data Formulir via jQuery AJAX

Saat mengirimkan formulir, nilai bidang input yang dimasukkan oleh pengguna divalidasi menggunakan jQuery. Jika semua bidang divalidasi dan fungsi validasi mengembalikan nilai true, maka panggilan AJAX akan dihasilkan untuk meminta skrip pengiriman email. Setelah mengeksekusi skrip mail, blok respons AJAX akan memperbarui UI untuk mengakui pengguna tentang status email yang dikirim.

 <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function (e){
  $("#frmEnquiry").on('submit',(function(e){
   e.preventDefault();
   $('#loader-icon').show();
   var valid; 
   valid = validateContact();
   if(valid) {
    $.ajax({
     url: "mail-send.php",
     type: "POST",
     data:  new FormData(this),
     contentType: false,
     cache: false,
     processData:false,
     success: function(data){
      $("#mail-status").html(data);
      $('#loader-icon').hide();
     },
     error: function(){}          
     
    });
   }
  }));

  function validateContact() {
   var valid = true; 
   $(".demoInputBox").css('background-color','');
   $(".info").html('');
   $("#userName").removeClass("invalid");
   $("#userEmail").removeClass("invalid");
   $("#subject").removeClass("invalid");
   $("#content").removeClass("invalid");
   
   if(!$("#userName").val()) {
    $("#userName").addClass("invalid");
    $("#userName").attr("title","Required");
    valid = false;
   }
   if(!$("#userEmail").val()) {
    $("#userEmail").addClass("invalid");
    $("#userEmail").attr("title","Required");
    valid = false;
   }
   if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
    $("#userEmail").addClass("invalid");
    $("#userEmail").attr("title","Invalid Email");
    valid = false;
   }
   if(!$("#subject").val()) {
    $("#subject").addClass("invalid");
    $("#subject").attr("title","Required");
    valid = false;
   }
   if(!$("#content").val()) {
    $("#content").addClass("invalid");
    $("#content").attr("title","Required");
    valid = false;
   }
   
   return valid;
  }

 });
</script> 

Kode PHP untuk Melampirkan Beberapa File ke Email

Dalam kode PHP ini, ia menciptakan objek surat untuk kelas PHPMailer. Dengan menggunakan objek ini, opsi email diatur sebelum memanggil fungsi kirim.

Beberapa file yang diposting melalui form HTML akan dibaca dengan menggunakan variabel array $ _FILES. Array ini diulang file yang bersangkutan akan dilampirkan dengan memanggil fungsi addAttachment() dengan referensi objek surat.

 <?php
require('phpmailer/class.phpmailer.php');

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "ssl";
$mail->Port     = 465;  
$mail->Username = "YOUR USER_NAME";
$mail->Password = "YOUR PASSWORD";
$mail->Host     = "YOUR HOST";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("RECIPIENT_EMAIL"); 
$mail->Subject = $_POST["subject"];
$mail->WordWrap   = 80;
$mail->MsgHTML($_POST["content"]);

foreach ($_FILES["attachment"]["name"] as $k => $v) {
 $mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
}

$mail->IsHTML(true);

if(!$mail->Send()) {
 echo "<p class='error'>Problem in Sending Mail.</p>";
} else {
 echo "<p class='success'>Mail Sent Successfully.</p>";
} 
?> 

Kalian bisa melihat demonya secara langsung, silahkan download jika anda membutuhkan file di atas.

DEMO              DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat badi kalian, jika kalian ingin penjelasan leboh lanjut silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed