Trang web của bạn được xây dựng bằng HTML và nó có biểu mẫu liên hệ. Bạn muốn gửi thư đến địa chỉ email của mình. Nhưng bạn không thể làm điều này. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn sẽ làm điều đó. Bạn cần trợ giúp nhỏ về PHP. Mong rằng bạn có kiến thức về PHP.
Tạo biểu mẫu liên hệ HTML
Tạo một tệp HTML contact.html và đưa vào thư mục dự án / trang web của bạn. Bây giờ hãy mở tệp và thêm mã sau:<!DOCTYPE html> <html lang="en-US" prefix="og: http://ogp.me/ns#"> <head> <title>Contact Us</title> </head> <body> <div class="cf-wrap"> <h1 class="heading">Contact Form</h1> <form name="contact-form" class="contact-form" action="" method="post" autocomplete="off"> <p> <label>Name</label> <input type="text" name="name" id="cf-name" placeholder="Enter Your Name" class="cf-field" autocomplete="off"> </p> <p> <label>Email</label> <input type="email" name="email" id="cf-email" placeholder="Enter Your Email Address" class="cf-field" autocomplete="off"> </p> <p> <label>Subject</label> <input type="text" name="subject" id="cf-subject" placeholder="Enter Subject" class="cf-field" autocomplete="off"> </p> <p> <label>Message</label> <textarea name="name" id="cf-message" placeholder="Enter Your Query" class="cf-field" cols="80" rows="8"></textarea> </p> <div class="button" onclick="JavaScript:SendMail();" role="button">Send</div> </form> <div class="response"></div> </div> </body> </html>7: Biểu mẫu được bao bởi div. 8: Thêm tiêu đề trang 9: Bắt đầu biểu mẫu 10-13: Nhập trường tên 14-17: Tạo trường email 19-22: Tạo trường chủ đề 24-27: Tạo thông báo / truy vấn văn bản 29: Tạo GỬI nút 31: Thẻ biểu mẫu đang kết thúc
Mang đến cái nhìn chuyên nghiệp
Tạo một thư mục “css” vào thư mục dự án / site và lưu tệp “style.css” vào đó. Mở tệp CSS này và thả mã CSS này vào đó.html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Varela Round', sans-serif;
font-size: 16px;
font-weight: 400;
}
label {
color: #555;
clear: both;
display: block;
font-family: 'Varela Round', sans-serif;
padding: 0 0 5px;
}
input, textarea {
background: #fff;
border: 2px solid #ccc;
-webkit-box-shadow: 0px 2px 0px #cecece;
-moz-box-shadow: 0px 2px 0px #cecece;
box-shadow: 0px 2px 0px #cecece;
border-radius: 5px;
display: block;
letter-spacing: 0.8px;
margin-bottom: 10px;
padding: 20px;
width: 100%;
}
input:focus, textarea:focus {
border-color: #aaa;
-webkit-box-shadow: 0px 2px 0px #aaa;
-moz-box-shadow: 0px 2px 0px #aaa;
box-shadow: 0px 2px 0px #aaa;
outline: 0;
outline: none;
}
::placeholder {
color: #ccc;
font-size: 14px;
}
.cf-wrap {
padding: 0 15px;
max-width: 450px;
margin: 0 auto;
width: 100%;
}
.heading {
color: #666;
font-family: 'Playfair Display', sans-serif;
font-size: 38px;
font-weight: 700;
}
.contact-form p {
display: inline-block;
padding: 0;
margin: 0 0 15px;
width: 100%;
}
.button {
background: #555;
border: 2px solid #555;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 700;
letter-spacing: 0.8px;
padding: 20px 40px;
text-transform: uppercase;
width: auto;
}
.button:hover {
background: #fff;
border: 2px solid #444;
color: #444;
}
.error {
color: #900;
clear: both;
display: block;
font-size: 13px;
}
.response {
clear: both;
display: block;
margin-top: 17px;
}
Bây giờ bạn sẽ mở tệp contact.html và thêm hai dòng sau vào phía trên </head> thẻ HTML.
<link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Varela+Round:400,700" /> <link type="text/css" rel="stylesheet" href="css/style.css" />Tôi đang sử dụng phông chữ google Playfair Display & Varela Round. Bạn có thể thay đổi nó.
Tạo tệp JS
Bây giờ chúng ta sẽ tạo một tệp JS. Tệp JS này sẽ xác thực dữ liệu của biểu mẫu và gửi thư qua phương thức JQuery AJAX. Vì vậy, Google JQuery API đang sử dụng ở đây. Tạo một thư mục “js” bên trong thư mục dự án / trang web của bạn và lưu một tệp “scripts.js” ở đó. Tệp JS này chứa các mã JavaScript sau:jQuery(document).ready(function(){
jQuery('input,textarea').on('focusin', function(){
var placeholder = jQuery(this).attr('placeholder');
jQuery(this).data('holder', placeholder );
jQuery(this).attr('placeholder', '');
});
jQuery('input,textarea').on('focusout', function(){
jQuery(this).attr('placeholder', $(this).data('holder'));
});
});
function SendMail() {
var bool = true;
if( CF_FormValidation( bool ) ) {
var name = jQuery('#cf-name').val(),
email = jQuery('#cf-email').val(),
subject = jQuery('#cf-subject').val(),
message = jQuery('#cf-message').val();
jQuery('.response').text('Sending the mail. Please wait...');
jQuery.ajax( {
url: 'send-mail.php', // You will fix the path
method: 'post',
data: {
name : name,
email : email,
subject : subject,
message : message
}
})
.done( function(response) {
jQuery('.response').text(response);
jQuery('.contact-form').trigger("reset");
});
}
}
function CF_FormValidation( bool ) {
var name = jQuery('#cf-name'),
email = jQuery('#cf-email'),
subject = jQuery('#cf-subject'),
message = jQuery('#cf-message');
var strPatt = /^\s*$/;
var emailPatt = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if( name == typeof 'undefined' || strPatt.test(name.val()) ) {
bool = false;
if( name.closest('p').find('.error').length === 0 ) { name.closest('p').append('<div class="error">Enter Your Name</div>'); }
} else {
name.closest('p').find('.error').remove();
}
if( email == typeof 'undefined' || ! emailPatt.test(email.val()) ) {
bool = false;
if( email.closest('p').find('.error').length === 0 ) { email.closest('p').append('<div class="error">Enter Your Email Address</div>'); }
} else {
email.closest('p').find('.error').remove();
}
if( subject == typeof 'undefined' || strPatt.test(subject.val()) ) {
bool = false;
if( subject.closest('p').find('.error').length === 0 ) { subject.closest('p').append('<div class="error">Enter Subject</div>'); }
} else {
subject.closest('p').find('.error').remove();
}
if( message == typeof 'undefined' || strPatt.test(message.val()) ) {
bool = false;
if( message.closest('p').find('.error').length === 0 ) { message.closest('p').append('<div class="error">Enter Your Query</div>'); }
} else {
message.closest('p').find('.error').remove();
}
return bool;
}
1-11: Ẩn văn bản trình giữ chỗ trên tiêu điểm
13-38: Hàm SendMail () JS đang xác thực dữ liệu đã gửi và gửi thư qua AJAX. Hàm SendMail () sẽ kích hoạt khi người dùng nhấp vào nút GỬI .
40-78: CF_FormValidation () là một hàm trợ giúp kiểm tra xem người dùng có gửi dữ liệu ở định dạng phù hợp hay không.
Mở lại tệp contact.html và thêm hai dòng này phía trên </body> thẻ HTML.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/scripts.js?ver=1.0"></script>
Triển khai PHPMailer
Bây giờ chúng ta sẽ viết tập lệnh PHP để gửi thư đến địa chỉ email của quản trị viên. Tôi đang sử dụng thư viện PHPMailer. Nhấp vào liên kết và tải xuống thư viện PHPMailer từ github. Giải nén nó trên máy tính cục bộ, tạo thư mục PHPMailer vào thư mục dự án / trang web của bạn và tải lên các tệp Exception.php , PHPMailer.php và SMTP.php ở đó. Nếu bạn gửi thư qua SMTP thì cần có SMTP.php.Bước tiếp theo là chúng ta sẽ viết đoạn mã PHP nhỏ để lấy tên, email, chủ đề và tin nhắn từ người dùng và gửi mail với thông tin chi tiết này.
Trong hàm SendMail () của tệp scripts.js, tôi viết send-mail.php và tệp này sẽ nằm trong thư mục dự án / site. Vì vậy, hãy tạo một tệp PHP mới send-mail.php, đặt vào thư mục dự án / trang web của bạn và thêm các đoạn mã PHP sau:
/**
* Sending the mail
*/
$name = trim( $_POST['name'] );
$email = trim( $_POST['email'] );
$subject = $_POST['subject'];
$message = $_POST['message'];
if( empty( $name ) || empty( $email ) ) {
echo "Failed. You did not provide your name or email address".
die();
}
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
include 'PHPMailer/Exception.php';
include 'PHPMailer/PHPMailer.php';
include 'PHPMailer/SMTP.php';
$mail = new PHPMailer(true); // Passing `true` enables exceptions
try {
//Server SMTP settings
$mail->SMTPDebug = 2; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp1.example.com;smtp2.example.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'user@example.com'; // SMTP username
$mail->Password = 'secret'; // SMTP password
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587; // TCP port to connect to
//Recipients
$mail->setFrom($email, $name);
$mail->addAddress('ADMIN EMAIL HERE', 'ADMI NNAME OR SITE NAME'); // Add a recipient
//Content
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = $subject;
$mail->Body = str_replace( "\n", '
', $message );
$mail->AltBody = $message;
$mail->send();
echo 'Thank you for contacting us. You will be notified shortly.';
} catch (Exception $e) {
echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
}
die();
Bạn sẽ thiết lập tất cả các thông số với các chi tiết của bạn.
Tất cả đều đã xong. Bây giờ bạn sẽ duyệt trang contact.html và kiểm tra thư.
Hãy liên hệ với tôi nếu bạn cần bất kỳ sự giúp đỡ nào.