Contact Form được tạo ra để giúp người dùng liên hệ với những người quản lý trang web. Thông qua Contact Form, bạn không cần công khai địa chỉ mail của mình với những người ghé thăm trang web, do đó sẽ tránh được những email không mong muốn. Đồng thời, danh sách email của những người muốn liên hệ với bạn sẽ được lưu trữ vào database. Từ đó bạn có thể dễ dàng liên hệ lại với những người này thông qua email của họ.
Chuẩn bị
- PHP 7.1
- MySQL
- Jquery/Ajax
Tạo Contact Form
Tạo một Contact Form sử dụng HTML5 Validation và lưu thành file có đuôi là .php. Có hai cách để gửi dữ liệu của form: GET và POST. Mình sẽ sử dụng POST để gửi vì nó ẩn dữ liệu người dùng cũng như không giới hạn dung lượng gửi đi.
Lưu ý: bạn có thể tự viết CSS hoặc sử dụng Bootstrap để có giao diện đẹp hơn.
contact-form.php
!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1><img src="Inquiry.png" width="80px">Easy Contact Form With Ajax MySQL</h1>
<form name="contact-form" action="" method="post" id="contact-form">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="your_name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="your_email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" class="form-control" name="your_phone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
</div>
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<img src="img/loading.gif" id="loading-img">
</form>
<div class="response_msg"></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</script>
</body>
</html>
Cấu hình MySQL database
Bạn tiến hành truy cập vào database và tạo bảng contact_form_info, với các field: id, name, email, phone, comment.
Bước tiếp theo là tạo config.php để kết nối đến database.
config.php
<?php
$host = "localhost";
$userName = "fyrhp";
$password = "RTDE";
$dbName = "fyrhp";
// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Tạo PHP Contact Form Script
Tạo file get_response.php và paste đoạn code dưới đây vào:
get_response.php
<?php
require_once("config.php");
if((isset($_POST['your_name'])&& $_POST['your_name'] !='') && (isset($_POST['your_email'])&& $_POST['your_email'] !=''))
{
require_once("contact_mail.php<strong>");
</strong>
$yourName = $conn->real_escape_string($_POST['your_name']);
$yourEmail = $conn->real_escape_string($_POST['your_email']);
$yourPhone = $conn->real_escape_string($_POST['your_phone']);
$comments = $conn->real_escape_string($_POST['comments']);
$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";
if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
}
else
{
echo "Thank you! We will contact you soon";
}
}
else
{
echo "Please fill Name and Email";
}
?>
Với việc sử dụng POST để gửi dữ liệu, mình sẽ dùng hai global method: $_REQUEST và $_POST để lấy và lưu dữ liệu vào các biến trên server. Sự khác nhau giữa hai method là $_REQUEST có thể lấy dữ liệu từ cả GET và POST. Tuy nhiên $_POST chỉ nhận được từ POST.
Đây là kết quả khi thực thi script trên:
Gửi mail
Mình cũng tạo một file contact_mail.php được dùng để gửi dữ liệu từ form đến email của bạn:
contact_mail.php
<?php $toEmail = "[email protected]"; $mailHeaders = "From: " . $_POST["your_name"] . "<". $_POST["your_email"] .">\r\n"; if(mail($toEmail, $_POST["comments"], $_POST["your_phone"], $mailHeaders)) { echo"<p class='success'>Contact Mail Sent.</p>"; } else { echo"<p class='Error'>Problem in Sending Mail.</p>"; } ?>
Lời kết
Trên đây mình đã hướng dẫn cách tạo một Contact Form bằng PHP sử dụng AJAX, jQuery và MySQL. Chúc các bạn thành công. Mọi thắc mắc vui lòng comment ở dưới nhé.