Hướng dẫn cách tạo form gửi Email bằng PHP sử dụng Gmail SMTP

Hướng dẫn cách tạo form gửi Email bằng PHP sử dụng Gmail SMTP
     

Kết nối với Email là một trong những phần phổ biến, xuất hiện trong nhiều website từ trước đến nay. là một giao thức gửi Email phổ biến, đây là một giao thức dễ dàng sử dụng và cấu hình. Trong bài viết này mình sẽ chia sẻ với bạn cách để gửi Mail qua giao thức SMTP của Gmail trong lập trình PHP một cách đơn giản nhất.

Xây dựng Form giao diện gửi Mail

Đầu tiên là xây dựng form HTML bao gồm các trường là Email gửi đến, tiêu đề thư và nội dung thư gửi. Dữ liệu trong Form sẽ được gửi tới file mail.php để xử lý.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DEMO GỬI EMAIL</title>
    <link href="style.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  </head>

  <body>
    <br />
    <div class="inner contact">
      <div class="contact-form">
        <h1 align="center">TUANDC</h1>
        <h2 align="center">Hướng dẫn cách tạo form gửi Email bằng PHP sử dụng Gmail SMTP</h2>
        <hr>
        <form action="mail.php" method="post">
          <div class="col-xs-12 wow animated slideInRight" data-wow-delay=".5s">
            <h3>Gửi Thử Email</h3>
            <input type="email" name="emainsend" required class="form" placeholder="Đến : Địa chỉ Email " />
            <input type="text" name="subject" required class="form" placeholder="Tiêu đề" />
            <textarea name="message" class="form textarea" placeholder="Nội dung"></textarea>
          </div>
          <button type="submit" id="submit" name="send" class="form-btn semibold">Gửi Mail</button>
          <div class="clear"></div>
        </form>
      </div>
    </div>
  </body>

</html>
Giao diện sau khi hoàn thành

Giao diện sau khi hoàn thành

Tạo tệp cấu hình, tiếp nhận và xử lý Email gửi đi

Để gửi Mail qua SMTP, mình cần dùng đến một thư viện PHPMailer. Bạn có thể tải thư viện đó tại đây: Tải về thư viện.

Tạo một tệp mới có tên mail.php, sao chép toàn bộ thư mục thư viện PHPMailer bỏ vào thư mục web. Trở lại file mail.php và thêm đoạn code sau:

require_once 'PHPMailer/PHPMailerAutoload.php';

Tiếp theo hãy thêm đoạn code sau:

if(isset($_POST['emainsend']))
{
  //#1
  $to_id = $_POST['emainsend'];
  $message = $_POST['message'];
  $subject = $_POST['subject'];

  //#2
  $mail = new PHPMailer;
  $mail->isSMTP();
  $mail->Host = 'Host của SMTP';
  $mail->Port = Số_cổng;
  $mail->SMTPSecure = 'tls';
  $mail->SMTPAuth = true;
  $mail->Username = 'Emain_của_bạn@gmail.com';
  $mail->Password = 'Mật_khẩu_của_bạn';
  $mail->FromName = "Demo Send Mail";

  //#3
  $mail->addAddress($to_id);
  $mail->Subject = $subject;
  $mail->msgHTML($message);

  //#4
  if (!$mail->send()) {
    $error = "Lỗi: " . $mail->ErrorInfo;
    echo '<p>'.$error.'</p>';
  }
  else {
    echo '<p>Đã gửi!</p>';
  }
}
else{
  echo '<p>Vui lòng nhập dữ liệu</p>';
}

#1: Lấy dữ liệu được gửi từ form.

#2: Cấu hình thông tin SMTP. Các thông tin cấu hình sẽ được lấy từ thông tin cấu hình trên Gmail SMTP (phần sau mình sẽ hướng dẫn lấy thông tin cấu hình đó).

#3: Gán dữ liệu vào các biến gửi Mail.

#4: Thực hiện gửi Mail và kiểm tra trạng thái.

Cách lấy thông tin SMTP của Gmail

Bây giờ mình sẽ tiến hành lấy thông tin SMTP của Gmail để thay lên thông tin cấu hình trong file mail.php. Đầu tiên bạn truy cập đến đường link sau: https://myaccount.google.com/. Sau đó nhấn “Đăng nhập vào Google”.

Tiếp theo bạn tìm đến phần “Xác minh 2 bước” nhấn vào dấu mũi tên để bật tính năng này.

Nhấn “Bắt đầu” để tiếp tục.

Nhấn “Bật” để bật xác minh 2 bước.

Bây giờ hãy truy cập đường dẫn : https://myaccount.google.com/security, và nhấn vào “Mật khẩu ứng dụng”.

Tại phần “Mật khẩu ứng dụng” nhấn chọn loại dịch vụ là “Thư, và “Máy tính dùng Windows”. Nhấn “Tạo” để tạo mật khẩu.

Như vậy mật khẩu đã được tạo, bạn lưu mật khẩu này lại để sử dụng cho cấu hình SMTP.

Cấu hình SMTP và gửi thử

Bây giờ mình tiến hành cấu hình SMTP dựa vào thông tin mật khẩu ứng dụng đã lấy như sau:

Với Email bạn sử dụng Email đã đăng nhập để tạo mật khẩu ứng dụng, và mật khẩu chính là mật khẩu ứng dụng bạn đã tạo.

Email nhận được trên trên điện thoại nhanh chóng.. Có một số lỗi về chữ, bạn có thể thêm dòng “accept-charset=”utf-8” vào form để khắc phục lỗi này.

Và đây là kết quả trả về trên trang sau khi nhấn gửi mail.

Bổ sung tính năng Ajax khi gửi Mail

Tại thẻ Form, bạn loại bỏ thuộc tính action và thêm vào một thuộc tính ID ví dụ: <form method="post" id="mail-form">. Và sau đó thêm đoạn Javascript như sau vào dưới form.

<script type="text/javascript">
  $(document).ready(function()
  { 
    var submit = $("button[type='submit']");
    submit.click(function()
    {
      var data = $('form#mail-form').serialize();
      $.ajax({
          type : 'POST', 
          url : 'mail.php',
          dataType:'html',
          data : data,
          success : function(data)
      { 
      if(data == 'success') 
      {
	alert('Đã Gửi mail thành công !');
      }else{
	alert('Gửi mail thất bại, vui lòng kiểm tra lại');
      }
    }
  });
  return false;
 });
});
</script>

Bây giờ bạn mở file mail.php tìm đến phần //#4, và thay đổi thành đoạn code như sau:

//#4
  if (!$mail->send()) {
    $error = "Lỗi: " . $mail->ErrorInfo;
    echo 'Failed';
  }
  else {
    echo 'success';
  }
}
else{
  echo 'No data';
}

Gửi mail thành công, bảng thông báo Alert hiển thị mà không phải tải lại trang. Khuyến cáo khi sử dụng Ajax bạn nên thêm khoản thời gian delay, thuộc tính disable cho nút gửi nhằm hạn chế việc gửi nhiều lần.

Bạn có thể tùy biến, thay vì sử dụng Alert thì có thể sử dụng nhiều phương thức thông báo khác. Chúc bạn thành công !

TUANDC

Liên hết bài viết: ""

Các bài liên quan