> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-feat-sdk-reference-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> En savoir plus sur les nœuds disponibles et les composants de champ de saisie que vous pouvez afficher à l’aide de Forms.
# Nœuds et composants
Forms vous permet d’ajouter des nœuds et des composants, comme des champs, des blocs et des widgets, avec lesquels vos utilisateurs peuvent interagir dans le formulaire. Vous pouvez ensuite utiliser, dans vos formulaires et vos flux, les données saisies dans les composants.
Il existe cinq types de Form nodes : Start, Step, Flow, Router et écran de fin. Ces nœuds jouent un rôle très précis dans la structure du formulaire.
Step node
Les step nodes constituent la représentation visuelle du form. Ils peuvent contenir n’importe quel nombre de composants, comme des champs, des blocs et des widgets, dans lesquels l’utilisateur peut saisir ses données.
Composants de champ
Les champs sont des composants d’interface utilisateur permettant aux utilisateurs de saisir leurs renseignements dans Forms.
Paramètres des champs
Les champs comportent un certain nombre de paramètres par défaut que vous pouvez configurer selon vos besoins.
Les paramètres par défaut des champs sont :
| Paramètres | Description |
| - | - |
| ID | L’ID unique |
| Libellé | Afficher ou masquer un libellé |
| Obligatoire | Une valeur est requise |
| Texte d’aide | Afficher un texte d’aide |
| Texte de remplacement | Texte visible par l’utilisateur |
| Valeur par défaut | Valeur par défaut visible par l’utilisateur |
| Temporaire | Activer ou désactiver le masquage des données |
Règles de validation des champs
| Paramètres | Description |
| - | - |
| Longueur min. / Longueur max. | Définit une longueur minimale ou maximale pour la valeur saisie. |
| Valeur min. / Valeur max. | Définit une valeur numérique minimale ou maximale. |
Voici les champs disponibles, avec leurs paramètres propres et leurs types de données de sortie :
Le champ standard permet à l’utilisateur de saisir n’importe quelle chaîne de caractères.
Paramètres du champ de texte
Le paramètre du champ de texte est :
| Paramètres | Description |
| - | - |
| Multiligne | Active la saisie de texte sur plusieurs lignes. |
Valeur de sortie du champ de texte
Le type de données de la valeur de sortie du champ de texte est `string`.
```json lines theme={null}
{
"text_field_id": "Auth0"
}
```
Le champ de saisie standard permet à l’utilisateur d’entrer des adresses courriel sous forme de texte.
Valeur de sortie du champ Email
Le type de données de la valeur de sortie du champ Email est `string`.
```json lines theme={null}
{
"email_field_id": "username@domain.com"
}
```
La saisie standard permet à l’utilisateur d’entrer des numéros de téléphone.
Paramètres du champ de numéro de téléphone
Les paramètres du champ de numéro de téléphone sont :
| Paramètres | Description |
| - | - |
| Sélecteur de pays | Active ou désactive le sélecteur de pays. Par défaut, il affiche l’emplacement IP de l’utilisateur. |
| Texte de l’espace réservé du filtre | Texte affiché à l’utilisateur dans la fenêtre de recherche de pays. |
Valeur de sortie du champ de numéro de téléphone
Le type de données de la valeur de sortie du champ de numéro de téléphone est soit `string`, soit, si le sélecteur de pays est activé, `object`.
La valeur de sortie du champ de numéro de téléphone sous forme de `string` :
```json lines theme={null}
{
"phone_field_id": "8005550175"
}
```
Le champ phone renvoie une valeur du type de données `object` :
```json lines theme={null}
{
"phone_field_id": {
"national_number": "8005550175",
"national_format": "(800) 555-0175",
"international_number": "+18005550175",
"international_format": "+1 800-555-0175",
"country_code_iso": "US",
"country_code_number": "1"
}
}
```
Champ standard qui permet à un utilisateur de sélectionner une ou plusieurs valeurs.
Paramètres du champ Choice
Les paramètres du champ Choice sont :
| Settings | Description |
| - | - |
| Choix multiple | Active plusieurs options de choix. |
| Autre option | Permet aux utilisateurs de saisir leur propre option. |
| Advanced > Valeurs internes | Attribue une valeur interne à chaque option de choix. |
| Advanced > Modification en bloc | Modifie en bloc les valeurs de libellé et les valeurs internes des options de choix. |
Valeur de sortie du champ Choice
Le type de données de la valeur de sortie du champ Choice est soit une `string`, soit, si le choix multiple est activé, un `array of strings` .
La valeur de sortie du champ Choice de type `string` :
```json lines theme={null}
{
"choice_field_id": "Option A"
}
```
Le type de données de sortie du champ de choix est un `tableau de chaînes de caractères` :
```json lines theme={null}
{
"choice_field_id": ["Option A", "Option B"]
}
```
Champ standard qui permet à l’utilisateur de sélectionner une ou plusieurs valeurs d’image.
Paramètres du champ Cards
Les paramètres du champ Cards sont :
| Paramètres | Description |
| - | - |
| Choix multiple | Permet de sélectionner plusieurs options. |
| Masquer les libellés | Masque les libellés des cartes. |
| Avancé > Valeurs internes | Attribue une valeur interne à chaque option. |
Valeur de sortie du champ Cards
Le type de données de la valeur de sortie du champ Cards est soit une `string` ou, si le choix multiple est activé, un `array of strings`.
La valeur de sortie du champ Cards sous forme de `string` :
```json lines theme={null}
{
"card_field_id": "Option A"
}
```
Le champ cards renvoie une valeur dont le type de données est `array of strings` :
```json lines theme={null}
{
"card_field_id": ["Option A", "Option B"]
}
```
Le champ de saisie standard permet à l’utilisateur d’entrer une URL.
Valeur de sortie du champ URL
Le type de données de la valeur de sortie du champ URL est une chaîne de caractères :
```json lines theme={null}
{
"url_field_id": "https://auth0.com"
}
```
Champ de saisie standard qui permet à l’utilisateur d’entrer un mot de passe ou une valeur secrète.
Paramètres du champ de mot de passe
Les paramètres du champ de mot de passe sont :
| Paramètres | Description |
| - | - |
| Exiger un mot de passe complexe | Les mots de passe doivent contenir une majuscule, une minuscule, un symbole et un chiffre. |
| Appliquer les directives du NIST | Le mot de passe doit comporter au moins 8 caractères et ne peut pas provenir de corpus de brèches antérieures, contenir des mots du dictionnaire, des caractères répétitifs ou séquentiels, ni des mots liés au contenu. |
| Ajouter un indicateur de robustesse | Un indicateur graphique avec une échelle rouge, jaune et verte s’affiche sous le champ de mot de passe pour montrer la robustesse du mot de passe saisi. |
| Hachage | Sélectionnez un algorithme pour hacher la valeur saisie directement dans le navigateur. |
Valeur de sortie du champ de mot de passe
Le type de données de la valeur de sortie du champ de mot de passe est une `string` masquée :
```json lines theme={null}
{
"password_field_id": "███"
}
```
Champ standard permettant à un utilisateur de saisir des renseignements de paiement au moyen d’un fournisseur de paiement. Les paiements sont traités avant le nœud Ending.
Paramètres du champ de paiement
Les paramètres du champ de paiement sont :
| Paramètres | Description |
| - | - |
| Type de paiement | Sélectionnez soit un paiement unique (Charge), soit un paiement récurrent (Subscription). |
| Montant | Indiquez le montant d’un paiement unique (Charge). |
| Devise | Indiquez la devise d’un paiement unique (Charge). |
| Action d’abonnement | Sélectionnez soit la création, soit la mise à jour d’un abonnement existant. |
| Action du client | Sélectionnez soit la création, soit la mise à jour d’un client existant. |
| Options d’affichage | Affichez et modifiez les libellés de Numéro de carte, Date d’expiration et Code de sécurité, ainsi que les sceaux de confiance. |
Valeur de sortie du champ de paiement
Le type de données de la valeur de sortie du champ de paiement est soit une chaîne de caractères, soit un objet pour les flux après la soumission.
Le type de données de la valeur de sortie du champ de paiement en tant que `string` :
```json lines theme={null}
{
"payment_field_id": "pm_1P19e..."
}
```
Le type de données de la valeur de sortie du champ de paiement pour les abonnements, sous forme d’`object` :
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"price_ids": [
"price_1ONHR..."
],
"subscription_id": "sub_1P1A...",
"payment_intent_id": "pi_3P19e5..."
}
}
```
Le type de données de la valeur de sortie du champ payment pour charge sous forme d’`object` :
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"amount": 100,
"payment_intent_id": "pi_3P19e5..."
}
}
```
Entrée standard qui ajoute un texte juridique et une case à cocher.
Valeur de sortie du champ juridique
Le type de données de la valeur de sortie du champ juridique est un `boolean`.
```json lines theme={null}
{
"legal_field_id": true
}
```
Entrée standard permettant à un utilisateur de sélectionner une ou plusieurs valeurs dans une liste déroulante.
Paramètres du champ de liste déroulante
Les paramètres du champ de liste déroulante sont :
| Paramètres | Description |
| - | - |
| Sélection multiple | Permet de sélectionner plusieurs options. |
| Avancé > Valeurs internes | Attribuez une valeur interne à chaque option. |
| Avancé > Modification en bloc | Modifiez en bloc le libellé et les valeurs internes. |
Valeur de sortie du champ de liste déroulante
Le type de données de la valeur de sortie du champ de liste déroulante est soit `string` ou, si la sélection multiple est activée, `array of strings` .
La valeur de sortie du champ de liste déroulante de type `string` :
```json lines theme={null}
{
"dropdown_field_id": "Option A"
}
```
Le type de données de sortie du champ de liste déroulante est `array of strings` :
```json lines theme={null}
{
"dropdown_field_id": ["Option A", "Option B"]
}
```
Champ standard qui permet à l’utilisateur de saisir des valeurs numériques.
Valeur de sortie du champ numérique
Le type de données de la valeur de sortie du champ numérique est `number`.
```json lines theme={null}
{
"number_field_id": 123
}
```
Entrée standard qui permet à un utilisateur de saisir une date ou une heure.
Paramètres du champ Date / heure
Les paramètres du champ date/heure comprennent :
| Clé | Description |
| - | - |
| Format | Sélectionnez le format Date ou Heure. |
Valeur de sortie du champ Date / heure
La valeur du type de données de sortie du champ date/heure pour une date est une `string` :
```json lines theme={null}
{
"date_time_field_id": "2023-04-11"
}
```
La valeur du type de données de sortie pour l’heure du champ date/heure est une `string` :
```json lines theme={null}
{
"date_time_field_id": "23:15"
}
```
Entrée standard permettant à l’utilisateur de saisir des valeurs vrai ou faux.
Valeur de sortie du champ booléen
Le type de données de la valeur de sortie du champ booléen est un booléen.
```json lines theme={null}
{
"boolean_field_id": true
}
```
Champ standard que vous pouvez personnaliser pour créer votre propre champ.
Paramètres du champ personnalisé
Les paramètres du champ personnalisé sont :
| Settings | Description |
| - | - |
| Params | Ajoutez des paires clé-valeur pour les référencer dans le code source du champ personnalisé. |
| Source code | Ajoutez votre code Javascript au champ personnalisé. |
| JSON Schema | Par défaut, le champ personnalisé accepte tout format de valeur. Toutefois, vous pouvez utiliser JSON Schema pour valider les valeurs. |
Pour en savoir plus, consultez [Composants de champ personnalisé pour Forms](/docs/fr-ca/customize/forms/custom-field-components).
Composants Blocks
Les Blocks sont des composants d’interface utilisateur qui ajoutent des fonctionnalités à vos formulaires sans recueillir de renseignements auprès des utilisateurs.
Les blocs disponibles sont :
Un bouton qui permet aux utilisateurs de passer au nœud de formulaire suivant.
* Avant de continuer, les règles de validation des champs sont appliquées et validées côté client et côté serveur. Si les règles de validation des champs échouent, un message d’erreur s’affiche.
* Si le nœud suivant est un nœud de flux, un indicateur de chargement s’affiche jusqu’à ce que le flux soit terminé. Si le flux échoue ou renvoie un message d’erreur personnalisé, un message d’erreur s’affiche.
Un bouton qui permet aux utilisateurs de revenir au nœud d’étape précédent.
Si un utilisateur sélectionne le bouton précédent, les règles de validation des champs sont exécutées de nouveau, même si aucune modification n’a été apportée aux données saisies avant de continuer.
Un bouton qui permet aux utilisateurs d’ignorer l’étape en cours et de passer directement au nœud de destination.
Lorsque l’étape en cours est ignorée, nous ne validons pas et ne recueillons pas non plus les informations saisies à cette étape.
Un composant qui permet aux utilisateurs de réexécuter un flux pour générer et envoyer un nouveau code OTP
Si un utilisateur sélectionne le bouton de renvoi, le flux associé génère et envoie un nouveau code OTP.
| Paramètres | Description |
| - | - |
| Alignement du texte | Sélectionnez l’alignement du texte : gauche, centre ou droite |
| Texte | Texte par défaut affiché lorsque les utilisateurs sélectionnent le bouton de renvoi |
| Texte du bouton | Texte du bouton |
| Texte d’attente | Texte affiché lorsque les utilisateurs ont sélectionné le bouton de renvoi. Remplace les paramètres `Text` et `Button text`. Utilisez la variable `“{{remaining_seconds}}”` pour afficher dynamiquement le nombre de secondes restantes avant que le bouton d’envoi soit de nouveau activé. Par exemple : “Renvoyer dans `{{remaining_seconds}}` secondes”. |
| Flux | Flux exécuté après que l’utilisateur a sélectionné le bouton de renvoi. |
| Nombre maximal de tentatives | Le nombre maximal de fois que l’utilisateur peut sélectionner le bouton de renvoi |
| Temps d’attente | Le temps d’attente entre les tentatives, en secondes. |
Un bloc de texte enrichi pour personnaliser le nœud d’étape avec des renseignements supplémentaires.
Une ligne pour séparer les différentes sections du nœud d’étape. Elle peut contenir un court texte.
Un bloc HTML pour créer votre interface utilisateur personnalisée.
Un bloc d’image pour personnaliser l’étape en y ajoutant des images.
Les widgets sont des composants prêts à l’emploi dotés d’intégrations tierces qui ajoutent une logique côté client et côté serveur à vos formulaires.
Les widgets disponibles sont :
Un widget qui permet à l’utilisateur de saisir et de valider son adresse.
Les paramètres du widget d’adresse Google comprennent :
| Paramètres | Description |
| - | - |
| Clé d’API | Nécessite une clé d’API Google Maps pour authentifier les requêtes. |
Le type de données de la valeur de sortie du widget d’adresse Google est un `object`.
```json lines theme={null}
{
"google_address_widget_id": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.9654415,
40.8054491
]
},
"properties": {
"geocoding": {
"type": "house",
"housenumber": "2880",
"street": "Broadway",
"city": "New York",
"county": "New York County",
"state": "New York",
"country": "United States",
"postcode": "10025"
}
}
}
}
```
Un widget qui aide à protéger votre site Web contre le pourriel et les abus en vérifiant qu’un utilisateur est bien un humain et non un bot.
Le widget prend en charge :
* Basé sur le score (`v3`)
* Défi (`v2`)
* Badge reCAPTCHA invisible
Différences entre `v2` et `v3` :
* `v2` exige une interaction de l’utilisateur avec des défis visibles, par exemple cliquer sur une case à cocher ou résoudre des casse-têtes.
* `v3` s’exécute en arrière-plan et fournit un score fondé sur le comportement de l’utilisateur, sans exiger d’interaction de sa part. Lorsque vous utilisez cette version, assurez-vous d’implémenter une logique métier supplémentaire pour gérer le score et déterminer si une autre action est nécessaire.
Les paramètres du widget Google reCAPTCHA comprennent :
| Paramètres | Description |
| - | - |
| Clé de site | La clé de site publique utilisée pour initialiser reCAPTCHA sur votre site Web. Vous pouvez la créer dans la [console Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) ou dans votre projet Google Cloud Platform. |
| Clé secrète | La clé secrète utilisée pour communiquer de façon sécurisée avec le service reCAPTCHA côté serveur. Vous pouvez la créer dans la [console Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) ou dans votre projet Google Cloud Platform. |
Valeur de sortie de Google reCAPTCHA
Le type de données de la valeur de sortie du widget Google reCAPTCHA est un `object`.
Exemple de réponse `v2` :
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com"
}
}
```
Exemple de réponse `v3` :
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com",
"score": 0.9
}
}
```
Un widget qui permet à l’utilisateur de vérifier son identité à l’aide d’informations d’identification vérifiables stockées dans son portefeuille numérique.
Les paramètres du widget Informations d’identification vérifiables comprennent :
| Paramètres | Description |
| - | - |
| URL | La valeur URL utilisée pour générer le code QR. Cette valeur est renvoyée dans la propriété `engagement` de la requête de vérification. |
| Texte du lien | Texte de remplacement affiché pour les utilisateurs qui ne peuvent pas balayer le code QR et qui préfèrent ouvrir le lien directement sur leur appareil. |
| Taille | La taille du code QR. |
| Jeton public | Le jeton d’accès requis pour utiliser le point de terminaison de polling. Veuillez vous assurer que le jeton est généré uniquement avec la portée `read:verification_request` afin d’éviter d’exposer l’accès à d’autres ressources. |
| ID de vérification | L’ID de vérification généré lorsque vous lancez la requête de vérification. |
| Temps d’attente maximal | Le temps maximal à attendre pour que le processus de vérification se termine. Une fois la durée définie atteinte, le polling s’arrêtera et une erreur sera générée, quel que soit le statut de vérification. |
Valeur de sortie des Informations d’identification vérifiables
Le type de données de la valeur de sortie du widget Informations d’identification vérifiables est un `object`.
```json lines theme={null}
{
"verifiable_credentials_widget_id": {
"state": "honored",
"reason": "...", // Le champ reason contient des renseignements supplémentaires (s’ils sont disponibles) sur l’état de la requête de vérification.
"presentation": {} // La présentation contient les claims fournis par le portefeuille en réponse à la définition de présentation.
}
}
```
Nœud Router
Les nœuds Router vous permettent d’ajouter des règles pour créer des embranchements conditionnels entre les nœuds.
Par défaut, un nœud Router comporte une seule règle de transit nommée **Default Case** qui se connecte à d’autres nœuds. Vous pouvez ajouter d’autres règles en fonction d’un ensemble de conditions qu’une variable doit remplir pour ensuite se connecter à d’autres nœuds. Pour en savoir plus, consultez [Router.](/docs/fr-ca/customize/forms/routers)
Nœud Flow
Les nœuds Flow vous permettent d’ajouter et de créer, dans vos formulaires, une logique personnalisée et des flows d’intégration. Pour en savoir plus, consultez [Flows.](/docs/fr-ca/customize/forms/flows)
Nœud Start
Les nœuds Start ne sont pas visibles pour l’utilisateur. C’est là que vous pouvez configurer des variables de champs masqués, comme les attributs de l’utilisateur, lorsque vous [affichez un Form avec une Action.](/docs/fr-ca/customize/forms/render)
Nœud d’écran de fin
Chaque formulaire comporte un nœud d’écran de fin. Par défaut, ce nœud reprend le flux d’authentification, et c’est à cet endroit que vous pouvez configurer un flux après la soumission.
