Formulaire BreezingForms avec éléments en ligne et en colonnes

Voyons ensemble comment mettre en page un formulaire avec des éléments en ligne et d'autre en multi-colonnes. Les options multi-colonnes ne sont disponibles que dans les sections.

Les sections sont de deux types :

  1. Normal : Section ne comportant pas de titre
  2. Groupe de champs : Section comportant un titre et séparant bien les parties d'un formulaire.

Création du formulaire

Commençons par créer un formulaire, donnons-lui un titre, un nom, une éventuelle description et paramétrons le comme à notre habitude.

Apercu formulaire BreezingForms multi-colonnes

Pour ce pas à pas, je créerai un formulaire avec diverses sections et sous-sections où j'intégrerai des éléments différents afin que vous puissiez bien remarquer les différences. Ces sections seront décrites dans leur introduction respective ou dans leur intitulé.

Aperçu de l'arborescence du formulaire
Aperçu de l'arborescence du formulaire BreezingForms multi-colonnes

Détails

Le formulaire créé et vierge, insérez-y une page puis, au sein de cette page une première section et paramétrez-la comme suit :

  • Type = Groupe de champs
  • Type d'écran = Éléments sur la même ligne
  • Insérez-y votre texte au besoin à l'aide du bouton Description.

Insérez vos éléments désirés, les uns après les autres, les paramétrant et enregistrant les propriétés de chacun d'eux avant de passe au suivant. Chacun des éléments insérés se placera (sur la page du site) à droite de l'élément précédent et tant que la place sur la page le permet avant de passer à la ligne pour se répartir à nouveau sur une même ligne.

Affichage des champs sur une même ligne, passage à la ligne en bout de page.
Passage à la ligne en bout de page

Placement en colonnes

Maintenant que vous savez comment placer vos éléments en ligne, nous allons pouvoir étendre les possibilités de ce placement pour placer nos éléments en mélangeant le côte à côte et les colonnes…

Commencer par ajouter une nouvelle section dans la page. Sélectionnez la page dans l'arborescence et cliquez le bouton Section.

Votre nouvelle section s'est placée en fin de contenu de la page. Paramétrez-là comme suit :

  • Type = Groupe de champs
  • Type d'écran = Éléments sur la même ligne
  • Insérez-y votre texte au besoin à l'aide du bouton Description.

Dans cette section, placez une sous-section et paramétrez-la comme suit :

  • Type = Groupe de champs ou normal selon que vous nécessitiez d'un titre de section ou non.
  • Type d'écran = À la ligne après chaque élément
  • Insérez-y votre texte au besoin à l'aide du bouton Description.

Dans cette sous-section, insérez les éléments nécessaires à votre formulaire, un par un et paramétrez chacun d'eux selon sa fonction, Enregistrez les propriétés de chaque éléments avant de passer au suivant.

Lorsque votre section est prête, resélectionnez la section mère et ajouter-y une nouvelle section avec les mêmes paramètres que la précédente et insérez-y vos éléments.

Vous venez de créer une section avec deux sous-sections qui s'afficheront côte à côte qui afficheront elle-même leur propres éléments les uns sous les autres.

Chaque section ou sous section peut contenir une ou des sous-sections, il suffit chaque fois de sélectionner la section parente et de cliquer le bouton d'ajout d'une section.

Aperçu de deux sous-sections, chaque éléments (section) sur une ligne, avec chacune deux sous-sections sur une même ligne chacune d'elles avec ses éléments sous leur précédent.

multi colonnes 05 tn

À vous d'essayer de faire vos mises en page selon vos souhaits, l'idéal étant l'apprentissage par la pratique, n'hésitez pas à suivre les instructions de ce pas à pas mais aussi et surtout de faire vos propres essais.popup de page

Attention :

Selon votre template, l'affichage peut adopter un comportement inattendu au delà de deux colonnes.

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.