HƯỚNG DẪN CẤU HÌNH PHẦN TỬ TRONG FORM

Để tạo ra một Form thu thập thông tin chuyên nghiệp và hiệu quả, bạn cần hiểu rõ công dụng của từng phần tử và cách sắp xếp chúng. Bài viết này sẽ hướng dẫn chi tiết cách cấu hình các thành phần trong Form của Smax.

1. Quy định về Bố cục (Layout)

Trước khi thêm các phần tử, bạn cần lưu ý về cách chia độ rộng của Form. Hệ thống chia chiều ngang của Form thành 12 khoảng bằng nhau. Bạn có thể tùy chỉnh độ rộng của mỗi phần tử tùy theo nhu cầu:

• col-12: Phần tử chiếm toàn bộ chiều ngang của Form (100%).
• col-6: Phần tử chiếm một nửa chiều ngang (50%).
• col-4: Phần tử chiếm 1/3 chiều ngang (33.3%).
• Từ col-1 đến col-11: Tương ứng với số khoảng mà phần tử đó chiếm dụng.

---

2. Nhóm Phần tử Nhập liệu (Input Group)

Nhóm này dùng để thu thập các thông tin chi tiết từ khách hàng.

2.1. Input (Nhập ngắn)

Dùng cho các câu trả lời ngắn gọn như: Họ tên, Số điện thoại, Email, Địa chỉ email...

Các thông số cấu hình:

• Tiêu đề: Nội dung câu hỏi hiển thị cho khách hàng.
• Thuộc tính: Tên biến trên chatbot dùng để lưu trữ câu trả lời của khách hàng.
• Giá trị mặc định: Nội dung tự động điền sẵn. Nếu khách không nhập gì, hệ thống sẽ ghi nhận giá trị này.
• Placeholder: Đoạn văn bản gợi ý (mờ) nằm trong ô nhập, sẽ biến mất khi khách bắt đầu gõ.
• Kiểu dữ liệu: Giúp hệ thống kiểm tra tính chính xác của dữ liệu (Ví dụ: Chọn Number nếu muốn khách chỉ nhập số, Email để bắt buộc nhập đúng định dạng email).
• Bắt buộc: Khi bật tính năng này, khách hàng không thể gửi Form nếu bỏ trống trường này.

2.2. Text Area (Nhập dài)

Tương tự như Input nhưng có khung nhập rộng hơn, phù hợp cho các nội dung dài như: Mô tả bản thân, Ghi chú đơn hàng, Ý kiến đóng góp...

2.3. Date & Time (Ngày và Giờ)

Dùng để thu thập mốc thời gian chính xác.

• Date: Chọn ngày/tháng/năm (Ví dụ: Ngày sinh, Ngày đặt bàn).
• Time: Chọn giờ/phút (Ví dụ: Giờ hẹn tư vấn, Giờ giao hàng).

2.4. Location (Địa chỉ)

Hỗ trợ khách hàng chọn địa chỉ nhanh chóng (Hiện tại chỉ hỗ trợ tại Việt Nam).

---

3. Nhóm Phần tử Lựa chọn (Selection Group)

Nhóm này giúp khách hàng trả lời nhanh bằng cách chọn các phương án có sẵn, tránh sai sót khi nhập liệu.

3.1. Select (Danh sách thả xuống)

Phù hợp khi bạn có một danh sách dài các lựa chọn (Ví dụ: Chọn Tỉnh/Thành phố). Khách hàng nhấn vào để xổ ra danh sách và chọn một mục.

• Cách thêm tùy chọn: Nhập nội dung vào ô tùy chọn → Nhấn Enter để lưu.

3.2. Radio (Chọn một)

Dùng khi bạn muốn khách hàng chỉ được chọn duy nhất 1 đáp án trong một danh sách ngắn (Ví dụ: Giới tính Nam/Nữ). Tất cả các lựa chọn được hiển thị sẵn ra màn hình.

3.3. Checkbox (Chọn nhiều)

Dùng cho các câu hỏi cho phép khách hàng chọn nhiều đáp án cùng lúc (Ví dụ: Các sở thích, Các dịch vụ quan tâm).

---

4. Nhóm Phần tử Tiện ích & Hiển thị

4.1. Content (Nội dung mô tả)

Dùng để thêm các đoạn văn bản hướng dẫn, tiêu đề phụ hoặc thông báo vào trong Form để khách hàng dễ theo dõi. Bạn có thể kết hợp Content với các Radio/Checkbox để tạo thành một câu hỏi hoàn chỉnh.

4.2. Slide show (Trình chiếu ảnh)

Hiển thị danh sách các hình ảnh trượt ngang, giúp Form sinh động hơn hoặc dùng để giới thiệu sản phẩm/mẫu mã trước khi khách điền thông tin.

4.3. Upload (Tải tệp tin)

Cho phép khách hàng gửi hình ảnh hoặc tệp tin lên hệ thống (Ví dụ: Gửi ảnh chụp hóa đơn, Ảnh căn cước công dân).

---

5. Hoàn tất Form (Action)

Button Submit (Nút xác nhận)

Đây là phần tử cuối cùng của Form. Dùng để tạo nút "Gửi thông tin", "Xác nhận" hoặc "Điền lại". Khi khách nhấn nút này, toàn bộ dữ liệu trong Form sẽ được lưu vào các Thuộc tính tương ứng trên chatbot.

---

💡 Ví dụ ứng dụng thực tế

Để bạn dễ hình dung, dưới đây là cách phối hợp các phần tử cho một số loại Form phổ biến:

Case 1: Form Đặt Lịch Hẹn Tư Vấn

1. Content: "Vui lòng để lại thông tin để chuyên viên liên hệ" → col-12
2. Input: "Họ và tên" → col-6 (Bắt buộc)
3. Input: "Số điện thoại" → col-6 (Bắt buộc, Kiểu dữ liệu: Number)
4. Date: "Ngày hẹn" → col-6
5. Time: "Giờ hẹn" → col-6
6. Select: "Dịch vụ quan tâm" → col-12
7. Button Submit: "Đăng ký ngay" → col-12

Case 2: Form Thu Thập Ý Kiến Khách Hàng

1. Slide show: Ảnh các sản phẩm vừa mua → col-12
2. Radio: "Bạn có hài lòng với sản phẩm không?" (Có/Không) → col-12
3. Checkbox: "Bạn thích điểm nào nhất?" (Giá cả, Chất lượng, Giao hàng, CSKH) → col-12
4. Text Area: "Góp ý chi tiết cho chúng tôi" → col-12
5. Button Submit: "Gửi đánh giá" → col-12