Cách xây dựng trình tạo biểu mẫu

Trình tạo biểu mẫu cho phép mọi người tự thiết kế biểu mẫu của mình: chọn trường, đặt quy tắc, xuất bản một đường link và thu thập bài gửi. Bên trong nó gồm ba phần: một định nghĩa biểu mẫu được lưu dưới dạng dữ liệu, một bộ hiển thị biến định nghĩa đó thành biểu mẫu hoạt động được, và một kho bài gửi kèm thông báo và xuất dữ liệu. Trước khi xây, hãy chắc bạn thật sự cần nó: nếu bạn chỉ cần một biểu mẫu liên hệ hoặc biểu mẫu đăng ký, hãy xây trực tiếp biểu mẫu đó và bỏ qua trình tạo.

Bạn có thật sự cần trình tạo không?

Trình tạo là một dự án lớn hơn biểu mẫu nhiều, vì mọi loại trường đều phải hoạt động trong trình chỉnh sửa, biểu mẫu công khai, kiểm tra dữ liệu, lưu trữ, thông báo và xuất dữ liệu.

Trình tạo biểu mẫu cần những gì

Định nghĩa biểu mẫu

Lưu mỗi biểu mẫu thành một danh sách trường, dưới dạng dữ liệu có cấu trúc (JSON trong cột Postgres hoạt động tốt). Một trường có thể trông như sau:

• id: mã ổn định không bao giờ đổi, ngay cả khi nhãn thay đổi
• type: văn bản, email, số, văn bản dài, lựa chọn, hộp kiểm, ngày, file
• label và nội dung trợ giúp
• bắt buộc, tối thiểu / tối đa, loại file được phép
• tùy chọn cho trường lựa chọn
• thứ tự, và tùy chọn một điều kiện (“chỉ hiện khi trường X là Y”)

Trình chỉnh sửa thay đổi danh sách này; biểu mẫu công khai đọc nó. Đó là toàn bộ mấu chốt: không cần mã mới cho từng biểu mẫu.

Bài gửi

• Bài gửi: biểu mẫu, phiên bản biểu mẫu, thời gian gửi, câu trả lời khóa theo ID trường, trạng thái (mới, đã đọc, đã lưu trữ).
• File: file tải lên phải nằm trong kho lưu trữ file, còn bài gửi chỉ giữ một tham chiếu tới nó, không bao giờ nằm trong dòng dữ liệu của cơ sở dữ liệu.

Các trang

• Danh sách biểu mẫu kèm số lượt gửi.
• Trình chỉnh sửa: thêm, sắp xếp lại và cấu hình trường, có bản xem trước trực tiếp ở bên cạnh.
• Cài đặt: thông báo xác nhận hoặc chuyển hướng, email nhận thông báo, ngày mở và đóng, giới hạn số lượt gửi.
• Biểu mẫu công khai tại đường link riêng, và phiên bản có thể nhúng vào các website khác.
• Bảng bài gửi có tìm kiếm, trạng thái, màn hình chi tiết và xuất CSV.

Quyết định và đánh đổi

Phiên bản. Chắc chắn sẽ có người đổi “Số điện thoại” thành “Số di động” sau khi đã có 200 bài gửi. Nếu câu trả lời được lưu theo ID trường và mỗi bài gửi ghi lại phiên bản biểu mẫu, các bài gửi cũ vẫn hiển thị đúng. Nếu không, dữ liệu của bạn sẽ lệch lạc âm thầm.

Kiểm tra dữ liệu chạy hai lần. Kiểm tra trường trên trình duyệt để phản hồi nhanh, và kiểm tra lại trên máy chủ, vì ai cũng có thể gửi dữ liệu thẳng tới endpoint của bạn. Bước kiểm tra trên máy chủ mới là bước quyết định.

Tải file lên. Tính năng này kéo theo chi phí lưu trữ, giới hạn kích thước, kiểm tra loại file và các câu hỏi về quyền riêng tư (CV, giấy tờ tùy thân, biểu mẫu y tế). Hãy giới hạn loại và kích thước, và đặt file tải lên ở chế độ riêng tư mặc định, chỉ chủ biểu mẫu mới đọc được. Xem cách thêm tải file lên vào ứng dụng.

Thông báo. “Gửi email cho tôi khi có người gửi biểu mẫu” là tính năng được mong đợi. Nó cần một nhà cung cấp email và một khóa API; xem cách gửi email từ ứng dụng.

Spam. Biểu mẫu công khai chắc chắn sẽ bị bot tìm thấy. Dùng trường honeypot (ẩn với người, bot vẫn điền), giới hạn tần suất theo IP, kiểm tra trên máy chủ và, nếu cần, dịch vụ CAPTCHA.

Nhúng. Nhúng bằng iframe là cách đơn giản và an toàn nhất để đặt biểu mẫu lên website của người khác. Nhúng bằng script trông tự nhiên hơn nhưng khó xây và khó bảo mật hơn.

Logic điều kiện. “Chỉ hiện trường này nếu…” rất được ưa chuộng nhưng làm số trường hợp cần kiểm thử nhân lên. Hãy thêm nó sau khi phần cơ bản đã vững.

Một prompt đầu tiên hiệu quả

Xây dựng một ứng dụng web trình tạo biểu mẫu cho nhóm của tôi. Người dùng đã đăng nhập tạo biểu mẫu trong trình chỉnh sửa có bản xem trước trực tiếp. Các loại trường: văn bản ngắn, văn bản dài, email, số, ngày, lựa chọn một, hộp kiểm và tải file lên. Mỗi trường có ID ổn định, nhãn, nội dung trợ giúp, cờ bắt buộc và quy tắc riêng theo loại (tối thiểu/tối đa, tùy chọn, loại file được phép và giới hạn 10 MB). Lưu định nghĩa biểu mẫu dưới dạng JSON kèm số phiên bản tăng lên mỗi lần xuất bản. Mỗi biểu mẫu có đường link công khai và mã nhúng iframe. Kiểm tra bài gửi trên máy chủ theo phiên bản đã xuất bản, lưu câu trả lời khóa theo ID trường cùng phiên bản biểu mẫu, và đưa file tải lên vào kho file riêng tư. Thêm một trường honeypot ẩn và giới hạn tần suất theo IP. Chủ biểu mẫu thấy bảng bài gửi với trạng thái (mới, đã đọc, đã lưu trữ), màn hình chi tiết và xuất CSV. Lưu mọi thứ trong cơ sở dữ liệu. Để logic điều kiện và thông báo email sang sau.

Các bước xây dựng

1. Trình chỉnh sửa và định nghĩa. Xây một biểu mẫu với mọi loại trường rồi xem JSON đã lưu cùng agent. Nó đã gọn và ổn định chưa?
2. Biểu mẫu công khai. Điền thử trên điện thoại. Kiểm tra thông báo lỗi và màn hình xác nhận.
3. Kiểm tra trên máy chủ. Nhờ agent gửi một bài vi phạm quy tắc thẳng lên máy chủ, bỏ qua trang. Nó phải bị từ chối.
4. Phiên bản. Sau vài bài gửi, đổi tên và sắp xếp lại trường. Các bài gửi cũ vẫn phải hiển thị đúng câu trả lời.
5. Tải file. Thử một file quá lớn và một file sai loại. Xác nhận người lạ không thể mở file đã tải lên bằng cách đoán đường link.
6. Bảng bài gửi và xuất dữ liệu. Kiểm tra xuất CSV với câu trả lời có dấu phẩy, xuống dòng và ký tự có dấu.
7. Thông báo, nhúng, logic. Thêm từng cái một.

Những lỗi thường gặp

• Lưu câu trả lời theo nhãn. Nhãn thay đổi. Hãy dùng ID trường ổn định.
• Kiểm tra dữ liệu chỉ trên trình duyệt. Đó chỉ là tiện lợi, không phải bảo vệ.
• File tải lên công khai. Biểu mẫu thường thu thập tài liệu mà người ta không muốn lộ ra.
• Không có chống spam. Một biểu mẫu công khai có thể bị đầy rác chỉ trong vài ngày.
• Xây trình tạo cho chỉ một biểu mẫu. Hãy xây chính biểu mẫu đó.
• Không giới hạn số bài gửi trên sản phẩm công khai. Nếu khách hàng tự tạo biểu mẫu, hãy đặt giới hạn theo gói, nếu không một biểu mẫu nổi tiếng có thể làm tăng hóa đơn hosting của bạn.

Khi một sản phẩm có sẵn là lựa chọn tốt hơn

Các công cụ biểu mẫu có sẵn rất tốt và rẻ cho đa số nhu cầu. Chúng đã giải quyết xong việc nhúng, spam, thanh toán, tích hợp và khả năng tiếp cận trên hàng chục loại trường. Nếu nhóm bạn chỉ cần biểu mẫu, hãy dùng một công cụ như vậy: xem các lựa chọn thay thế Typeform và các lựa chọn thay thế Google Forms.

Hãy tự xây khi bài gửi cần nằm cạnh dữ liệu riêng của bạn (đưa vào CRM hoặc cổng khách hàng do bạn vận hành), khi bạn cần quy trình sau khi gửi mà các công cụ không làm được, khi vị trí hay quyền sở hữu dữ liệu là một yêu cầu, hoặc khi biểu mẫu là một tính năng của sản phẩm bạn bán.

Xây dựng với Mythex

Trên Mythex, bạn mô tả trình tạo trong khung chat và kiểm tra trình chỉnh sửa cùng biểu mẫu công khai cạnh nhau trong bản xem trước trực tiếp. Mythex thêm một cơ sở dữ liệu riêng cho định nghĩa biểu mẫu và bài gửi, và tự bật lưu trữ file khi ứng dụng cần tải lên (giới hạn 1 GB trên gói Miễn phí). Email thông báo đi qua nhà cung cấp mà bạn kết nối bằng khóa của riêng mình. Xuất bản ứng dụng lên một đường link mythex.ai, hoặc tên miền riêng trên gói Pro, và các đường link biểu mẫu công khai sẽ hoạt động từ đó.

Câu hỏi thường gặp