Chào mừng!

Bằng cách đăng ký với chúng tôi, bạn sẽ có thể thảo luận, chia sẻ và nhắn tin riêng tư với các thành viên khác trong cộng đồng của chúng tôi.

Đăng ký ngay!
  • Chào Khách,
    Bạn cần liên hệ với admin ??? ZALO & TELEGRAM

Share Hướng dẫn tạo PHP Contact Form sử dụng MySQL & HTML5 Validation

Tham gia
31/10/18
Bài viết
228
Lượt Thích
64
Coins
1,100
512x512bb.jpg

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

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="https://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.
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:
<?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: $_REQUESTvà $_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:

c9jvxVX.png


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:
<?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.
Nguồn ? : sharescript.net
 
Sửa lần cuối:
Top Bottom
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock
No Thanks