> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Découvrez les nœuds de formulaire et les composants offerts.
# Nœuds et composants
Forms vous permet d’ajouter des nœuds et des composants, comme des champs, des blocs et des widgets, pour que vos utilisateurs puissent interagir avec le formulaire. Vous pouvez ensuite réutiliser, dans vos formulaires et vos flux, les données saisies dans ces composants.
## Nœuds de formulaire
Il existe cinq types de nœuds de formulaire : Start, Step, Flow, Router et Ending screen. Ces nœuds ont chacun une fonction bien précise dans la structure du formulaire.
## Nœud d’étape
Les nœuds d’étape constituent la représentation visuelle du formulaire. Ils peuvent contenir autant de composants que nécessaire, comme des champs, des blocs et des widgets dans lesquels l’utilisateur peut saisir ses données.
### Composants de champs
Les champs sont des composants de l’interface utilisateur qui permettent aux utilisateurs de saisir leurs renseignements dans Forms.
#### Paramètres des champs
Les champs comportent plusieurs 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’identifiant unique |
| Libellé | Afficher ou masquer un libellé |
| Obligatoire | Une valeur doit être saisie |
| Texte d’aide | Afficher un texte d’aide |
| Texte de remplacement | Texte affiché à l’utilisateur |
| Valeur par défaut | Valeur par défaut affichée à 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. | Exige une longueur minimale ou maximale pour la valeur saisie. |
| Valeur min. / Valeur max. | Exige une valeur numérique minimale ou maximale. |
#### Champs disponibles dans Forms
Voici les champs disponibles, ainsi que leurs paramètres spécifiques et leurs types de données en sortie :
La saisie standard permet à l’utilisateur d’entrer n’importe quelle chaîne de caractères.
##### Paramètres du champ texte
Le paramètre du champ texte est :
| Paramètres | Description |
| ---------- | ----------------------------------------------- |
| Multiligne | Active la saisie de texte sur plusieurs lignes. |
##### Valeur de sortie du champ texte
Le type de données de la valeur de sortie du champ texte est `string`.
```json lines theme={null}
{
"text_field_id": "Auth0"
}
```
La saisie standard permet à l’utilisateur d’entrer des valeurs de type chaîne de caractères pour les adresses courriel.
##### Valeur de sortie du champ de courriel
Le type de données de la valeur de sortie du champ de courriel est une `string`.
```json lines theme={null}
{
"email_field_id": "username@domain.com"
}
```
Le champ de saisie standard permet à l’utilisateur d’entrer des numéros de téléphone.
##### Paramètres du champ Téléphone
Les paramètres du champ Téléphone sont les suivants :
| Paramètres | Description |
| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Sélecteur de pays | Active ou désactive le sélecteur de pays. Par défaut, il affiche l’emplacement de l’utilisateur d’après son IP. |
| Texte indicatif du filtre | Texte visible par l’utilisateur dans la fenêtre de recherche de pays. |
##### Valeur de sortie du champ Téléphone
Le type de données de la valeur de sortie du champ Téléphone est soit une `string`, soit, si le sélecteur de pays est activé, un `object`.
La valeur de sortie du champ Téléphone lorsque le type de données est une `string` :
```json lines theme={null}
{
"phone_field_id": "8005550175"
}
```
La valeur de sortie du champ de téléphone est 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 de saisie standard qui permet à un utilisateur de sélectionner une ou plusieurs valeurs.
##### Paramètres du champ Choice
Les paramètres du champ Choice sont :
| Paramètres | Description |
| ------------------------------- | ----------------------------------------------------------------- |
| Choix multiples | Permet de sélectionner plusieurs options. |
| Autre option | Permet aux utilisateurs de saisir leur propre option. |
| Advanced > Valeurs internes | Attribue une valeur interne à chaque option. |
| Advanced > Modification en bloc | Modifie en bloc les libellés et les valeurs internes des options. |
##### 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 sous forme de `string` :
```json lines theme={null}
{
"choice_field_id": "Option A"
}
```
La valeur du 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 à un utilisateur de sélectionner une ou plusieurs valeurs d’image.
##### Paramètres du champ Cards
Les paramètres du champ Cards sont les suivants :
| Paramètres | Description |
| --------------------------- | -------------------------------------------- |
| Choix multiples | Permet de sélectionner plusieurs options. |
| Masquer les étiquettes | Masque les étiquettes des cartes. |
| Advanced > 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`, soit, si le choix multiple est activé, un `array of strings`.
Type de données de 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 de type `array of strings` :
```json lines theme={null}
{
"card_field_id": ["Option A", "Option B"]
}
```
La saisie standard permet à l’utilisateur d’entrer une valeur d’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 à un 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 failles antérieures, être un mot du dictionnaire, contenir des caractères répétitifs ou séquentiels, ni des mots liés au contenu. |
| Ajouter un indicateur de sécurité | Un indicateur graphique avec une échelle rouge, jaune et verte s’affiche sous le champ de mot de passe pour montrer le niveau de sécurité 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 qui permet à un utilisateur de saisir des renseignements de paiement à l’aide d’un fournisseur de services 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 un paiement ponctuel (Charge) ou un paiement récurrent (Subscription). |
| Montant | Indiquez le montant d’un paiement ponctuel (Charge). |
| Devise | Indiquez la devise d’un paiement ponctuel (Charge). |
| Action d’abonnement | Sélectionnez la création ou la mise à jour d’un abonnement existant. |
| Action du client | Sélectionnez la création ou la mise à jour d’un client existant. |
| Options d’affichage | Affichez et modifiez les libellés 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, soit un objet pour les flux après 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 est de type `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..."
}
}
```
Pour charge, le type de données de la valeur de sortie du champ de paiement est un `object` :
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"amount": 100,
"payment_intent_id": "pi_3P19e5..."
}
}
```
Champ standard qui ajoute des mentions légales et une case à cocher.
##### Valeur de sortie du champ légal
Le type de données de la valeur de sortie du champ légal est un `boolean`.
```json lines theme={null}
{
"legal_field_id": true
}
```
Champ d’entrée standard qui permet à l’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 d’activer plusieurs options de choix. |
| Advanced > Valeurs internes | Attribue une valeur interne à chaque option. |
| Advanced > Modification en lot | Modifie en lot les libellés 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 une `string` ou, si le choix multiple est activé, un `array of strings`.
La valeur de sortie du champ de liste déroulante comme `string` :
```json lines theme={null}
{
"dropdown_field_id": "Option A"
}
```
La valeur du type de données de sortie du champ de liste déroulante est un `array of strings` :
```json lines theme={null}
{
"dropdown_field_id": ["Option A", "Option B"]
}
```
Champ de saisie standard permettant à l’utilisateur d’entrer 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
}
```
Champ de saisie standard qui permet à l’utilisateur d’entrer 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
Pour une date, la valeur de sortie du type de données du champ date/heure est une `string` :
```json lines theme={null}
{
"date_time_field_id": "2023-04-11"
}
```
Pour l’heure, la valeur du type de données de sortie du champ date/heure est une `string` :
```json lines theme={null}
{
"date_time_field_id": "23:15"
}
```
Entrée standard qui permet à 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 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 les suivants :
| Paramètres | Description |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Params | Ajoutez des paires clé-valeur auxquelles vous pourrez faire référence 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 n’importe quel format de valeur. Vous pouvez toutefois utiliser JSON Schema pour valider les valeurs. |
Pour en savoir plus, consultez [Composants de champ personnalisés pour les formulaires](/fr-CA/docs/customize/forms/custom-field-components).
### Composants de type bloc
Les blocs sont des composants d’interface utilisateur qui ajoutent des fonctionnalités à vos formulaires, sans recueillir de renseignements sur les utilisateurs.
#### Blocs disponibles dans les formulaires
Les blocs disponibles sont :
Un bouton qui permet aux utilisateurs de passer au nœud suivant du formulaire.
* Avant de continuer, les règles de validation des champs sont appliquées et vérifiées côté client et côté serveur. Si la validation des champs échoue, un message d’erreur s’affiche pour que l’utilisateur puisse corriger la situation.
* 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 de l’étape précédente.
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 renseignements saisis à 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.
| Settings | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alignement du texte | Sélectionnez l’alignement du texte : à gauche, au 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 | Nombre maximal de fois où l’utilisateur peut sélectionner le bouton de renvoi |
| Temps d’attente | Temps d’attente entre les tentatives, en secondes. |
Un bloc de texte enrichi pour personnaliser l’étape avec des renseignements supplémentaires.
Une ligne servant à diviser les différentes sections de l’é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.
### Composants de widget
Les widgets sont des composants prêts à l’emploi, avec des intégrations tierces, qui ajoutent une logique côté client et côté serveur à vos formulaires.
#### Widgets disponibles dans les formulaires
Les widgets disponibles sont :
Un widget qui permet à l’utilisateur de saisir et de valider son adresse.
##### Paramètres du widget d’adresse Google
Les paramètres du widget d’adresse Google comprennent :
| Paramètres | Description |
| ---------- | ----------------------------------------------------------------- |
| Clé API | Nécessite une clé API Google Maps pour authentifier les requêtes. |
##### Valeur de sortie du widget d’adresse Google
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 que l’utilisateur est une personne et non un robot.
Le widget prend en charge :
* Évaluation par 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, comme cliquer sur une case à cocher ou résoudre des énigmes.
* `v3` s’exécute en arrière-plan et fournit un score basé sur le comportement de l’utilisateur, sans nécessiter d’interaction. Lorsque vous utilisez cette version, assurez-vous de mettre en place une logique métier supplémentaire pour traiter le score et déterminer si une autre action est nécessaire.
##### Paramètres du widget Google reCAPTCHA
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 manière 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’attestations vérifiables stockées dans son portefeuille numérique.
##### Paramètres du widget Attestations vérifiables
Les paramètres du widget Attestations 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 demande de vérification. |
| Texte du lien | Texte de remplacement affiché pour les utilisateurs qui ne peuvent pas numériser le code QR et préfèrent ouvrir directement le lien sur leur appareil. |
| Taille | La taille du code QR. |
| Jeton public | Le jeton d’accès requis pour utiliser le point de terminaison d’interrogation périodique. 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 démarrez la demande de vérification. |
| Temps d’attente maximal | Le temps maximal à attendre pour que le processus de vérification se termine. Une fois ce délai écoulé, l’interrogation périodique s’arrêtera et une erreur sera générée, quel que soit l’état de la vérification. |
##### Valeur de sortie des Attestations vérifiables
Le type de données de la valeur de sortie du widget Attestations 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 demande de vérification.
"presentation": {} // La présentation contient les attributs fournis par le portefeuille en réponse à la définition de présentation.
}
}
```
## Nœud routeur
Les nœuds routeurs vous permettent d’ajouter des règles pour créer des embranchements de logique conditionnelle entre les nœuds.
Par défaut, un nœud routeur comporte une seule règle de transfert nommée **Cas par défaut**, qui mène à d’autres nœuds. Vous pouvez ajouter des règles supplémentaires en fonction d’un ensemble de conditions auxquelles une variable doit répondre afin de mener ensuite à d’autres nœuds. Pour en savoir plus, consultez [Routeur.](/fr-CA/docs/customize/forms/routers)
## Nœud de flux
Les nœuds de flux vous permettent d’ajouter une logique personnalisée et de créer des flux d’intégration pour vos formulaires. Pour en savoir plus, consultez [Flux.](/fr-CA/docs/customize/forms/flows)
## Nœud de départ
Les nœuds de départ ne sont pas visibles par l’utilisateur. C’est à cet endroit que vous pouvez configurer des variables de champ masquées, comme les attributs de l’utilisateur lorsque vous [affichez un formulaire avec une Action.](/fr-CA/docs/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 relance le flux d’authentification, et c’est là que vous pouvez configurer un flux après soumission.
