> For the complete documentation index, see [llms.txt](https://tailieu.botplus.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tailieu.botplus.io/webview/cac-loai-webview/form-builder/cau-hinh-cac-field.md).

# Cấu hình các Field

Dưới đây là giao diện cấu hình của trang xây dựng form

> 1: Là các menu chức năng chính
>
> 2: Là khu vực để thêm các Field (trường) của form (VD text, button, img...)
>
> 3: Là khu vực cấu hình các Field (trường)
>
> 4: Là khu vực xem trước (preview) form.

![](/files/91xmKiIcPG7J99pqYTaC)

## 1- Thẻ Content

Thẻ Content dùng để hiển thị nội dung cho khách hàng.

VD: Hiển thị văn bản, file ảnh, video, bảng, thiết kế như 1 Landipage...

![Content Card](https://i.imgur.com/mJrxuzc.png)

> **Lưu ý** *ở phần này bạn cũng có thể chèn ảnh hoặc video, nhưng để cho không bị vỡ thì bạn cấu hình chiều rộng là 100%*

![](https://i.imgur.com/USIMHmJ.png)

## 2- Thẻ Input

Thẻ Input dùng để thu thập thông tin khách hàng.

> **Title**: Tiêu đề của thẻ.
>
> **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập.
>
> **Default Value:** Giá trị mặc định sẽ được điền sẵn trong ô.
>
> **Placeholder:**  Hiển thị mờ ở phía dưới ô.
>
> **Control Type:** Loại dữ liệu yêu cầu khách hàng nhập vào (Text, Number, Email, Url, Password, Hidden)
>
> **Type Note:** Hiển thị thông báo khi khách hàng không nhập đúng loại dữ liệu yêu cầu bên trên.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Input Card](https://i.imgur.com/jHfNmoQ.png)

## 3- Thẻ Textarea

Là thẻ để khách hàng nhập các nội dung dài như là ghi chú.

> **Title**: Tiêu đề của thẻ.
>
> **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập.
>
> **Default Value:** Giá trị mặc định sẽ được điền sẵn trong ô.
>
> **Placeholder:**  Hiển thị mờ ở phía dưới ô.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Textarea Card](https://i.imgur.com/dKxNrH1.png)

## 4- Thẻ Select

Thẻ này dùng để tạo ra tùy chọn dạng xổ xuống.

> **Title**: Tiêu đề của ô sellect
>
> **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã chọn
>
> **Options**: Các tùy chọn tạo sẵn cho khách hàng
>
> **Default Value**: Giá trị mặc định được chọn sẵn cho khách hàng
>
> **Required**: Có yêu cầu bắt buộc phải chọn hay không 
>
> **Required Note**: Thông báo nếu khách hàng để trống (không chọn dữ liệu)

![Select Card](https://i.imgur.com/HTs8bzi.png)

Lưu ý cách nhập dữ liệu ở phần Options, có 2 giá trị là Value và Name

> Nếu như các bạn nhập ở đây là mình **Value** thôi thì giá trị này sẽ được hiển thị đồng thời được set vào giá trị cho biến
>
> Nếu như các bạn nhập ở đây là **Value | Name** thì **Name** sẽ dùng để hiển thị trên webview, còn **Value** sẽ được dùng để set giá trị cho biến.

![](https://i.imgur.com/8YQ1ruP.png)

## 5- Thẻ checkbox

Thẻ checkbox dùng để lấy ý kiến lựa chọn của khách hàng(có hoặc không).

> **Text**: Nội dung hiển thị của thẻ.
>
> **Control Name**: Tên biến dùng để lưu thông tin khách hàng đã chọn.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Checkbox Card](https://i.imgur.com/Bf5nESa.png)

Lưu Ý: Cách nhập dữ liệu ở phần Text, có 2 giá trị là Value và Text (Value |Text)

> **Text**: Giá trị hiển thị lên trên form.
>
> **Value**: Giá trị được lưu vào **Control Name** khi khách hàng lựa chọn. Trong trường hợp không cài đặt **Value** thì **Control Name** sẽ lưu giá trị là **Text** được cài đặt.

![Checkbox Card](https://i.imgur.com/BjwRjnG.png)

## 6- Thẻ Radio

> **Control Name**: Tên biến dùng để lưu thông tin khách hàng đã chọn
>
> **Options**: Các tùy chọn cho khách hàng.
>
> **Default Value**: Giá trị mặc định được chọn sẵn cho khách hàng
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Radio Card](https://i.imgur.com/3IF8ubA.png)

## 7- Thẻ Date

Thẻ Date dùng cho khách hàng lựa chọn thời gian(Ngày, Tháng, Năm).

> **Title**: Tiêu đề của thẻ
>
> **Control Name:** Tên biến dùng để lưu ngày tháng khách hàng đã nhập
>
> **Date Format**: Định dạng ngày tháng (Bạnc có thể cấu hình định dạng ngày tháng mong muốn vd: dd/mm/yyyy)
>
> **Placeholder**: Ghi chú hiển thị mờ phía dưới ô.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Date Card](https://i.imgur.com/3YIbHtH.png)

## 8- Thẻ Time

Thẻ Time sử dụng để khách hàng điền thông tin thời gian (giờ:phút)

> **Title**: Tiêu đề của thẻ.
>
> **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập.
>
> **Placeholder**: Ghi chú hiển thị mờ phía dưới ô.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![Time Card](https://i.imgur.com/7KONOUZ.png)

## 9- Thẻ Location

Thẻ Location giúp bạn tạo trường địa giới hành chính cho khách hàng lựa chọn giúp lấy thông tin địa chỉ của khách hàng. Hiển tại thẻ chỉ hỗ trợ địa giới tại Việt Nam.

> **Location**: Chọn quốc gia (hiện tại đang chỉ hỗ trợ VN nếu bạn cần quốc gia khác có thể gửi dữ liệu địa giới bên mình sẽ update)
>
> **Level**: Bạn cần sử dụng tới cấp độ nào Tỉnh - Tỉnh Huyện - Tỉnh Huyện Xã
>
> **Province Title**: Tiêu đề của ô nhập tỉnh/tp
>
> **District Title**: Tiêu đề của ô nhập huyện/quận
>
> **Ward Title**: Tiêu đề của ô nhập phường/xã
>
> **Control Name**: Biến lưu Tỉnh Huyện Xã tương ứng.
>
> **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc.
>
> **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu)

![](https://i.imgur.com/MzcwclA.png)

## 10- Thẻ Form Submit

Thẻ Form Submit dùng để submit và gửi thông tin của form đến nền tảng khác được kết nối trong Push data.

> **Reset Name**: Tên nút reset (Nút bấm này có chức năng xóa hết dữ liệu đã nhập)
>
> **Submit Name**: Tên nút submit (Nút này có chắc năng gửi các thông tin khách hàng đã nhập trên form)

![Form](https://i.imgur.com/bgV44a4.png)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tailieu.botplus.io/webview/cac-loai-webview/form-builder/cau-hinh-cac-field.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.