S’applique également à la v8.

Rendu du formulaire

19 juillet 2024
  • S'applique à :
  • Campaign Classic v7
  • Rubriques :

Choisir le modèle de rendu du formulaire

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 cela, cliquez sur le lien Mise en page et personnalisez 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 des sections En-têtes de page et Pieds de page correspond à une ligne dans la page HTML. Cliquez sur Ajouter pour créer une nouvelle 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 changer les attributs de la police de caractères utilisée à partir des onglets correspondants. Cliquez sur OK pour valider 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

Adapter la disposition des éléments

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é  : permet de surcharger la feuille de style CSS avec des paramètres supplémentaires. Ces derniers sont séparés à l’aide des caractères ; comme illustré dans l’exemple ci-dessous :

Définir les en-têtes et pieds de page

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 l'onglet Page de la fenêtre des propriétés du formulaire. Vous pouvez également ajouter un contenu fixe à l’en-tête et au pied de page (ces informations figureront sur chacune des pages). Ce contenu doit être saisi dans les sections correspondantes de l'onglet Textes, comme dans l'exemple ci-dessous :

Ajouter des éléments dans l'en-tête HTML

Vous pouvez saisir des élément additionnels à insérer dans l'en-tête HTML d'une page de formulaire. Pour cela, saisissez ces éléments dans l'onglet En-tête de la page visé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

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

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

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

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 aussi conditionner l'affichage des pages du formulaire via l'objet Test. Pour en savoir plus à ce sujet, consultez cette page.