[Video] Hướng dẫn dùng Claude vibe coding tạo form hỏi đáp tương tác

Bạn muốn có một biểu mẫu để nhận câu hỏi hay góp ý từ khách, học viên hoặc đồng nghiệp, nhưng lại ngại mở trình soạn mã, cài thư viện rồi ngồi gõ từng dòng CSS và JavaScript. Chỉ riêng việc kiểm tra dữ liệu nhập, hiện thông báo và lưu lại danh sách câu hỏi cũng đã tốn kha khá thời gian nếu làm thủ công.

Vibe coding với Claude giải quyết bài toán này gọn hơn nhiều. Bạn chỉ cần mô tả form mình muốn bằng tiếng Việt, Claude sẽ viết mã, dựng giao diện và cho bạn dùng thử ngay trong khung xem trước. Bạn chỉ việc kiểm tra, nhắn thêm yêu cầu chỉnh sửa rồi xuất ra một file HTML duy nhất để dùng.

6 bước tạo form hỏi đáp tương tác bằng Claude

Bước 1: Mở Claude và gửi prompt tạo form

Truy cập claude.ai , mở một cuộc trò chuyện mới, dán prompt mô tả form (giao diện, các trường, cách báo lỗi, thông báo toast, lưu localStorage ) rồi bấm nút gửi ở góc dưới bên phải khung chat. Prompt càng nêu rõ hành vi cụ thể thì Claude càng ít phải đoán ý bạn.

Bước 2: Chờ Claude tạo file và thử form trong khung xem trước

Claude sẽ tạo một file HTML và hiển thị bản chạy thử ở khung bên phải . Hãy thử ngay các tình huống: bấm gửi khi để trống, nhập email sai định dạng, rồi nhập đủ thông tin để xem toast xuất hiện và câu hỏi được thêm vào danh sách.

Bước 3: Chuyển sang chế độ xem mã và sao chép

Bấm biểu tượng </> ở góc trên khung bên phải để xem toàn bộ mã nguồn, sau đó bấm nút Copy . Mã có sẵn chú thích tiếng Việt cho các hàm xử lý sự kiện nên bạn dễ tìm chỗ cần sửa.

Bước 4: Lưu file và mở bằng trình duyệt

Dán mã vào một file mới, đặt tên index.html rồi nhấp đúp để mở bằng trình duyệt. Bạn cũng có thể bấm Export và chọn HTML để tải file về trực tiếp. Lần mở đầu nên có Internet vì giao diện nạp Tailwind CSS qua CDN.

Bước 5: Nhờ Claude tích hợp gửi email thật

Quay lại cuộc trò chuyện và yêu cầu Claude tích hợp Formspree hoặc Web3Forms vào thẻ <form> , để mỗi lần có người bấm Gửi câu hỏi , một email thông báo sẽ được gửi về hộp thư quản trị. Danh sách câu hỏi lưu bằng localStorage vẫn được giữ nguyên. Bạn chờ Claude chỉnh sửa file xong là đến bước tiếp theo.

Bước 6: Điền thông tin dịch vụ, thử gửi và kiểm tra hộp thư

Đăng ký dịch vụ nhận biểu mẫu bạn đã chọn, lấy đường dẫn hoặc khóa truy cập rồi điền vào chỗ Claude để sẵn trong mã. Xuất lại file HTML, gửi thử một câu hỏi và kiểm tra hộp thư quản trị (nhớ xem cả thư mục thư rác) trước khi đưa form vào sử dụng thật.

Bộ Prompt mẫu để tinh chỉnh form

Sau khi form gốc chạy ổn, bạn có thể gửi tiếp từng prompt vào cùng cuộc trò chuyện để Claude nâng cấp, chẳng hạn:

• Chống XSS và bọc localStorage trong try/catch để form an toàn và không lỗi khi trình duyệt chặn lưu trữ.
• Thêm trạng thái trống và bộ đếm ký tự cho ô nội dung câu hỏi.
• Thêm tìm kiếm và lọc theo chủ đề cho danh sách câu hỏi đã gửi.
• Thêm chế độ tối và nút xuất lịch sử ra file CSV.

Gửi từng prompt một và thử xong mới gửi tiếp sẽ giúp bạn dễ phát hiện lỗi hơn nhiều so với một prompt quá dài.

Lưu ý quan trọng khi vibe coding

• Luôn kiểm tra thủ công trước khi dùng thật: AI có thể bỏ sót trường hợp biên. Hãy thử các tình huống như để trống, sai email, tải lại trang và xóa lịch sử.
• Không để lộ khóa dịch vụ: Khi chia sẻ mã lên blog hay GitHub, hãy thay đường dẫn hoặc khóa thật bằng chuỗi giữ chỗ như YOUR_ACCESS_KEY_HERE . Cũng không dán mật khẩu hay khóa thật vào khung chat.
• Hiểu đúng giới hạn của localStorage: Dữ liệu chỉ nằm trên trình duyệt của người dùng, bạn không xem được câu hỏi của người khác. Muốn nhận câu hỏi thì cần bước gửi email hoặc một hệ thống lưu trữ riêng.
• Kiểm tra gói dịch vụ trước khi triển khai: Các dịch vụ nhận biểu mẫu thường giới hạn số lượt gửi ở gói miễn phí, và khung xem trước trong Claude có thể hạn chế gửi dữ liệu ra ngoài. Hãy thử lại bằng file đã xuất.
• Lưu lại phiên bản tốt: Trước mỗi lần chỉnh sửa lớn, hãy xuất file HTML để có bản dự phòng.

Kết luận

Dùng Claude để vibe coding giúp biến việc dựng một form hỏi đáp mất nhiều giờ thành quy trình 6 bước mạch lạc: Gửi prompt ➔ Thử trong khung xem trước ➔ Sao chép mã ➔ Lưu và mở file ➔ Tích hợp gửi email ➔ Kiểm tra trước khi dùng thật.

Chỉ cần mô tả rõ hành vi mong muốn, kiểm tra cẩn thận và giữ kín các khóa bí mật, bạn sẽ tiết kiệm được nhiều thời gian mà vẫn có một sản phẩm gọn gàng, dùng được ngay.