# 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="/files/f20453cca69902dbbb8b61ce18e9122a9d974850" 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="/files/9e0d31c603e13a3aae50c392fbb823760ce926b1" 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="/files/fa5c99ad147e2d6a3eae83b9d6c7341695681df4" 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="/files/5dba63c65d3555ce6b5b1bff0da8301c7b1be1a8" 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="/files/d430e0142d3ba0920094e41a2b1189d25f64dd1b" 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="/files/8298d393a78e23aeddf18cfee4037939be997f8b" 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.


---

# Agent Instructions: 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:

```
GET https://docs.hablla.com/french/hablla/marketing/formulaire.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.