Membuat Contact Form Menggunakan SMTP

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg
October 11, 2018

Selamat pagi kali ini kami akan share contoh contact form menggunakan PHP, dan pada post terakhir dibawah kalian bisa langsung melihat dan mendownload filenya secara langsung dan silahkan mencoba dan memodifikasi sesuai dengan yang anda perlukan.



Langsung saja yang perlu kalian lakukan adalah membuat formnya terlebih dahulu, buat file dengan nama index.php kemudian masukkan script form dan script validasi contact.

 <!DOCTYPE html>

<html lang="en">

<head>

 <title>Contact Us</title>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="vendor/noui/nouislider.min.css">

 <!--===============================================================================================-->

 <link rel="stylesheet" type="text/css" href="css/util.css">

 <link rel="stylesheet" type="text/css" href="css/main.css">

 <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

 <!--===============================================================================================-->



 <script type="text/javascript">

  $(document).ready(function (e){

   $("#frmContact").on('submit',(function(e){

    e.preventDefault();

    var valid; 

    valid = validateContact();

    if(valid) {

     $.ajax({

      url: "mail.php",

      type: "POST",

      data:  new FormData(this),

      contentType: false,

      cache: false,

      processData:false,

      success: function(data){

       $("#mail-status").html(data);

      },

      error: function(){}          



     });

    } 

   }));



   function validateContact() {

    var valid = true; 

    $(".demoInputBox").css('background-color','');

    $(".info").html('');



    if(!$("#userName").val()) {

     valid = false;

    }

    if(!$("#userEmail").val()) {

     valid = false;

    }

    if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {

     $("#userEmail-info").html("(invalid)");

     valid = false;

    }

    if(!$("#subject").val()) {

     valid = false;

    }

    if(!$("#content").val()) {

     valid = false;

    }



    return valid;

   }



  });

 </script>

</head>

<body>

 <div class="container-contact100">

  <div class="wrap-contact100">

   <form id="frmContact" action="" method="post" class="contact100-form validate-form">


    <span class="contact100-form-title">

     Contact Us

    </span>

 

    <div class="alert alert-primary" role="alert">

     <div id="mail-status"></div>

    </div>

    

    <div class="wrap-input100 validate-input bg1" data-validate="Please Type Your Name">

     <span class="label-input100">FULL NAME *</span>

     <input class="input100" type="text" name="userName" id="userName" placeholder="Enter Your Name" required="">

    </div>



    <div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Enter Your Email (e@a.x)">

     <span class="label-input100">Email *</span>

     <input class="input100" type="text" name="userEmail" id="userEmail" placeholder="Enter Your Email" required="">

    </div>



    <div class="wrap-input100 bg1 rs1-wrap-input100">

     <span class="label-input100">Phone</span>

     <input class="input100" type="text" name="subject" id="subject" placeholder="Enter Number Phone" required="">

    </div>



    <div class="wrap-input100 validate-input bg0 rs1-alert-validate" data-validate = "Please Type Your Message">

     <span class="label-input100">Message</span>

     <textarea class="input100" name="content" id="content" placeholder="Your message here..." required=""></textarea>

    </div>



    <div class="container-contact100-form-btn">

     <button class="contact100-form-btn" type="submit">

      <span>

       Submit

       <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>

      </span>

     </button>

    </div>

   </form>

  </div>

 </div>

 <!--===============================================================================================-->

 <script src="vendor/jquery/jquery-3.2.1.min.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/animsition/js/animsition.min.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/bootstrap/js/popper.js"></script>

 <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/select2/select2.min.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/daterangepicker/moment.min.js"></script>

 <script src="vendor/daterangepicker/daterangepicker.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/countdowntime/countdowntime.js"></script>

 <!--===============================================================================================-->

 <script src="vendor/noui/nouislider.min.js"></script>

 <!--===============================================================================================-->

 <script src="js/main.js"></script>

</body>

</html>

 
Kemudian buat file dengan nama mail.php disini kami menggunakan jQuery Ajax, fungsinya adalah untuk memanggil skrip email PHP untuk mengirim email kontak menggunakan SMTP Gmail.

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

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "tls";
$mail->Port     = 587;  
$mail->Username = "SMTP Username";
$mail->Password = "SMTP Password";
$mail->Host     = "SMTP Host";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("Email Penerima"); 
$mail->Subject = $_POST["subject"];
$mail->WordWrap   = 80;
$mail->MsgHTML($_POST["content"]);


$mail->IsHTML(true);

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

Kalian ubah username, password dan host sesuai yang anda punya pada hosting anda, Kemudian anda juga harus memasukkan email penerima. Kalian bisa melihat dan langsung mendownload filenya dibawah ini.

DEMO     DOWNLOAD

Sekian share kali ini jika kalian belum paham dengan penggunaan SMTP di atas bisa meninggalkan komentar dibawah dan mulai berdiskusi dengan kami.


Artikel Menarik Lainnya

SUBSCRIBE TO OUR NEWSLETTER