DocumentationJourney Optimizer édition B2BDocumentation de Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Cette fonctionnalité est actuellement en version bêta limitée"}

Conception de formulaire

Last update: Tue Sep 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Utilisateur ou utilisatrice

Après avoir créé un formulaire, l’espace de conception visuelle ouvre un brouillon avec une définition de formulaire de base par défaut. Dans le panneau Résumé à droite, cliquez sur Modifier le formulaire et utilisez l’espace de conception visuelle pour définir le style du formulaire et les composants de champ.

Accéder à la bibliothèque de formulaires {width="700" modal="regular"}

Champs

Les champs de formulaire sont utilisés pour capturer des données de profil de personne qui peuvent être utilisées pour cibler des personnes et les associer à des comptes et des groupes d’achats. Tous les nouveaux formulaires commencent par les champs suivants dans une seule disposition de colonne :

  • Prénom
  • Nom
  • Adresse e-mail

Utilisez les outils de conception de champs pour construire l’ensemble des champs et la mise en page dont vous avez besoin pour collecter les données dont vous avez besoin pour vos activités marketing basées sur les comptes.

Ajouter un champ add-field

  1. Dans le panneau Composants à gauche, faites glisser le composant de contenu Champ et déposez-le sur la zone de travail.

    Ajouter un composant de champ au formulaire {width="700" modal="regular"}

  2. Cliquez sur Sélectionner l’attribut de champ.

  3. Dans la boîte de dialogue Sélectionner l’attribut de champ, cochez la case correspondant à l’attribut de profil de personne à utiliser pour le champ, puis cliquez sur Sélectionner.

    Les schémas métier XDM déterminent les attributs disponibles. Tous les champs personnalisés définis pour votre instance Journey Optimizer B2B edition sont également disponibles. Utilisez la zone de texte Rechercher pour filtrer la liste par nom ou cliquez sur l’icône Filtrer pour filtrer la liste par schéma/type de données.

    Ajouter un composant de champ au formulaire {width="700" modal="regular"}

    Sur la zone de travail, le libellé du champ par défaut pour l’attribut sélectionné est renseigné sur la zone de travail. Les Détails du champ s’affichent dans le panneau de droite.

  4. Si nécessaire, modifiez le texte Libellé.

    Ce texte s’affiche en regard du champ du formulaire. Le texte par défaut est renseigné à partir de l’attribut field.

  5. Définissez Type de champ en fonction du type de données du champ :

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3
    Type de champ Utilisation Exemple
    Case à cocher Utilisez ce type afin que les visiteurs puissent sélectionner une valeur true (cochée) ou false (non cochée).
    Groupe de cases à cocher Utilisez ce type afin que les visiteurs puissent sélectionner une valeur true (cochée) ou false (non cochée) pour plusieurs éléments.
    Devise Utilisez ce type pour autoriser un champ flottant qui représente le type de devise par défaut sélectionné pour l’instance Journey Optimizer B2B edition.
    Date Utilisez ce type pour restreindre la saisie à un format de date et fournir un sélecteur de calendrier dans le champ.
    Double
    E-mail Utilisez ce type pour restreindre la saisie à un format d’adresse électronique.
    Nombre Utilisez ce type pour restreindre le champ à une valeur numérique.
    Groupe de cases d’option Utilisez ce type pour permettre aux visiteurs de sélectionner l’une des options d’un ensemble.
    Sélectionner Utilisez ce type pour permettre aux visiteurs de sélectionner l’une des options d’un ensemble d’options à l’aide d’une liste déroulante.
    Curseur Utilisez ce type pour permettre aux visiteurs de définir une valeur numérique à l’aide d’un curseur.
    Téléphone Utilisez ce type pour un champ de saisie de numéro de téléphone.
    Texte Utilisez ce type pour un champ de saisie de texte standard (chaîne).
    Zone de texte Utilisez ce type pour prendre en charge une entrée de texte plus longue.
    URL Utilisez ce type pour limiter la saisie de texte à une URL, y compris le protocole d’URL standard.

  6. Selon le type de champ sélectionné, définissez les autres options pour l’entrée de champ et la validation :

    Définir des options pour le champ en fonction du type de champ sélectionné {width="400" modal="regular"}

    • Espace réservé - Valeur d’espace réservé pour le champ qui donne au visiteur un exemple de ce qui est attendu pour le champ.

    • Instructions - Texte instructif qui aide le visiteur à remplir le champ. Saisissez le texte à afficher en tant que texte de survol pour le champ.

      note tip
      TIP
      Instructions ou texte d’espace réservé
      Utilisez ces deux propriétés pour guider les visiteurs et visiteuses à remplir le champ. Le texte d’instruction s’affiche sous forme d’info-bulle ou de texte contextuel lorsque le curseur est placé sur le champ. Le texte d’espace réservé apparaît grisé dans le champ et disparaît lorsque le visiteur saisit son texte dans le champ. Vous pouvez utiliser les deux méthodes ou une seule.

    • Valeur par défaut - Utilisez cette option pour spécifier une valeur par défaut pour le champ.

    • Message de validation - Utilisez cette option pour spécifier un message de validation pour le champ. Ce message s’affiche si le visiteur saisit une valeur non valide pour le champ. Le message Standard est défini par défaut. Choisissez Personnalisé et saisissez votre propre message.

    • Longueur maximale - Saisissez le nombre maximal de caractères pouvant être saisis dans le champ.

  7. Définissez la variable Comportements de champ selon vos besoins :

    • Obligatoire - Cochez la case pour que l’entrée de champ soit requise pour l’envoi du formulaire.

    • Activer le masque de saisie - Cochez la case pour restreindre la saisie du visiteur à l’aide d’un masque de saisie. Par exemple, vous pouvez souhaiter que les visiteurs et visiteuses saisissent des numéros de téléphone dans un format spécifique. Dans la boîte de dialogue, saisissez le masque en utilisant 9 pour n’importe quel nombre, a pour n’importe quelle lettre et * pour l’un ou l’autre. Cliquez sur Enregistrer pour activer le masque de saisie spécifié.

      Définir un masque de saisie pour le champ {width="500" modal="regular"}

Modifier le style d’un champ field-styling

Sélectionnez l’onglet Styles dans le panneau de droite pour modifier la mise en forme du champ sélectionné.

  • Arrière-plan - Cochez la case pour appliquer une couleur d’arrière-plan au champ. Le blanc est la couleur par défaut. Cliquez sur le carré Couleur d’arrière-plan pour ouvrir le sélecteur de couleurs contextuel et choisir une couleur pour l’arrière-plan du champ.

    Définir les styles d’arrière-plan pour le champ de formulaire {width="600" modal="regular"}

  • Libellé - Le style du libellé contrôle les caractéristiques visuelles du texte affiché à côté du champ. Choisissez un affichage du libellé supérieur ou latéral par rapport au champ. Vous pouvez définir la taille de la police, la hauteur de la ligne, le style du texte et l’alignement du texte. Cliquez sur le carré Couleur de police pour ouvrir le sélecteur de couleurs contextuel et choisir une couleur pour le texte du libellé.

    Définir les styles de libellé pour le champ de formulaire {width="600" modal="regular"}

  • Bordure - Cliquez sur le carré Couleur de bordure pour ouvrir le sélecteur de couleurs contextuel et sélectionner une couleur pour la bordure. Vous pouvez définir une bordure pour le champ, y compris la couleur et la largeur de ligne. Décochez la case pour supprimer la bordure du champ affichée. Vous pouvez également modifier la taille de la bordure (largeur en pixels), le style et le rayon des angles.

    Définir les styles de bordure du champ de formulaire {width="600" modal="regular"}

  • Taille - Sélectionnez un paramètre de taille pour déterminer la largeur d’affichage du champ. Choisissez Pleine largeur, Demi-largeur ou Auto.

  • Marge - Définissez des marges (en pixels) autour du champ. Vous pouvez définir la même marge sur les quatre côtés ou cocher la case Marge différente pour chaque côté pour définir séparément les marges horizontale et verticale.

  • Marge intérieure - Définissez la marge intérieure (en pixels) autour du champ. Vous pouvez définir la même marge sur les quatre côtés ou cocher la case Marge intérieure différente pour chaque côté pour définir les marges horizontales et verticales séparément.

    Définissez la taille, la marge et les styles de remplissage du champ de formulaire {width="600" modal="regular"}

Réorganiser les champs field-reorder

Vous pouvez déplacer les champs de formulaire directement dans l’espace de travail visuel. Cliquez sur l’outil Déplacer sur le bord droit du champ sélectionné et faites-le glisser vers un nouvel emplacement.

Ajoutez des composants structurels au formulaire et déplacez les champs dans des colonnes pour les regrouper et modifier la disposition. Cliquez sur l’outil Déplacer sur le bord gauche du composant de colonne sélectionné et faites-le glisser vers un nouvel emplacement dans le formulaire.

Déplacer des champs dans le formulaire et utiliser des composants structurels pour le regroupement et la mise en page {width="500"}

Supprimer ou dupliquer un champ field-delete-duplicate

Cliquez sur l’icône Supprimer ( icône Supprimer ) dans la barre d’outils ou dans le panneau de droite pour supprimer un champ sélectionné. Dans la boîte de dialogue de confirmation, cliquez sur Supprimer.

Cliquez sur l’icône Dupliquer ( icône Dupliquer ) dans la barre d’outils ou le panneau de droite pour dupliquer un champ sélectionné. Le nouveau champ s’affiche juste en dessous du champ d’origine. Cliquez sur Sélectionner l’attribut de champ pour définir l’attribut du champ. Définissez le type de champ, les détails et les styles selon vos besoins.

Icônes Supprimer et Dupliquer pour les champs de formulaire {width="600" modal="regular"}

Bouton Envoyer

Le bouton d’envoi (champ de pied de page) fait partie du formulaire par défaut et ne peut pas être supprimé. Sélectionnez le composant Bouton/Pied de page dans le formulaire pour modifier le texte et le style du bouton.

Modifier le contenu du bouton button-content

Avec l’onglet Contenu affiché dans le panneau de droite, modifiez le texte dans le champ Texte du bouton. Le dimensionnement du bouton s’ajuste en fonction de la longueur du texte.

Modifier le texte du bouton dans le formulaire {width="600" modal="regular"}

Donner un style au bouton d’envoi button-styles

Sélectionnez l’onglet Styles dans le panneau de droite pour modifier la mise en forme du composant de bouton/pied de page sélectionné.

  • Arrière-plan - Cochez la case pour appliquer une couleur d’arrière-plan au bouton. Le bleu est la couleur par défaut. Cliquez sur le carré Couleur d’arrière-plan pour ouvrir le sélecteur de couleurs de la fenêtre contextuelle et choisir une couleur pour l’arrière-plan du bouton.

    Définir les styles d’arrière-plan pour le bouton de formulaire {width="600" modal="regular"}

  • Libellé - Le style du libellé contrôle les caractéristiques visuelles du texte à l’intérieur du bouton. Vous pouvez définir la taille de la police, la hauteur de la ligne, le style du texte et l’alignement du texte. Cliquez sur le carré Couleur de police pour ouvrir le sélecteur de couleurs contextuel et choisir une couleur pour le texte du libellé.

  • Bordure - Cliquez sur le carré Couleur de bordure pour ouvrir le sélecteur de couleurs contextuel et sélectionner une couleur pour la bordure. Vous pouvez définir une bordure pour le bouton, y compris la couleur et la largeur de ligne. Décochez la case pour supprimer la bordure du bouton affichée. Vous pouvez également modifier la taille de la bordure (largeur en pixels), le style et le rayon des angles arrondis.

  • Taille - Sélectionnez un paramètre de taille pour déterminer la largeur d’affichage du bouton. Choisissez Pleine largeur, Demi-largeur ou Auto. La marge intérieure s’ajuste en fonction de la taille et des paramètres d’alignement.

    Définir les styles de libellé, de bordure et de taille pour le bouton de formulaire {width="600" modal="regular"}

  • Alignement des boutons - Lorsque vous choisissez une taille Demi-largeur ou Auto pour le bouton, définissez l’alignement à gauche, à droite ou au centre. La marge intérieure s’ajuste en fonction de la taille et des paramètres d’alignement.

  • Marge - Définissez des marges (en pixels) autour du champ. Vous pouvez définir la même marge sur les quatre côtés ou cocher la case Marge différente pour chaque côté pour définir séparément les marges horizontale et verticale.

  • Marge intérieure - Définissez la marge intérieure (en pixels) autour du champ. Vous pouvez définir la même marge sur les quatre côtés ou cocher la case Marge intérieure différente pour chaque côté pour définir les marges horizontales et verticales séparément. La marge intérieure s’ajuste si vous modifiez la taille et les paramètres d’alignement.

    Définir les styles d’alignement, de marge et de marge intérieure pour le bouton de formulaire {width="600" modal="regular"}

Style du formulaire form-styling

Vous pouvez modifier les styles de la zone de formulaire lorsque vous cliquez en dehors des composants de structure ou de formulaire. Les composants de formulaire (champs et bouton) héritent des styles Body définis au niveau supérieur, sauf si d’autres styles sont définis au niveau du champ ou du bouton/pied de page.

Définir les styles de niveau supérieur pour le corps du formulaire {width="600" modal="regular"}

Styles CSS

Les nouveaux formulaires utilisent le CSS par défaut pour le style. Si vous souhaitez modifier les styles en modifiant le CSS, vous pouvez le copier, puis l’utiliser pour définir un CSS personnalisé pour le formulaire.

Pour définir un CSS personnalisé pour le formulaire :

  1. Cliquez sur Affichage CSS dans le panneau de droite pour passer en revue le code CSS.

    Définir les couleurs de fond du formulaire {width="450" modal="regular"}

  2. Sélectionnez le code CSS dans la fenêtre de défilement et copiez-le dans le presse-papiers.

  3. Cliquez sur Fermer.

  4. (Facultatif) Collez le code copié dans votre outil CSS préféré et modifiez le CSS pour refléter le style que vous souhaitez.

  5. Cliquez sur Ajouter un CSS personnalisé dans le panneau de droite.

  6. Collez le code CSS dans la fenêtre.

    Définir les couleurs de fond du formulaire {width="450" modal="regular"}

    Vous pouvez modifier le texte collé dans cette fenêtre.

  7. Cliquez sur Enregistrer

Style manuel

Modifiez les paramètres du panneau de droite pour définir l’affichage de l’ensemble du formulaire.

  • Couleur d’arrière-plan - Cochez la case pour appliquer une couleur d’arrière-plan autour de la zone de formulaire. Le blanc est la couleur par défaut. Cliquez sur le carré de couleurs pour ouvrir le sélecteur de couleurs contextuel et choisissez une couleur pour l’arrière-plan du formulaire.

  • Arrière-plan de la fenêtre d’affichage - Cochez la case pour appliquer une couleur d’arrière-plan à tous les composants de formulaire. La valeur par défaut est aucune couleur (héritée de l’arrière-plan extérieur). Cliquez sur le carré de couleurs pour ouvrir le sélecteur de couleurs contextuel et choisissez une couleur pour les composants structurels de formulaire.

    Définir les couleurs de fond du formulaire {width="600" modal="regular"}

  • Texte - Sélectionnez une famille de polices pour le formulaire, ce qui affecte les libellés, l’indice et le texte d’espace réservé des champs de formulaire. Cela affecte également le texte du bouton d’envoi par défaut.

  • Taille - Modifiez la taille (largeur) du formulaire en pixels.

  • Marge - Définissez des marges (en pixels) autour des composants de formulaire. Vous pouvez définir la même marge sur les quatre côtés ou cocher la case Marge différente pour chaque côté pour définir séparément les marges horizontale et verticale.

    Définissez le texte, la taille et les marges du formulaire {width="600" modal="regular"}

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0