[S’applique également à la version 8]{class="badge positive" title="S’applique également à Campaign v8"}

Définir la disposition des formulaires web defining-web-forms-layout

Créer des conteneurs creating-containers

Les conteneurs permettent de regrouper les champs d'une page et d'en paramétrer la mise en page. Ils permettent d'organiser les éléments dans la page.

Pour chaque page du formulaire, les conteneurs sont créés à partir du bouton Conteneurs de la barre d'outils.

Utilisez un conteneur pour grouper des éléments de la page sans ajouter de libellé dans le rendu final. Les éléments sont regroupés en sous-arborescence du conteneur. Les conteneurs standards permettent de gérer la mise en page.

Par exemple :

La position des libellés est appliquée aux éléments placés en sous-arborescence du conteneur. Elle peut éventuellement être surchargée au niveau de chaque élément si nécessaire. Le nombre de colonnes permet de modifier la mise en page. Voir Placer les champs de la page.

Dans l'exemple ci-dessus, le rendu sera le suivant :

Placer les champs de la page positioning-the-fields-on-the-page

La mise en page du formulaire web est définie page par page, pour chaque conteneur et peut être surchargée si nécessaire.

Les pages sont organisées en colonnes : chaque page contient un certain nombre de colonnes. Chaque champ de la page occupe n cellules. Les conteneurs s'étendent eux aussi sur un certain nombre de colonnes et les champs qu'ils contiennent s'étendent sur un certain nombre de cellules.

Par défaut, les pages sont construites sur une seule colonne et chaque élément occupe une cellule. Ainsi, les zones sont affichées les unes en dessous des autres, chacune occupant toute la ligne, comme ci-dessous :

Dans l'exemple suivant, le paramétrage par défaut a été conservé. La page est construite sur une seule colonne et contient quatre conteneurs.

Chaque conteneur s'étend sur une colonne et chaque élément occupe une cellule :

Le rendu est le suivant :

Vous pouvez adapter les paramètres d'affichage pour obtenir le rendu suivant :

Dans l'exemple de rendu ci-dessus, chaque zone de saisie, chaque titre et chaque image occupent une seule cellule dans les colonnes des conteneurs.

Vous pouvez modifier la mise en page au niveau de chaque conteneur. Dans notre exemple, vous pouvez passer le contenu du conteneur 4 sur deux colonnes et répartir les éléments.

Le titre et la liste occupent une cellule chacun (et donc une ligne entière du conteneur) et la case à cocher s’étend sur deux cellules. Le nombre de cellules attribuées au champ de saisie est défini dans la variable Général ou le Avancé , en fonction du type de champ :

Définir la position des libellés defining-the-position-of-labels

Vous pouvez définir l'alignement des champs et des libellés du formulaire.

Par défaut, les paramètres d'affichage des champs et autres contenus de la page sont hérités du paramétrage général du formulaire, le paramétrage de la page ou celui du conteneur parent, s'il existe.

Les paramètres d’affichage globaux pour l’ensemble du formulaire sont indiqués dans la zone des propriétés du formulaire. La variable Rendu vous permet de sélectionner la position des libellés.

Cette position peut être surchargée au niveau de chaque page, puis de chaque conteneur et enfin au niveau de chaque champ, à partir de l'onglet Avancé.

Les alignements supportés sont les suivants :