Nœuds et composants

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

Les formulaires vous permettent d’ajouter des nœuds et composants, tels que des champs, des blocs et des gadgets logiciels, pour que vos utilisateurs interagissent avec le formulaire. Vous pouvez ensuite faire référence aux données saisies dans les composants de vos formulaires et flux.

​

Nœuds de formulaire

Il existe cinq types de nœuds de formulaire : Départ, Étape, Flux, Routeur et Écran de fin. Ces nœuds ont un objectif très précis pour la structure du formulaire.

​

Nœud d’étape

Les nœuds d’étape sont la représentation visuelle du formulaire. Ils peuvent contenir un nombre quelconque de composants, tels que des champs, des blocs et des gadgets logiciels, où l’utilisateur peut remplir ses données.

​

Composants de champ

Les champs sont des composants d’interface utilisateur où les utilisateurs saisissent leurs informations dans les formulaires.

​

Paramètres des champs

Les champs disposent d’un certain nombre de paramètres par défaut que vous pouvez configurer pour répondre à vos exigences.

Les paramètres par défaut des champs sont :

Paramètres	Description
ID	L’ID unique
Balise	Afficher ou masquer une balise
Requis	La valeur d’entrée est requise
Texte d’aide	Afficher un texte d’aide
Texte placeholder	Texte visible par l’utilisateur
Valeur par défaut	Valeur par défaut visible par l’utilisateur
Transitoire	Activer ou désactiver le masque de données

​

Règles de validation des champs

Settings (Paramètres)	Description
Longueur min. / Longueur max.	Exiger une valeur de longueur d’entrée.
Valeur min. / Valeur max.	Exiger une longueur de valeur numérique.

​

Champs proposés dans les formulaires

Les champs proposés avec leurs paramètres particuliers et types de sortie de données sont :

Champ de texte

La saisie standard permet à l’utilisateur de saisir n’importe quelle valeur sous forme de chaîne de caractères.

Paramètres du champ de texte

Le paramètre du champ de texte est :

Paramètres	Description
Multiligne	Activer le texte d’entrée multiligne.

Valeur de sortie du champ de texte

Le type de données de la valeur de sortie du champ de texte est une chaîne de caractères.

{
  "text_field_id": "Auth0"
}

Champ de courriel

Le champ de saisie standard permet à l’utilisateur de saisir des valeurs sous forme de chaîne de caractères pour le 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 de téléphone

La saisie standard permet à l’utilisateur de saisir des valeurs de numéro de téléphone.

Paramètres du champ de téléphone

Les paramètres du champ de téléphone sont :

Paramètre	Description
Sélecteur de pays	Active/désactive le sélecteur de pays. Par défaut, affiche l’emplacement IP de l’utilisateur.
Texte du paramètre fictif du filtre	Texte visible par l’utilisateur dans la fenêtre de recherche de pays.

Valeur de sortie du champ de téléphone

Le type de données de la valeur de sortie du champ de téléphone est une string ou, si le sélecteur de pays est activé, un object.

La valeur du type de données de sortie du champ de téléphone en tant que string :

{
  "phone_field_id": "8005550175"
}

La valeur du type de données de sortie du champ de téléphone en tant qu’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 choix

Champ de saisie standard permettant à l’utilisateur de sélectionner une ou plusieurs valeurs de choix.

Paramètres du champ de choix

Les paramètres du champ de choix sont :

Paramètres	Description
Choix multiples	Activer les choix multiples.
Autre option	Laisser les utilisateurs saisir leur propre option.
Avancé > Valeurs internes	Attribuer une valeur interne à chaque option de choix.
Avancé > > Modification en masse	Modifier en masse les valeurs des balises et des options de choix internes.

Valeur de sortie du champ de choix

Le type de données de la valeur de sortie du champ de choix est soit une string soit, si le choix multiple est activé, un array of strings.

La valeur du type de données de sortie du champ de choix est unestring :

{
  "choice_field_id": "Option A"
}

La valeur du type de données de sortie du champ de choix est un array of strings:

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

Champ de cartes

Saisie standard permettant à l’utilisateur de sélectionner une ou plusieurs valeurs de choix d’image.

Paramètres du champ de cartes

Les paramètres du champ de cartes sont :

Paramètres	Description
Choix multiple	Activer plusieurs options de choix.
Masquer les étiquettes	Masquer les étiquettes des cartes.
Avancé > Valeurs internes	Attribuez une valeur interne à chaque option.

Valeur de sortie du champ de cartes

Le type de données de la valeur de sortie du champ de cartes est soit une string soit, si le choix multiple est activé, un array of strings.

La valeur du type de données de sortie du champ de cartes est unestring :

{
  "card_field_id": "Option A"
}

La valeur du type de données de sortie du champ de cartes est un array of strings :

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

Champ d’URL

La saisie standard permet à l’utilisateur de saisir une valeur d’URL

Valeur de sortie du champ d’URL

Le type de données de la valeur de sortie du champ d’URL est une chaîne de caractères :

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

Champ de mot de passe

La saisie standard permet à l’utilisateur de saisir un mot de passe ou une valeur secrète.

Paramètres du champ relatif au mot de passe :

Les paramètres du champ de mot de passe sont :

Paramètres	Description
Exige 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 ne peut pas comporter moins de 8 caractères, mots de passe obtenus à partir de corpus de violations précédentes, mots du dictionnaire, caractères répétitifs ou séquentiels, mots spécifiques au contenu.
Ajouter un indicateur de force	Un indicateur graphique avec une échelle rouge, jaune et verte s’affiche sous le champ du mot de passe pour afficher la force du mot de passe saisi.
Hachage	Sélectionnez un algorithme pour hacher la valeur d’entrée 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 unechaîne de caractèresmasquée :

{
  "password_field_id": "███"
}

Champ de paiement

La saisie standard permet à un utilisateur de saisir des informations de paiement en utilisant un fournisseur de paiement. Les paiements sont traités avant le nœud de fin.

Paramètres des champs de paiement

Les paramètres du champ de paiement sont :

Paramètres	Description
Type de paiement	Sélectionnez un paiement unique (frais) ou récurrent (abonnement).
Montant	Spécifiez le montant du paiement unique (frais).
Devise	Spécifiez la devise pour un paiement unique (frais).
Action d’abonnement	Choisissez de créer ou de mettre à jour un abonnement existant.
Action client	Sélectionnez cette action pour créer ou mettre à jour un client existant.
Afficher et modifier le numéro de la carte, la date d’expiration, les étiquettes du code de sécurité et les marques 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 d’après soumission.

Le type de données de la valeur de sortie du champ de paiement est unestring :

{
  "payment_field_id": "pm_1P19e..."
}

Le type de données de la valeur de sortie du champ de paiement pour les abonnements en tant qu’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..."
  }
}

Le type de données de la valeur de sortie du champ de paiement pour la charge en tant qu’object  :

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

Champ légal

Saisie standard qui ajoute un texte juridique et une entrée de vérification.

Valeur de sortie du champ légal

Le type de donnée de la valeur de sortie du champ légal est unboolean.

{
  "legal_field_id": true
}

Champ de liste déroulante

Champ de saisie standard permettant à l’utilisateur de sélectionner une ou plusieurs options 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électeur multiple	Activer plusieurs options.
Avancé > Valeurs internes	Attribuer une valeur interne à chaque option.
Avancé > Modification en masse	Étiquette de modification en masse et 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 soit, si le choix multiple est activé, un array of strings.

La valeur du type de données de sortie du champ de liste déroulante en tant que string:

{
  "dropdown_field_id": "Option A"
}

La valeur du type de données de sortie du champ de liste déroulante en tant que array of strings :

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

Champ numérique

.

Valeur de sortie du champ numérique

Le type de données de la valeur de sortie du champ numérique est un number.

{
  "number_field_id": 123
}

Champ Date / Heure

Saisie standard qui permet à un utilisateur de saisir soit des valeurs de date ou d’heure.

Paramètres du champ Date / Heure

Les paramètres du champ Date / Heure sont :

Key (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 est une string :

{
  "date_time_field_id": "2023-04-11"
}

La valeur du type de données de sortie du champ Date / Heure est, en ce qui concerne l’heure, une string:

{
  "date_time_field_id": "23:15"
}

Champ booléen

Saisie standard qui permet à un utilisateur de saisir des valeurs vraies ou fausses.

Valeur de sortie du champ booléen

Le type de donnée de la valeur de sortie du champ booléen est un nombre booléen.

{
  "boolean_field_id": true
}

Champ personnalisé

Champ standard que vous pouvez personnaliser pour créer votre propre champ.

Paramètres des champs personnalisés

La configuration de champ personnalisé est :

Paramètres	Description
Params	Ajouter des paires clé-valeur pour référence dans le code source du champ personnalisé.
Code source	Ajouter du code JavaScript dans le champ personnalisé.
Schéma JSON	Par défaut, le champ personnalisé accepte tous les formats de valeurs. Toutefois, vous pouvez utiliser le schéma JSON pour valider les valeurs.

Pour en savoir plus, consultez Composants de champ personnalisé pour les formulaires.

​

Composants de blocs

Les blocs sont des composants d’interface utilisateur qui ajoutent des fonctionnalités à vos formulaires sans recueillir d’informations de l’utilisateur.

​

Blocs proposés dans les formulaires

Les blocs proposés sont les suivant :

Bloc de bouton suivant

Un bouton qui permet aux utilisateurs de continuer vers le nœud de formulaire suivant.

• Avant de poursuivre, 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 pour permettre à l’utilisateur de vérifier.
• Si le nœud suivant est un nœud de flux, un chargeur spinner 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 réexécutées même si aucune modification n’est apportée aux données saisies avant de continuer.

Bloc de bouton de saut

Un bouton qui permet aux utilisateurs de sauter l’étape actuelle et de passer directement au nœud de destination.

Si l’étape en cours est ignorée, aucune information n’est validée ni collectée pour cette étape.

Resend button block

A component that lets users re-run a flow to generate and send a new OTP code

if a user selects the resend button, the associated flow will generate and send a new OTP code.

Settings	Description
Text alignment	Select text alignment, left, center, or right
Text	Default text displayed when users select the resend button
Button text	Button text
Waiting text	Text displayed when users have selected the resend button. Replaces Text and the Button text settings. Use the “{{remaining_seconds}}” variable to dynamically display the remaining number of seconds until the send button is enabled again. For example: “Resend in {{remaining_seconds}} seconds”.
Flow	Flow executed after the user selects the resend button.
Max attempts	The maximum number of attempts the user can select the resend button
Waiting time	The waiting time between attempts in seconds.

Bloc de texte enrichi

Un bloc de texte enrichi pour personnaliser le nœud d’étape avec des informations supplémentaires.

Bloc diviseur

Une ligne pour diviser les différentes sections du nœud d’étape. Elle peut contenir un petit 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 d’ajout d’images.

​

Composants de gadgets logiciels

Les gadgets logiciels sont des composants préconçus, avec des intégrations tierces, qui ajoutent de la logique côté client et côté serveur à vos formulaires.

​

Gadgets logiciels proposés dans les formulaires

Le gadget logiciel proposé est le suivant :

Widget Google Address

Un widget qui permet à un utilisateur de saisir et de valider son adresse.

Paramètres du widget Google Address

Les paramètres du widget Google Address sont :

Settings (Paramètres)	Description
Clé API	Nécessite une clé API Google Maps pour authentifier les demandes.

Valeur de sortie du widget Google Address.

Le type de données de la valeur de sortie du widget Google Address 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

A widget that helps protect your website from spam and abuse by verifying that a user is a human and not a bot.

The widget supports:

• Score-based (v3)

• Challenge (v2)

  • Invisible reCAPTCHA badge

Differences between v2 and v3:

• v2 requires user interaction with visible challenges, such as clicking a checkbox or solving puzzles.
• v3 runs in the background and provides a score based on user behavior, without requiring user interaction. When using this version, make sure to implement additional business logic to handle the score and determine if further action is needed.

Google reCAPTCHA widget settings

The Google reCAPTCHA widget settings include:

Settings	Description
Site key	The public site key used to initialize the reCAPTCHA on your website. You can create it in Google reCAPTCHA console or your Google Cloud Platform project.
Secret key	The secret key used to communicate securely with the reCAPTCHA service server-side. You can create it in Google reCAPTCHA console or your Google Cloud Platform project.

Google reCAPTCHA output value

The Google reCAPTCHA widget output value data type is an object.

Example of v2 response:

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

Example of v3 response:

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

Verifiable Credentials

A widget that lets a user verify their identity using verifiable credentials stored in their digital wallet.

Verifiable Credentials widget settings

The Verifiable Credentials widget settings include:

Settings	Description
URL	The URL value used to generate the QR code. This value is returned in the engagement property of the verification request.
Link text	Alternative text that will be displayed for users who cannot scan the QR code and prefer to open the link directly on their device.
Size	The size of the QR code.
Public token	The access token required to consume the polling endpoint. Please ensure the token is generated with only the read:verification_request scope to avoid exposing access to other resources.
Verification ID	The verification ID generated when you start the verification request.
Maximum waiting time	The maximum amount of time to wait for the verification process to complete. Once the set time is reached, polling will stop and an error will be thrown, regardless of the verification status.

Verifiable Credentials output value

The Verifiable Credentials widget output value data type is an object.

{
  "verifiable_credentials_widget_id": {
    "state": "honored",
    "reason": "...", // The reason field contains additional information (if available) regarding the state of the verification request. 
    "presentation": {} // The presentation contains the claims provided by the wallet in response to the presentation definition.
  }
}

​

Nœud de routage.

Les nœuds de routeur vous permettent d’ajouter des règles pour créer des sauts logiques conditionnels entre les nœuds.

Par défaut, un nœud de routeur dispose d’une seule règle de passage nommée Default case (Cas par défaut) qui se connecte à d’autres nœuds. Vous pouvez ajouter des règles supplémentaires basées sur un ensemble de conditions qu’une variable doit remplir pour se connecter ensuite à d’autres nœuds. Pour en savoir plus, consultez Routeur.

​

Nœud de flux

Les nœuds de flux vous permettent d’ajouter et de créer des logiques personnalisées et des flux d’intégration à 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 là que vous pouvez configurer des variables de champ cachées, telles que les attributs utilisateur lors du rendu d’un formulaire avec une Action.

​

Nœud d’écran de fin

Chaque formulaire dispose d’un nœud d’écran de fin. Par défaut, ce nœud reprend le flux d’authentification et c’est ici que vous pouvez configurer un flux post-soumission.