# Formulaire

Les **Formulaires Hablla** permettent de créer des interfaces de collecte de données par **glisser-déposer** (drag-and-drop).\
Vous créez la mise en page, configurez chaque champ et publiez pour utilisation dans des pages, des flux et des intégrations.

> **Comment ça marche :** choisissez les composants, faites-les glisser dans la zone d'édition et ajustez les propriétés dans les onglets de configuration de chaque champ.

<figure><img src="https://2835740493-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>

### Bibliothèque de composants

#### Basique

* **Champ de texte**: champ de texte court (ex. : nom).
* **Zone de texte**: texte long (observations).
* **Nombre**: nombres entiers/décimaux.
* **Mot de passe**: mot de passe (masqué).
* **Case à cocher**: vrai/faux.
* **Cases à cocher multiples**: sélection multiple par cases à cocher.
* **Sélection**: liste déroulante (une option).
* **Radio**: sélection unique par boutons radio.
* **Bouton**: boutons d'action (Envoyer, Retour, etc.).

<figure><img src="https://2835740493-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>

#### Avancé

* **Email** • **Url** • **Numéro de téléphone**
* **Tags**: valeurs multiples avec chips.
* **Adresse**: adresse structurée.
* **Date/Heure** • **Jour** • **Équipe**
* **Devise**: valeurs monétaires.
* **Enquête**: matrice de questions.
* **Signature**: signature numérique.

<figure><img src="https://2835740493-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>

#### Mise en page

* **Élément HTML**: bloc HTML libre.
* **Contenu**: texte statique/MD.
* **Columns**: colonnes réactives.
* **Ensemble de champs** • **Panneau**: regrouper les champs.
* **Tableau**: grille tabulaire simple.
* **Onglets**: navigation par onglets.
* **Encadré**: boîte de mise en évidence.

<figure><img src="https://2835740493-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>

#### Données

* **Caché**: valeur cachée (ex. : UTM).
* **Conteneur**: objet avec sous-champs.
* **Carte de données**: paires clé/valeur dynamiques.
* **Grille de données / Grille éditable**: listes éditables (lignes répétables).

<figure><img src="https://2835740493-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

* **Fichier**: téléversement de fichiers.
* **Formulaire imbriqué**: réutiliser un autre formulaire.
* **Personnalisé**: composant avec logique propre.

<figure><img src="https://2835740493-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 de chaque champ

Chaque composant possède des onglets de configuration. Les plus utilisés :

* **Affichage (Display)**\
  Étiquette, placeholder, aide (infobulle), position de l'étiquette, masque de saisie et d'affichage, classe CSS, visibilité.
* **Données (Data)**\
  Clé interne (`key`), valeur par défaut, source de données (statique, distante), mappage valeur/étiquette, persistance.
* **Validation (Validation)**\
  Obligation, taille minimale/maximale, regex, limites numériques, messages d'erreur personnalisés.
* **API**\
  Nom de propriété, référence pour intégrations et webhooks.
* **Conditionnel (Conditional)**\
  Afficher/masquer basé sur des règles (ex. : « afficher *Téléphone* si *Recevoir contact par WhatsApp* = Oui »).
* **Logique (Logic)**\
  Actions lors du changement de valeur (remplissage automatique, copier depuis un autre champ, exécuter une expression).
* **Mise en page**\
  Colonnes, largeur, réactivité et regroupements.

> **Astuce :** définissez `Label` (ce que voit l'utilisateur) et `Key` (l'identifiant technique) avec des noms clairs. Ex. : `Label : Nom`, `Key : nome`.

***

### Exemple : champ **Nom** (JSON)

Ci-dessous un exemple minimaliste d'un **Champ de texte** pour capturer le nom du contact.\
Vous pouvez copier, adapter et réutiliser.

```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
}
```

### Bonnes pratiques

1. **Standardisez les clés (`key`)**\
   Utilisez `camelCase` ou `snake_case` et évitez les espaces (ex. : `telefoneWhatsApp`, `aceiteTermos`).
2. **Validez côté client**\
   Appliquez des validations (regex, min/max, required) pour réduire les données invalides et le retravail.
3. **Utilisez des masques quand cela a du sens**\
   Ex. : téléphone, CPF/CNPJ, CEP. Le masque guide la saisie et réduit les erreurs.
4. **Regroupez ce qui appartient ensemble**\
   Utilisez **Panneaux**, **Ensembles de champs** ou **Onglets** pour rendre le formulaire scannable.
5. **Les conditions rendent le flux intelligent**\
   Affichez les champs uniquement lorsqu'ils sont pertinents pour réduire la friction.
6. **Testez sur des appareils réels**\
   Vérifiez la réactivité et l'accessibilité (clavier, lecteurs d'écran, contraste).

***

### Publication et utilisation

* **Enregistrez et prévisualisez :** vérifiez les erreurs de validation et la réactivité.
* **Intégrer dans des flux :** utilisez le formulaire pour capturer des leads, ouvrir des tickets, alimenter Personnes/Organisations ou déclencher des automatisations.
* **Exporter les soumissions :** combinez avec des rapports pour analyser les conversions et la qualité des données.

***

### Résumé

* Créez des formulaires par **glisser-déposer**.
* Configurez chaque champ via les onglets **Display, Data, Validation, API, Conditional, Logic, Layout**.
* Standardisez les clés, validez les entrées et utilisez des conditions pour **des expériences plus rapides et plus pertinentes**.

📌 **Conseil pratique :** commencez petit (Nom, Email, WhatsApp), validez les champs, publiez, puis faites évoluer le formulaire avec des groupes, logiques et grilles selon le cas d'utilisation.