v7
S’applique à Campaign Classic v7
v8
S’applique également à Campaign v8

Rendu du formulaire form-rendering

Choisir le modèle de rendu du formulaire selecting-the-form-rendering-template

Les paramètres du formulaire permettent de sélectionner le modèle utilisé pour générer les pages. Pour y accéder, cliquez sur le bouton Propriétés dans la barre d’outils des détails du formulaire, puis sélectionnez l’onglet Rendu. Plusieurs modèles (feuilles de style) sont disponibles par défaut.

La section inférieure de l'éditeur permet de visualiser un exemple de rendu du modèle sélectionné.

La loupe permet d'éditer le modèle sélectionné.

Vous pouvez modifier ou remplacer ces modèles. Pour ce faire, cliquez sur le bouton Mise en page… lier et personnaliser les informations.

Vous pouvez ainsi :

  • Modifier l'image utilisée comme logo et adapter sa taille,
  • Indiquer également le chemin d'accès à l'image d'aperçu proposée aux utilisateurs lorsqu'ils sélectionnent ce modèle de rendu.

L'onglet En-têtes/Pieds permet de modifier les informations affichées en en-tête et pied de page de chacune des pages des formulaires utilisant ce modèle.

Chaque ligne de la variable En-têtes de page et Pieds de page correspond à une ligne de la page de HTML. Cliquez sur Ajouter pour créer une ligne.

Sélectionnez une ligne existante et cliquez sur le bouton Détail pour la personnaliser.

Vous pouvez modifier le contenu de la ligne, ajouter des bordures et modifier les attributs de police à partir des onglets correspondants. Cliquez sur OK pour confirmer ces modifications.

Les champs Position permettent de définir la position des éléments dans l'en-tête et dans le pied de page.

NOTE
Les modèles de rendus sont stockés dans le nœud Administration > Paramétrage > Rendus des formulaires.
Pour plus d'informations, voir la section Personnaliser le rendu du formulaire.

Personnaliser le rendu du formulaire customizing-form-rendering

Adapter la disposition des éléments changing-the-layout-of-elements

Vous pouvez surcharger la feuille de style au niveau de chaque élément du formulaire (champs de saisie, images, boutons radio, etc.).

Pour cela, utilisez l'onglet Avancé.

Il permet de définir les propriétés suivantes :

  • Position du libellé  : voir Définir la position des libellés,

  • Format du libellé  : Retour à la ligne ou Pas de retour à la ligne,

  • Nombre de cellules  : voir la section Placer les champs de la page,

  • Alignement horizontal (Gauche, Droite, Centré) et vertical (Haut, Bas, Milieu),

  • Largeur de la zone : elle peut être exprimée en pourcentage, en em, en points ou en pixels (valeur par défaut),

  • Longueur maximale : nombre de caractères maximum autorisé (pour un contrôle de type Texte, Nombre, Mot de passe),

  • Lignes  : nombre de lignes pour une zone de type Texte Multi-lignes,

  • Style intégré: vous permet de surcharger la feuille de style CSS avec des paramètres supplémentaires. Ces fichiers sont séparés à l’aide de ; comme illustré dans l’exemple ci-dessous :

Définir les en-têtes et pieds de page defining-headers-and-footers

Les champs sont enchaînés dans une arborescence dont la racine porte le nom de la page. Sélectionnez-la pour modifier ce nom.

Le titre de la fenêtre doit être saisi dans la Page de la fenêtre des propriétés du formulaire. Vous pouvez également ajouter un contenu défini à l’en-tête et au pied de page (ces informations s’afficheront sur chaque page). Ce contenu est saisi dans les sections correspondantes de la fonction Textes , comme illustré ci-dessous :

Ajouter des éléments dans l'en-tête HTML adding-elements-to-html-header

Vous pouvez saisir des éléments supplémentaires à insérer dans l’en-tête de HTML d’une page de formulaire. Pour ce faire, saisissez les éléments dans le champ En-tête de la page concernée.

Ainsi, par exemple, vous pouvez y référencer une icône qui sera affichée dans la barre de titre de la page.

Définir les paramètres de contrôle defining-control-settings

Lorsque l'utilisateur renseigne le formulaire, une vérification de certains champs est automatiquement effectuée selon leur format ou leur configuration. Vous pouvez ainsi rendre certains champs obligatoires (voir la section Définir les champs obligatoires) ou vérifier le format des données saisies (voir la section Contrôler le format des données). Les vérifications sont effectuées lors de la validation de la page (en cliquant sur un lien ou un bouton qui active une transition de sortie).

Définir les champs obligatoires defining-mandatory-fields

Pour rendre obligatoire le renseignement d'un champ, vous devez cocher l'option correspondante lors de la création du champ.

Lorsque l'utilisateur valide la page, si le champ n'est pas renseigné, le message d'erreur sera le suivant :

Vous pouvez personnaliser ce message en cliquant sur le lien Personnaliser ce message.

Lorsque l'utilisateur valide la page, si le champ n'est pas renseigné, le message d'erreur sera le suivant :

Contrôler le format des données checking-data-format

Pour les contrôles du formulaire dont les valeurs seront stockées dans un champ existant de la base de données, les règles du champ de stockage sont appliquées.

Pour les contrôles du formulaire dont les valeurs seront stockées dans une variable, les règles de validation dépendent du format de la variable.

Par exemple, si vous créez un contrôle de type Nombre pour stocker le numéro du client, comme dans l'exemple suivant :

L'utilisateur devra saisir un nombre entier dans le champ correspondant du formulaire.

Définir l'affichage conditionnel des champs defining-fields-conditional-display

Vous pouvez conditionner l'affichage des champs de la page en fonction des valeurs sélectionnées par l'utilisateur. Le conditionnement peut s'appliquer à un champ ou à un groupe de champs (lorsqu'ils sont regroupés dans un conteneur).

Pour chaque élément de la page, la section Visibilité permet de définir la ou les conditions d'affichage.

Les conditions peuvent porter sur la valeur de champs de la base ou de variables.

Dans la fenêtre de sélection d'un champ, vous pouvez sélectionner parmi les données disponibles :

  • L'arborescence principale contient les paramètres du contexte du formulaire. Les paramètres par défaut sont l'Identifiant (qui correspond à l'identifiant chiffré du destinataire), la Langue et l'Origine.

    Voir à ce propos cette page.

  • La sous-arborescence Destinataires contient les champs de saisie insérés dans le formulaire et stockés dans la base de données.

    Pour plus d'informations, voir la section Stockage des données dans la base de données.

  • La sous-arborescence Variables contient les variables disponibles pour ce formulaire. Pour plus d'informations, voir la section Stocker les données dans une variable locale.

Pour plus d'informations, reportez-vous au cas d'utilisation disponible ici : Afficher différentes options en fonction de la valeur sélectionnée.

Vous pouvez également conditionner l’affichage des pages du formulaire à l’aide de la fonction Test . Pour en savoir plus à ce sujet, consultez cette page.

Importer des éléments depuis un formulaire existant importing-elements-from-an-existing-form

Vous pouvez importer des champs ou des containers issus d'autres formulaires Web. Ainsi, vous pouvez créer une bibliothèque de blocs réutilisables qui seront insérés dans les formulaires, par exemple le pavé adresse, la zone d'inscription à vos newsletters, etc.

Pour importer un élément dans un formulaire, les étapes sont les suivantes :

  1. Editez la page dans laquelle vous souhaitez inclure un ou plusieurs éléments et cliquez sur le bouton Importer un bloc existant de la barre d'outils.

  2. Sélectionnez le formulaire Web contenant les champs à importer et choisissez les conteneurs et les champs à importer.

    note note
    NOTE
    L'icône Editer le lien située à droite du nom du formulaire source permet de visualiser le formulaire Web sélectionné.
  3. Cliquez sur Ok pour valider l'insertion des éléments.

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1