Nœuds et composants

Découvrez les nœuds de formulaire et les composants offerts.

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 :

Champ texte

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.

{
  "text_field_id": "Auth0"
}

Champ d’adresse courriel

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.

{
  "email_field_id": "[e-mail]"
}

Champ Téléphone

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 :

{
  "phone_field_id": "8005550175"
}

La valeur de sortie du champ de téléphone est du type de données object :

{
  "phone_field_id": {
    "national_number": "8005550175",
    "national_format": "[phone]",
    "international_number": "[phone]",
    "international_format": "[phone]",
    "country_code_iso": "US",
    "country_code_number": "1"
  }
}

Champ de sélection

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 :

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

{
  "choice_field_id": ["Option A", "Option B"]
}

Champ Cartes

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 :

{
  "card_field_id": "Option A"
}

Le champ cards renvoie une valeur de type array of strings :

{
  "card_field_id": ["Option A", "Option B"]
}

Champ d’URL

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 :

{
  "url_field_id": "https://auth0.com"
}

Champ de mot de passe

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 :

{
  "password_field_id": "███"
}

Champ de paiement

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 :

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

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

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "amount": 100,
    "payment_intent_id": "pi_3P19e5..."
  }
}

Champ de mentions légales

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.

{
  "legal_field_id": true
}

Champ à liste déroulante

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 :

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

{
  "dropdown_field_id": ["Option A", "Option B"]
}

Champ numérique

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.

{
  "number_field_id": 123
}

Champ date/heure

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 :

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

{
  "date_time_field_id": "23:15"
}

Champ booléen

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.

{
  "boolean_field_id": true
}

Champ personnalisé

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.

​

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 :

Bloc de bouton suivant

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.

Bloc de bouton précédent

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.

Bloc de bouton de saut

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.

Bloc de bouton de renvoi

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.

Bloc de texte enrichi

Un bloc de texte enrichi pour personnaliser l’étape avec des renseignements supplémentaires.

Bloc de séparateur

Une ligne servant à diviser les différentes sections de l’étape. Elle peut contenir un court texte.

Bloc HTML

Un bloc HTML pour créer votre interface utilisateur personnalisée.

Bloc d’image

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 :

Widget d’adresse Google

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.

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

Google reCAPTCHA

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 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 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 :

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com"
  }
}

Exemple de réponse v3 :

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com",
    "score": 0.9
  }
}

Attestations vérifiables

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.

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

​

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.

​

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.

​

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.