> For the complete documentation index, see [llms.txt](https://docs.hablla.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hablla.com/hablla-docs-es/hablla/marketing/formulario.md).

# Formulario

Los **Formularios de Hablla** permiten crear interfaces de captura de datos mediante **arrastrar y soltar** (drag-and-drop).\
Usted monta el diseño, configura cada campo y publica para su uso en páginas, flujos e integraciones.

> **Cómo funciona:** elija los componentes, arrástrelos al área de edición y ajuste las propiedades en las pestañas de configuración de cada campo.

<figure><img src="/files/aa86f20b9022601182d289d807435a84433f08ae" alt=""><figcaption></figcaption></figure>

### Biblioteca de componentes

#### Básico

* **Campo de texto**: campo de texto corto (ej.: nombre).
* **Área de texto**: texto largo (observaciones).
* **Número**: números enteros/decimales.
* **Contraseña**: contraseña (oculta).
* **Casilla de verificación**: verdadero/falso.
* **Cuadros de selección**: selección múltiple mediante checkboxes.
* **Seleccionar**: lista desplegable (una opción).
* **Radio**: selección única mediante botones de radio.
* **Botón**: botones de acción (Enviar, Volver, etc.).

<figure><img src="/files/1389797697920aedb7ea55e94f8e18a868d6580c" alt=""><figcaption></figcaption></figure>

#### Avanzado

* **Correo electrónico** • **Url** • **Número de teléfono**
* **Etiquetas**: múltiples valores con chips.
* **Dirección**: dirección estructurada.
* **Fecha/Hora** • **Día** • **Equipo**
* **Moneda**: valores monetarios.
* **Encuesta**: matriz de preguntas.
* **Firma**: firma digital.

<figure><img src="/files/7ceb6c5a0ce8af2273b7db09c70ad13d6641e413" alt=""><figcaption></figcaption></figure>

#### Diseño

* **Elemento HTML**: bloque HTML libre.
* **Contenido**: texto estático/MD.
* **Columns**: columnas responsivas.
* **Conjunto de campos** • **Panel**: agrupar campos.
* **Tabla**: cuadrícula tabular simple.
* **Pestañas**: navegación por pestañas.
* **Well**: cuadro destacado.

<figure><img src="/files/e6e3b3d25cb2b77ad95a38a62036e3c8ac3b3cf7" alt=""><figcaption></figcaption></figure>

#### Datos

* **Oculto**: valor oculto (ej.: UTM).
* **Contenedor**: objeto con subcampos.
* **Mapa de datos**: pares clave/valor dinámicos.
* **Cuadrícula de datos / Cuadrícula editable**: listas editables (filas repetibles).

<figure><img src="/files/38573f2d285e7e04669c56c3e64074fec3f006b6" alt=""><figcaption></figcaption></figure>

#### Premium

* **Archivo**: carga de archivos.
* **Formulario anidado**: reutilizar otro formulario.
* **Personalizado**: componente con lógica propia.

<figure><img src="/files/d275e1af218d343c8b1ff8deab7f0d8be15b2313" alt=""><figcaption></figcaption></figure>

***

### Configuración de cada campo

Cada componente posee pestañas de configuración. Las más usadas:

* **Display (Visualización)**\
  Etiqueta, placeholder, ayuda (tooltip), posición de la etiqueta, máscara de entrada y de visualización, clase CSS, visibilidad.
* **Data (Datos)**\
  Clave interna (`key`), valor por defecto, fuente de datos (estático, remoto), mapa de valor/etiqueta, persistencia.
* **Validation (Validación)**\
  Obligatoriedad, tamaño mínimo/máximo, regex, límites numéricos, mensajes de error personalizados.
* **API**\
  Nombre de propiedad, referencia para integraciones y webhooks.
* **Conditional (Condición)**\
  Mostrar/ocultar basado en reglas (ej.: “mostrar *Teléfono* si *Recibir contacto por WhatsApp* = Sí”).
* **Logic (Lógica)**\
  Acciones al cambiar el valor (relleno automático, copiar de otro campo, ejecutar expresión).
* **Diseño**\
  Columnas, ancho, capacidad de respuesta y agrupamientos.

> **Consejo:** defina `Etiqueta` (lo que el usuario ve) y `Clave` (el identificador técnico) con nombres claros. Ej.: `Etiqueta: Nombre`, `Clave: nombre`.

***

### Ejemplo: campo **Nombre** (JSON)

A continuación un ejemplo minimalista de un **Campo de texto** para capturar el nombre del contacto.\
Puede copiar, adaptar y reutilizar.

```json
{
  "label": "Nombre",
  "placeholder": "Ingrese su nombre completo",
  "description": "Indique cómo desea ser llamado.",
  "tooltip": "Use solo letras y espacios.",
  "type": "textfield",
  "key": "nombre",
  "autocomplete": "name",
  "input": true,
  "validate": {
    "required": true,
    "minLength": 2,
    "maxLength": 120,
    "pattern": "^[A-Za-zÀ-ÖØ-öø-ÿ'\\- ]+$",
    "customMessage": "Ingrese un nombre válido (solo letras)."
  },
  "widget": {
    "type": "input"
  },
  "persistent": true,
  "clearOnHide": true,
  "hidden": false
}
```

### Mejores prácticas

1. **Estandarice claves (`key`)**\
   Use `camelCase` o `snake_case` y evite espacios (ej.: `telefonoWhatsApp`, `aceptaTerminos`).
2. **Valide en el borde**\
   Aplique validaciones (regex, min/max, required) para reducir datos inválidos y retrabajo.
3. **Use máscaras cuando tenga sentido**\
   Ej.: teléfono, CPF/CNPJ, CEP. La máscara guía el llenado y reduce errores.
4. **Agrupe lo que pertenece junto**\
   Use **Paneles**, **Conjuntos de campos** o **Pestañas** para hacer el formulario escaneable.
5. **Las condiciones hacen el flujo inteligente**\
   Muestre campos solo cuando sean relevantes para reducir fricción.
6. **Pruebe en dispositivos reales**\
   Verifique la capacidad de respuesta y accesibilidad (teclado, lectores de pantalla, contraste).

***

### Publicación y uso

* **Guardar y previsualizar:** revise errores de validación y capacidad de respuesta.
* **Integrar en flujos:** use el formulario para capturar leads, abrir tickets, alimentar Personas/Organizaciones o disparar automatizaciones.
* **Exportar envíos:** combínelo con informes para analizar conversiones y calidad de datos.

***

### Resumen

* Monte formularios por **arrastrar y soltar**.
* Configure cada campo mediante las pestañas **Display, Data, Validation, API, Conditional, Logic, Layout**.
* Estandarice claves, valide entradas y use condiciones para **experiencias más rápidas y acertadas**.

📌 **Consejo práctico:** comience pequeño (Nombre, Correo, WhatsApp), valide los campos, publique, y solo entonces evolucione el formulario con grupos, lógicas y grids según el caso de uso.


---

# 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://docs.hablla.com/hablla-docs-es/hablla/marketing/formulario.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.