Tạo form frontend không dùng admin-ajax.php, hoàn toàn bằng REST API

1. Vì sao không nên dùng admin-ajax.php?

• Hiệu suất kém: admin-ajax.php load toàn bộ môi trường admin, kể cả khi chỉ dùng ở frontend.
• Không chuẩn REST: dùng phương thức POST cứng, không theo chuẩn RESTful.
• Khó mở rộng: quản lý lộn xộn khi có nhiều action hook.

2. Ý tưởng

1. Viết một REST API endpoint với route riêng.
2. Tạo form HTML frontend, gửi dữ liệu bằng fetch().
3. Validate dữ liệu, xử lý và phản hồi ngay trong callback.

3. Tạo REST API endpoint

add_action('rest_api_init', function () {
    register_rest_route('init/v1', '/contact', [
        'methods'  => 'POST',
        'callback' => 'handle_contact_form',
        'permission_callback' => '__return_true',
    ]);
});

function handle_contact_form(WP_REST_Request $request) {
    $name = sanitize_text_field($request->get_param('name'));
    $email = sanitize_email($request->get_param('email'));
    $message = sanitize_textarea_field($request->get_param('message'));

    if (!$name || !$email || !$message) {
        return new WP_REST_Response(['success' => false, 'message' => 'Thiếu thông tin'], 400);
    }

    // Gửi email (hoặc lưu database...)
    wp_mail(get_option('admin_email'), 'Contact Form', "$name ($email):\n\n$message");

    return rest_ensure_response(['success' => true, 'message' => 'Đã gửi thành công!']);
}

4. Tạo form HTML

<form id="contact-form">
  <input type="text" name="name" placeholder="Tên của bạn" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Tin nhắn" required></textarea>
  <button type="submit">Gửi</button>
</form>
<div id="contact-result"></div>

5. Gửi form bằng JavaScript

document.getElementById('contact-form').addEventListener('submit', function (e) {
  e.preventDefault();
  const form = e.target;
  const data = {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value
  };

  fetch('/wp-json/init/v1/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(res => res.json())
  .then(result => {
    document.getElementById('contact-result').textContent = result.message;
  })
  .catch(() => {
    document.getElementById('contact-result').textContent = 'Gửi thất bại!';
  });
});

6. Tối ưu bảo mật (optional)

• Thêm nonce nếu cần xác thực nhẹ phía frontend: tạo bằng wp_create_nonce('wp_rest') và gửi qua header X-WP-Nonce.
• Giới hạn quyền truy cập (ví dụ chỉ user đã login mới được submit): thay đổi permission_callback.
• Check rate-limit hoặc IP nếu cần chống spam.

7. Kết luận

Với REST API, bạn không cần dùng admin-ajax.php lỗi thời nữa. Các form gửi dữ liệu hiện đại có thể gọn gàng, dễ debug, dễ mở rộng hơn rất nhiều. Hãy xem REST API là nền tảng mặc định cho các plugin hoặc tính năng frontend của bạn trong tương lai.