# Form

The **Hablla Forms** allow you to create data capture interfaces by **drag-and-drop** (drag-and-drop).\
You build the layout, configure each field and publish it for use in pages, flows and integrations.

> **How it works:** choose the components, drag them to the editing area and adjust the properties in the configuration tabs of each field.

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F3SjZEXBQ5v1asPy1QVXr%2Fimage.png?alt=media&#x26;token=ae11e60f-e0d5-4f79-b4e0-d5e3acc9e242" alt=""><figcaption></figcaption></figure>

### Component library

#### Basic

* **Text Field**: short text field (e.g.: name).
* **Text Area**: long text (notes).
* **Number**: integer/decimal numbers.
* **Password**: password (hidden).
* **Checkbox**: true/false.
* **Select Boxes**: multiple selection via checkboxes.
* **Select**: dropdown list (one option).
* **Radio**: single selection via radio buttons.
* **Button**: action buttons (Submit, Back etc.).

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2Fk5vhbugqRp8y1FpEskB1%2Fimage.png?alt=media&#x26;token=789ef22c-a75e-4b4e-8615-39373aca39f4" alt=""><figcaption></figcaption></figure>

#### Advanced

* **Email** • **Url** • **Phone Number**
* **Tags**: multiple values with chips.
* **Address**: structured address.
* **Date/Time** • **Day** • **Team**
* **Currency**: monetary values.
* **Survey**: question matrix.
* **Signature**: digital signature.

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F04JVMgFNiIRM2CUA1VTz%2Fimage.png?alt=media&#x26;token=ccd23fed-2383-4686-b5df-031ca0da2775" alt=""><figcaption></figcaption></figure>

#### Layout

* **HTML Element**: free HTML block.
* **Content**: static text/MD.
* **Columns**: responsive columns.
* **Field Set** • **Panel**: group fields.
* **Table**: simple tabular grid.
* **Tabs**: tabbed navigation.
* **Well**: highlight box.

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FNmucVuQoovoIv14Uzxnu%2Fimage.png?alt=media&#x26;token=cdd184c0-3017-4e7b-a758-93d6bb279209" alt=""><figcaption></figcaption></figure>

#### Data

* **Hidden**: hidden value (e.g.: UTM).
* **Container**: object with subfields.
* **Data Map**: dynamic key/value pairs.
* **Data Grid / Edit Grid**: editable lists (repeatable rows).

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FXxxL7Xn59DbimB5L5h7h%2Fimage.png?alt=media&#x26;token=fac1d8d3-2f01-4ccc-a983-1f0142526840" alt=""><figcaption></figcaption></figure>

#### Premium

* **File**: file upload.
* **Nested Form**: reuse another form.
* **Custom**: custom-logic component.

<figure><img src="https://1592162275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FF2inLU3DDqpBLdUo5Ujr%2Fimage.png?alt=media&#x26;token=54324009-4179-44b9-8da4-3b5e61650c1b" alt=""><figcaption></figcaption></figure>

***

### Configuration of each field

Each component has configuration tabs. The most used:

* **Display**\
  Label, placeholder, help (tooltip), label position, input and display mask, CSS class, visibility.
* **Data**\
  Internal key (`key`), default value, data source (static, remote), value/label map, persistence.
* **Validation**\
  Required, minimum/maximum length, regex, numeric limits, custom error messages.
* **API**\
  Property name, reference for integrations and webhooks.
* **Conditional**\
  Show/hide based on rules (e.g.: “show *Phone* if *Receive contact via WhatsApp* = Yes”).
* **Logic**\
  Actions on value change (auto-fill, copy from another field, execute expression).
* **Layout**\
  Columns, width, responsiveness and groupings.

> **Tip:** define `Label` (what the user sees) and `Key` (the technical identifier) with clear names. Ex.: `Label: Name`, `Key: nome`.

***

### Example: field **Full name** (JSON)

Below is a minimalist example of a **Text Field** to capture the contact's name.\
You can copy, adapt and reuse.

```json
{
  "label": "Nome",
  "placeholder": "Digite seu nome completo",
  "description": "Informe como deseja ser chamado.",
  "tooltip": "Use apenas letras e espaços.",
  "type": "textfield",
  "key": "nome",
  "autocomplete": "name",
  "input": true,
  "validate": {
    "required": true,
    "minLength": 2,
    "maxLength": 120,
    "pattern": "^[A-Za-zÀ-ÖØ-öø-ÿ'\\- ]+$",
    "customMessage": "Digite um nome válido (apenas letras)."
  },
  "widget": {
    "type": "input"
  },
  "persistent": true,
  "clearOnHide": true,
  "hidden": false
}
```

### Best practices

1. **Standardize keys (`key`)**\
   Use `camelCase` or `snake_case` and avoid spaces (e.g.: `telefoneWhatsApp`, `aceiteTermos`).
2. **Validate at the edge**\
   Apply validations (regex, min/max, required) to reduce invalid data and rework.
3. **Use masks where it makes sense**\
   E.g.: phone, CPF/CNPJ, ZIP. A mask guides input and reduces errors.
4. **Group related items together**\
   Use **Panels**, **Field Sets** or **Tabs** to make the form scannable.
5. **Conditions make the flow smart**\
   Display fields only when they are relevant to reduce friction.
6. **Test on real devices**\
   Check responsiveness and accessibility (keyboard, screen readers, contrast).

***

### Publishing and use

* **Save and preview:** check for validation and responsiveness errors.
* **Integrate into flows:** use the form to capture leads, open tickets, populate People/Organizations or trigger automations.
* **Export submissions:** combine with reports to analyze conversions and data quality.

***

### Summary

* Build forms by **drag-and-drop**.
* Configure each field via the tabs **Display, Data, Validation, API, Conditional, Logic, Layout**.
* Standardize keys, validate inputs and use conditions to **faster and more accurate experiences**.

📌 **Practical tip:** start small (Name, Email, WhatsApp), validate the fields, publish, and only then evolve the form with groups, logic and grids according to the use case.