Bạn muốn làm chủ Website?

Tự code trang liên hệ cho WordPress

Hướng dẫn tự code trang liên hệ cho WordPress không cần dùng plugin.

Hiện nay có khá nhiều các plugin hỗ trợ việc tạo trang liên hệ cho WordPress, và nổi bật nhất thì phải nói đến Contact Form 7.

Tuy nhiên, nếu bạn không thích sử dụng plugin do sợ nặng thì hôm nay Mộc sẽ hướng dẫn bạn cách tự tạo trang liên hệ cho WordPress thông qua sử dụng hàm wp_mail().

Các bước thực hiện

Bước 1: Bạn hãy thêm 1 file mới có tên là lien-he.php trong theme bạn đang sử dụng và thêm nộ dung sau vào file mới tạo.

<?php
/*
 Template Name: Liên hệ
 */
 ?>
<?php get_header(); ?>
<?php get_footer(); ?>

Bước 2: Bây giờ, chúng ta sẽ xây dựng phần nhập thông tin cho trang liên hệ. Thông thường sẽ có các phần như Tên người gửi, Email, Nội dung,… Và dưới đây là đoạn code mẫu với những thông tin cơ bản. Bạn có thể thêm các thông tin khác nếu muốn nhé.

<form action="" method="POST">
 <h1>Liên hệ với ToiCode.Com</h1>
 <div class="tccol1">
 <input type="text" name="ten" class="form-control" placeholder="Tên bạn" value="">
 </div>
 <div class="tccol1">
 <input type="text" name="email" class="form-control" placeholder="Email của bạn" value="">
 </div>
 <div class="tccol1">
 <input type="text" name="tieude" class="form-control" placeholder="Tiêu đề liên hệ" value="">
 </div>
 <div class="tccol1">
 <textarea rows="5" cols="40" name="noidung" placeholder="Nội dung liên hệ"></textarea>
 </div>
 <div class="form-footer">
 <button type="submit">Gửi liên hệ</button>
 </div>
</form>

Bước 3: Đây là bước xử lý thông tin khi nhấn Gửi liên hệ.

<?php 
 if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
 $ten = strip_tags($_POST['ten']);
 $email = strip_tags($_POST['email']);
 $tieude = strip_tags($_POST['tieude']);
 $noidung = strip_tags($_POST['noidung']);
 if (!empty($ten) && !empty($email) && !empty($tieude) && !empty($noidung)) {
 // Hiện thông báo thành công 
 echo '<div class="success">Email liên hệ của bạn đã được gửi đi!</div>';
 } else {
 // Hiện thông báo thất bại
 echo '<div class="error">Vui lòng không bỏ trống các trường.</div>';
 }
 }

Bước 4: Xây dựng email gửi cho Admin. Bước này chúng ta sẽ dử dụng hàm wp_mail(). Đây là DEMO bạn có thể dùng.

// Send mail cho admin
 $message = "Người gửi: <b>" . $ten ."</b><br/>";
 $message .= "Email: " . $email ."<br/>";
 $message .= "Tiêu đề: " . $tieude ."<br/>";
 $message .= "Nội dung:<br/>";
 $message .= $noidung."<br/>";
 $headers = array('Content-Type: text/html; charset=UTF-8','From: [Hệ Thống] - ToiCode.Com <no-reply@toicode.com>');
 $subject = '[ToiCode.Com] - Có liên hệ mới'; // Tiêu đề Email
 $send_to = 'toicode.moc@gmail.com'; // Email nhận
 wp_mail( $send_to, $subject, $message, $headers );

Trong đó:

  • $message: Là nội dung Email
  • $headers: Định dạng Email
  • $subject: Tiêu đề Email
  • $send_to: Email nhận

Bước 5: Xây dựng email gửi cho người liên hệ. Cái này cũng tương tự như ở trên.

// Send mail cho người gửi.
 $message1 = "Xin chào <b>" . $ten ."</b>! <br/><br/>";
 $message1 .= "Email này nhằm thông báo rằng chúng tôi đã nhận được Email liên hệ của bạn. <br/>";
 $message1 .= "Chúng tôi rất vui vì bạn đã ghé thăm và quan tâm tới <b>ToiCode.Com</b>. <br/>";
 $message1 .= "Chúc bạn một ngày tốt lành. Chúng tôi sẽ liên hệ với bạn nhanh nhất có thể. <br/><br/>";
 $message1 .= "Trân trọng,<br/>";
 $message1 .= "Shin<br/>";
 $message1 .= "https://toicode.com<br/>";
 $headers1 = array('Content-Type: text/html; charset=UTF-8','From: [Hệ Thống] - ToiCode.Com <no-reply@toicode.com>');
 $subject1 = '[ToiCode.Com] - Gửi liên hệ thành công!';
 $send_to1 = $email;
 wp_mail( $send_to1, $subject1, $message1, $headers1 );

Bước 6: Tổng kết lại chúng ta sẽ có đoạn code hoàn chỉnh sau:

<?php
/*
 Template Name: Liên hệ
 */
 ?>
<?php get_header(); ?>
<form action="" method="POST">
 <?php 
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
$ten = strip_tags($_POST['ten']);
$email = strip_tags($_POST['email']);
$tieude = strip_tags($_POST['tieude']);
$noidung = strip_tags($_POST['noidung']);

// Kiểm tra có bỏ trống thông tin không
if (!empty($ten) && !empty($email) && !empty($tieude) && !empty($noidung)) {

// Send mail cho admin
$message = "Người gửi: <b>" . $ten ."</b><br/>";
$message .= "Email: " . $email ."<br/>";
$message .= "Tiêu đề: " . $tieude ."<br/>";
$message .= "Nội dung:<br/>";
$message .= $noidung . "<br/>";
$headers = array('Content-Type: text/html; charset=UTF-8','From: [Hệ Thống] - ToiCode.Com <no-reply@toicode.com>');
$subject = '[ToiCode.Com] - Có liên hệ mới'; // Tiêu đề Email
$send_to = 'toicode.moc@gmail.com'; // Email nhận
wp_mail( $send_to, $subject, $message, $headers );

// Send mail cho người gửi.
$message1 = "Xin chào <b>" . $ten ."</b>! <br/><br/>";
$message1 .= "Email này nhằm thông báo rằng chúng tôi đã nhận được Email liên hệ của bạn. <br/>";
$message1 .= "Chúng tôi rất vui vì bạn đã ghé thăm và quan tâm tới <b>ToiCode.Com</b>. <br/>";
$message1 .= "Chúc bạn một ngày tốt lành. Chúng tôi sẽ liên hệ với bạn nhanh nhất có thể. <br/><br/>";
$message1 .= "Trân trọng,<br/>";
$message1 .= "Shin<br/>";
$headers1 = array('Content-Type: text/html; charset=UTF-8','From: [Hệ Thống] - ToiCode.Com <no-reply@toicode.com>');
$subject1 = '[ToiCode.Com] - Gửi liên hệ thành công!';
$send_to1 = $email;
wp_mail( $send_to1, $subject1, $message1, $headers1 );

// Hiện thông báo thành công
echo '<div class="success">Email liên hệ của bạn đã được gửi đi!</div>';
} else {
//Hiện thông báo thất bại
echo '<div class="error">Vui lòng không bỏ trống các trường.</div>';
}
}
?>
 <div class="tccol1">
 <input type="text" name="ten" class="form-control" placeholder="Tên bạn" value="">
 </div>
 <div class="tccol1">
 <input type="text" name="email" class="form-control" placeholder="Email của bạn" value="">
 </div>
 <div class="tccol1">
 <input type="text" name="tieude" class="form-control" placeholder="Tiêu đề liên hệ" value="">
 </div>
 <div class="tccol1">
 <textarea rows="5" cols="40" name="noidung" placeholder="Nội dung liên hệ"></textarea>
 </div>
 <div class="form-footer">
 <button type="submit">Gửi liên hệ</button>
 </div>
</form>
<?php get_footer(); ?>

Bước 7: Bạn vào tạo một Page mới, tại phần Template của box Page Attributes bạn hãy chọn Liên hệ.

OK, bây giờ ra xem trang và test ngay thôi nào 🙂

Tổng kết

Khá là đơn giản phải không nào 🙂 Giờ bạn chỉ việc viết thêm CSS cho trang liên hệ thêm lung linh nữa là được à. Nếu có vướng mắc gì thì cứ hỏi ngay nhóe 😀

Nếu bạn thấy bài viết hữu ích thì hãy chia sẻ nó hoặc theo dõi chúng tôi qua Email để không bỏ lỡ bất kỳ một thủ thuật hay nào nhé! Đừng quên để lại đánh giá của bạn, nó là nguồn động lực vô bờ bến với chúng tôi đấy!

Add Comment

  • Không sử dụng từ khóa trong tên.
  • Không sử dụng từ ngữ phảm cảm.
  • Không dẫn link tới các trang có nội dung không lành mạnh.
  • Không bình luận về chính trị.
  • Mọi bình luận sẽ bị xóa nếu vi phạm mà không báo trước.
  • One Comment

    1. 11

      khá hay đấy Mộc !

      25/01/2018 Reply

    Nhận bài viết mới