biểu mẫu

Biểu mẫu chạy được mà không cần backend

Thêm một thuộc tính vào biểu mẫu trên trang tĩnh của bạn và mọi lượt gửi sẽ về thẳng bảng điều khiển. Không JavaScript, không widget nhúng, không dịch vụ bên thứ ba, và người điền cũng chẳng phải đăng ký gì.

index.html
<form harvis-form="contact">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>
how it works

Ba bước, và một trong số đó là triển khai lại

Không có trình tạo biểu mẫu nào phải học, cũng không có endpoint nào phải sao chép. Thuộc tính đó là toàn bộ phần thiết lập.

  1. 01

    Thêm thuộc tính

    Đặt harvis-form vào bất kỳ biểu mẫu nào trong HTML của bạn. Đặt tên cho nó nếu trang có nhiều hơn một biểu mẫu. Bỏ qua action và method — chúng sẽ được điền vào lúc trang được phục vụ.

  2. 02

    Triển khai lại

    Kéo thư mục vào lần nữa, hoặc chạy npx harvis. Không có gì để cấu hình, không khóa nào phải dán, không công tắc nào phải bật trước trong bảng điều khiển.

  3. 03

    Đọc những gì gửi đến

    Các lượt gửi hiện ra dưới trang của bạn trong bảng điều khiển, mới nhất lên trước. Mở một dòng để đọc toàn bộ, hoặc lấy tất cả dưới dạng CSV.

the markup

Tất cả gói gọn trong hai thuộc tính

harvis viết lại biểu mẫu trên đường nó rời khỏi máy chủ, nên trang bạn viết vẫn cứ là trang bạn viết.

những gì bạn viết
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html">
  <input name="email" type="email" required>
  <button>Send</button>
</form>
những gì khách của bạn nhận được
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html"
      action="/__harvis/form/contact" method="post">
  <input type="hidden" name="_harvis_redirect" value="/thanks.html">
  <input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
  <input name="email" type="email" required>
  <button>Send</button>
</form>

Hai thuộc tính

harvis-form
Đánh dấu biểu mẫu là loại cần thu thập. Giá trị chính là tên của nó, để nhiều biểu mẫu trên cùng một trang không lẫn vào nhau; bỏ trống giá trị thì nó được thu thập dưới tên “default”.
data-harvis-redirect
Không bắt buộc. Trang trên site của bạn để đưa mọi người tới sau khi họ gửi. Bất cứ địa chỉ nào trỏ ra ngoài site của bạn đều bị bỏ qua.
included

Bạn nhận được gì

Mọi thứ bên dưới đều bật sẵn. Chẳng có trang cài đặt nào cho bất kỳ mục nào cả.

  • Không cần JavaScript

    Biểu mẫu gửi đi theo đúng cách HTML vẫn luôn gửi. Nó vẫn chạy khi script bị chặn, trên một chiếc điện thoại chậm, và trong trình duyệt chỉ hiển thị được văn bản.

  • Spam bị lọc

    Mỗi biểu mẫu được phục vụ kèm một trường mồi mà không ai nhìn thấy, và bất cứ thứ gì điền vào đó đều bị bỏ đi mà không báo lại. Giới hạn tần suất khống chế lượng mà một khách truy cập, và một trang, có thể gửi trong một giờ.

  • Bao nhiêu biểu mẫu tùy bạn

    Hãy đặt tên cho chúng — một biểu mẫu liên hệ và một biểu mẫu đăng ký trên cùng một trang mỗi cái giữ danh sách riêng, và bạn có thể lọc cũng như xuất riêng từng cái.

  • Trang cảm ơn của riêng bạn

    Trỏ biểu mẫu tới một trang do bạn viết và đó là nơi mọi người sẽ đến sau khi gửi. Bỏ trống thì họ sẽ thấy một trang xác nhận đơn giản.

  • Xuất ra bất cứ lúc nào

    Một nút bấm cho bạn tệp CSV với một cột cho mọi trường mà bất kỳ ai từng gửi, nên một biểu mẫu có thêm câu hỏi giữa chừng vẫn mở ra thành một bảng duy nhất.

  • Không có gì đi theo ai cả

    Không script theo dõi, không cookie, không bên thứ ba nào trong trang. Địa chỉ của khách truy cập được băm trước khi lưu, và chỉ để giới hạn tần suất phân biệt được hai lượt gửi.

limits

Các giới hạn

Rộng rãi với một biểu mẫu liên hệ, và chặt vừa đủ để một script nhắm vào trang của bạn không làm đầy hộp thư.

Số trường mỗi lượt gửi
30
Độ dài một trường
5.000 ký tự
Dung lượng một lượt gửi
64 KB
Lượt gửi mỗi trang
60 mỗi giờ
Lượt gửi mỗi khách
20 mỗi giờ
Lưu mỗi trang
1.000, mới nhất trước
faq

Câu hỏi

Những gì mọi người hỏi trước khi đặt một biểu mẫu lên trang tĩnh.

Biểu mẫu tĩnh là gì?

Là biểu mẫu trên một trang không có máy chủ riêng. Thường thì điều đó nghĩa là biểu mẫu chẳng có chỗ nào để gửi đi, và đó là lý do các trang tĩnh hay phải mượn một dịch vụ biểu mẫu bên thứ ba. harvis vốn đã phục vụ mọi trang của site bạn rồi, nên nó có thể nhận luôn lượt gửi trên đường đi.

Tôi có cần biết lập trình không?

Bạn chỉ cần thêm được một từ vào một dòng HTML. Nếu site của bạn do AI viết, hãy bảo nó thêm thuộc tính harvis-form vào biểu mẫu — nó biết cách, vì hướng dẫn mà harvis công bố cho các trợ lý AI đã nói vậy.

Nó có chạy khi tắt JavaScript không?

Có. Đó chính là lý do nó được làm theo cách này. Biểu mẫu thực hiện một lượt post HTML thông thường rồi trình duyệt đi theo một chuyển hướng, y hệt cách biểu mẫu hoạt động từ trước khi có JavaScript.

Tôi có thể tiếp tục dùng endpoint riêng hoặc một dịch vụ biểu mẫu khác không?

Được — chỉ cần đừng thêm thuộc tính. Biểu mẫu không có harvis-form sẽ được phục vụ đúng như bạn viết, kể cả action. Với biểu mẫu có thuộc tính đó, harvis sẽ thay action, vì thêm thuộc tính chính là cách bạn nói lượt gửi nên đi về đâu.

Mọi người có đính kèm tệp được không?

Chưa. Ô chọn tệp trên biểu mẫu được thu thập vẫn hoạt động với khách truy cập, nhưng tệp không được lưu — chỉ các trường văn bản mới được giữ lại.

Nếu tôi xóa trang thì các lượt gửi ra sao?

Chúng đi theo luôn. Lượt gửi thuộc về trang chứ không thuộc về một lần triển khai, nên triển khai lại thì vẫn còn, còn xóa trang thì mất hẳn. Hãy xuất CSV trước nếu bạn muốn giữ.

Đưa một trang lên mạng và thử xem

Xuất bản thì miễn phí và mất khoảng hai giây. Thêm thuộc tính vào một biểu mẫu, triển khai lại, rồi tự gửi cho mình một tin nhắn thử.

Đưa một trang lên mạng