Hướng dẫn cài đặt

Bắt đầu

Khi bạn đăng ký, biểu mẫu đầu tiên được tạo sẵn. Sao chép URL hiển thị trong trang quản trị và đặt vào action của biểu mẫu. Dùng POST cho method.

<form action="https://formchan.app/f/YOUR_FORM_KEY" method="POST">
  <input name="name">
  <input name="email" type="email">
  <textarea name="message"></textarea>
  <button>Gửi</button>
</form>

Sau khi gửi biểu mẫu, người gửi sẽ thấy trang xác nhận. Tin nhắn về hộp thư của bạn, và AI gắn ★ cùng thẻ.

Tên trường

Bạn đặt tên trường tùy ý. Mọi trường được gửi đều hiện nguyên trong hộp thư và trong email thông báo.

Địa chỉ email để trả lời được lấy từ trường tên là email. mail và _replyto cũng được. Tên người gửi được lấy từ name hoặc fullname.

Mỗi lần gửi tối đa 64 KB, tối đa 50 trường và 5.000 ký tự mỗi trường.

Sau khi gửi

Nếu bạn không thiết lập gì, Formchan hiển thị trang xác nhận riêng, kèm liên kết quay lại trang trước.

Để đưa người gửi đến trang của bạn, đặt URL của trang đó vào một trường ẩn tên là _next.

<input type="hidden" name="_next" value="https://example.com/thanks">

Gửi bằng JavaScript

Gửi kèm header Accept: application/json, Formchan sẽ trả về JSON thay vì hiển thị trang. Người truy cập vẫn ở lại trang của bạn.

const res = await fetch('https://formchan.app/f/YOUR_FORM_KEY', {
  method: 'POST',
  headers: { Accept: 'application/json' },
  body: new FormData(form),
});
const data = await res.json(); // { ok: true }

Khi thành công, bạn nhận ok: true. Khi thất bại, bạn nhận ok: false cùng một trong các mã lỗi sau.

Chống spam

Thêm một trường ẩn tên là _gotcha vào biểu mẫu. Người dùng không thấy trường này, nhưng bot sẽ điền vào. Những lần gửi đó trông như được chấp nhận, rồi bị bỏ đi.

<input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

Tin gửi nhiều lần từ cùng một nơi trong thời gian ngắn sẽ bị từ chối.

Trong cài đặt biểu mẫu, bạn có thể liệt kê các website được phép gửi đến. Tin từ website khác sẽ bị từ chối.

WordPress, Webflow và các nền tảng khác

HTML

Dùng nguyên mã biểu mẫu ở trên.

WordPress

Dán mã biểu mẫu vào một khối HTML tùy chỉnh.

Webflow

Trong cài đặt của biểu mẫu, đặt URL vào Action và chọn POST cho Method.

React / Next.js

Gửi bằng fetch, như trong phần Gửi bằng JavaScript.

Thông báo

Tin ★3 được gửi đến các địa chỉ email nhận thông báo ngay khi đến. Khi bạn thêm một địa chỉ, chúng tôi gửi email xác nhận đến địa chỉ đó. Thông báo bắt đầu sau khi liên kết trong email được nhấp.

★1 và ★2 được gom trong một email mỗi ngày. Bạn có thể đổi giờ gửi, và ngày nào không có tin mới thì không gửi email.

Từ gói Pro trở lên, bạn còn có thể gửi tin đến Slack, Chatwork, Microsoft Teams, Google Chat và Discord.

Webhook

Ở gói Doanh nghiệp, mỗi khi có tin mới và AI đọc xong, Formchan gửi một POST chứa JSON đến URL của bạn.

Header X-Formchan-Signature chứa giá trị HMAC-SHA256 của phần thân request, ký bằng secret webhook của bạn, theo dạng sha256=…. Tính cùng giá trị đó ở phía bạn để kiểm tra request có thật sự đến từ Formchan.

Ví dụ phần thân

{
  "event": "submission.created",
  "at": "2026-10-12T09:29:41.000Z",
  "workspace": { "id": "w_…", "name": "Harbor Design Studio" },
  "submission": {
    "id": "sb_…",
    "number": 1,
    "form": { "id": "fm_…", "name": "Contact" },
    "received_at": "2026-10-12T09:29:38.000Z",
    "name": "Emily Parker",
    "email": "emily@example.com",
    "fields": { "name": "Emily Parker", "email": "emily@example.com", "message": "…" },
    "stars": 3,
    "tags": [{ "id": "tg_…", "name": "Inquiry", "by": "ai" }],
    "summary": "Wants a consultation on adding a second floor.",
    "reason": "Concrete request with budget and timeline.",
    "done": false
  }
}

Kiểm tra chữ ký (Node.js)

import crypto from 'node:crypto';

// rawBody: the request body as a string, before JSON.parse
function isFromFormchan(rawBody, signature, secret) {
  const expected = 'sha256=' + crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
  const a = Buffer.from(expected), b = Buffer.from(signature || '');
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}