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.

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.).

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.

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.

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).

Premium

• Fichier: téléversement de fichiers.

• Formulaire imbriqué: réutiliser un autre formulaire.

• Personnalisé: composant avec logique propre.

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.

{
  "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.