Cách tạo form AJAX WordPress trong 4 bước

Cách Tạo Form AJAX WordPress Trong 4 Bước Đơn Giản

Trong thế giới phát triển web hiện đại, trải nghiệm người dùng là yếu tố then chốt để giữ chân khách truy cập trên trang web của bạn. Một trong những cách hiệu quả nhất để cải thiện trải nghiệm này là sử dụng AJAX (Asynchronous JavaScript and XML) cho các form liên hệ, form đăng ký, và các loại form khác. AJAX cho phép người dùng gửi dữ liệu từ form mà không cần tải lại toàn bộ trang, tạo cảm giác mượt mà và nhanh chóng hơn.

Bài viết này sẽ hướng dẫn bạn cách tạo form AJAX trong WordPress chỉ với 4 bước đơn giản. Chúng ta sẽ sử dụng jQuery để đơn giản hóa quá trình xử lý AJAX.

Bước 1: Tạo Form HTML

Đầu tiên, chúng ta cần tạo form HTML. Bạn có thể tạo form này trực tiếp trong theme của bạn, hoặc sử dụng một plugin tạo form. Dưới đây là một ví dụ form đơn giản:


    <form id="myForm">
      <label for="name">Tên:</label><br>
      <input type="text" id="name" name="name"><br>

      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br>

      <label for="message">Tin nhắn:</label><br>
      <textarea id="message" name="message"></textarea><br>

      <input type="submit" value="Gửi">
    </form>

    <div id="response"></div>

Trong đoạn code trên:

<form id="myForm">: Định nghĩa form với ID là “myForm”. ID này sẽ được sử dụng trong jQuery để xử lý sự kiện gửi form.
<label for="name">, <label for="email">, <label for="message">: Các nhãn cho các trường nhập liệu.
<input type="text" id="name" name="name">, <input type="email" id="email" name="email">, <textarea id="message" name="message">: Các trường nhập liệu cho tên, email và tin nhắn. Thuộc tính name rất quan trọng vì nó sẽ được sử dụng để truyền dữ liệu đến server.
<input type="submit" value="Gửi">: Nút gửi form.
<div id="response"></div>: Một div trống để hiển thị phản hồi từ server (ví dụ: thông báo thành công hoặc lỗi).

Bước 2: Viết Mã JavaScript (jQuery)

Tiếp theo, chúng ta cần viết mã JavaScript để xử lý sự kiện gửi form bằng AJAX. Đảm bảo rằng jQuery đã được tải trên trang web của bạn. Bạn có thể tải jQuery thông qua CDN hoặc bằng cách thêm nó vào theme của bạn.

Tạo một file JavaScript (ví dụ: custom.js) và thêm đoạn code sau:


    jQuery(document).ready(function($) {
      $('#myForm').submit(function(event) {
        event.preventDefault(); // Ngăn chặn việc gửi form mặc định

        var name = $('#name').val();
        var email = $('#email').val();
        var message = $('#message').val();

        $.ajax({
          url: ajaxurl, // Biến được định nghĩa bởi WordPress
          type: 'POST',
          data: {
            'action': 'process_form', // Hàm PHP sẽ xử lý dữ liệu
            'name': name,
            'email': email,
            'message': message
          },
          success: function(response) {
            $('#response').html(response);
          },
          error: function(error) {
            console.log(error);
            $('#response').html('Đã xảy ra lỗi. Vui lòng thử lại sau.');
          }
        });
      });
    });

Giải thích code JavaScript:

jQuery(document).ready(function($) { ... });: Đảm bảo rằng code chỉ được thực thi sau khi DOM đã được tải đầy đủ.
$('#myForm').submit(function(event) { ... });: Gán một hàm cho sự kiện submit của form có ID là “myForm”.
event.preventDefault();: Ngăn chặn việc gửi form theo cách thông thường (tải lại trang).
var name = $('#name').val();, var email = $('#email').val();, var message = $('#message').val();: Lấy giá trị từ các trường nhập liệu.
$.ajax({ ... });: Sử dụng hàm $.ajax() của jQuery để gửi yêu cầu AJAX.
url: ajaxurl: URL để gửi yêu cầu AJAX. ajaxurl là một biến được WordPress định nghĩa khi wp_localize_script() được sử dụng (sẽ được đề cập ở bước 4).
type: 'POST': Phương thức HTTP để gửi dữ liệu (POST).
data: { ... }: Dữ liệu sẽ được gửi đến server. action là tham số quan trọng, nó xác định hàm PHP nào sẽ xử lý dữ liệu.
success: function(response) { ... }: Hàm sẽ được gọi khi yêu cầu AJAX thành công. response là dữ liệu trả về từ server.
error: function(error) { ... }: Hàm sẽ được gọi khi yêu cầu AJAX thất bại.
$('#response').html(response);: Hiển thị phản hồi từ server trong div có ID là “response”.

Bước 3: Viết Hàm PHP để Xử Lý Dữ Liệu Form

Bây giờ, chúng ta cần viết một hàm PHP để xử lý dữ liệu form trên server. Thêm đoạn code sau vào file functions.php của theme của bạn:


    <?php
    add_action( 'wp_ajax_process_form', 'process_form_callback' );
    add_action( 'wp_ajax_nopriv_process_form', 'process_form_callback' );

    function process_form_callback() {
      $name = sanitize_text_field( $_POST['name'] );
      $email = sanitize_email( $_POST['email'] );
      $message = sanitize_textarea_field( $_POST['message'] );

      // Xử lý dữ liệu (ví dụ: gửi email)
      $to = 'your_email@example.com';
      $subject = 'Thông tin từ form liên hệ';
      $body = "Tên: " . $name . "nEmail: " . $email . "nTin nhắn: " . $message;
      $headers = array('Content-Type: text/html; charset=UTF-8');

      wp_mail( $to, $subject, $body, $headers );

      // Trả về phản hồi
      echo 'Cảm ơn bạn đã gửi tin nhắn!';

      wp_die(); // Bắt buộc trong AJAX callback
    }
    ?>

Giải thích code PHP:

add_action( 'wp_ajax_process_form', 'process_form_callback' );: Đăng ký hàm process_form_callback để xử lý yêu cầu AJAX cho người dùng đã đăng nhập.
add_action( 'wp_ajax_nopriv_process_form', 'process_form_callback' );: Đăng ký hàm process_form_callback để xử lý yêu cầu AJAX cho người dùng chưa đăng nhập (khách).
function process_form_callback() { ... }: Định nghĩa hàm sẽ xử lý dữ liệu form.
$name = sanitize_text_field( $_POST['name'] );, $email = sanitize_email( $_POST['email'] );, $message = sanitize_textarea_field( $_POST['message'] );: Lấy và làm sạch dữ liệu từ mảng $_POST để ngăn chặn các cuộc tấn công XSS.
wp_mail( $to, $subject, $body, $headers );: Sử dụng hàm wp_mail() của WordPress để gửi email. Thay thế your_email@example.com bằng địa chỉ email của bạn.
echo 'Cảm ơn bạn đã gửi tin nhắn!';: In ra phản hồi sẽ được hiển thị trên trang web.
wp_die();: Bắt buộc trong AJAX callback để kết thúc quá trình xử lý và trả về phản hồi.

Bước 4: Kích Hoạt JavaScript và Truyền Biến ajaxurl

Cuối cùng, chúng ta cần kích hoạt file JavaScript của bạn và truyền biến ajaxurl cho nó. Thêm đoạn code sau vào file functions.php của theme của bạn:


    <?php
    function enqueue_custom_scripts() {
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
      wp_localize_script( 'custom-script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
    ?>

Giải thích code:

function enqueue_custom_scripts() { ... }: Định nghĩa hàm để đăng ký và tải file JavaScript.
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );: Đăng ký và tải file custom.js. Đảm bảo rằng đường dẫn đến file custom.js là chính xác. Tham số array( 'jquery' ) đảm bảo rằng jQuery được tải trước file custom.js. Tham số true cho biết script sẽ được tải ở cuối trang (trước thẻ </body>).
wp_localize_script( 'custom-script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );: Truyền biến ajaxurl đến file JavaScript. admin_url( 'admin-ajax.php' ) trả về URL đến file admin-ajax.php, file này xử lý các yêu cầu AJAX trong WordPress.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );: Đăng ký hàm enqueue_custom_scripts để được gọi khi WordPress tải các script.

Với 4 bước đơn giản này, bạn đã tạo thành công một form AJAX trong WordPress. Hãy thử gửi form và xem kết quả!

Khắc Phục Sự Cố Thường Gặp

Dưới đây là một số vấn đề thường gặp khi tạo form AJAX và cách khắc phục:

Form không gửi dữ liệu: Kiểm tra lại ID của form và các trường nhập liệu trong HTML và JavaScript. Đảm bảo rằng chúng khớp nhau.
Không nhận được phản hồi từ server: Kiểm tra lại URL trong hàm $.ajax(). Đảm bảo rằng biến ajaxurl được truyền đúng cách.
Lỗi CORS (Cross-Origin Resource Sharing): Nếu bạn đang gửi yêu cầu AJAX đến một domain khác, bạn cần cấu hình CORS trên server.
Email không được gửi: Kiểm tra lại cấu hình email trên server của bạn. Bạn có thể sử dụng một plugin SMTP để đảm bảo rằng email được gửi đúng cách.

Hy vọng bài viết này hữu ích cho bạn. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Cách tạo form AJAX WordPress trong 4 bước