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

Afin d'adapter mon formulaire BreezingForms à ma mise en page générale ou pour quelle qu’autre raison, j'aimerais formater certains éléments de mon formulaire sur une même ligne et d'autres sur deux colonnes.

Est-ce que BreezingForms permet ce type de mise en page ?

Voyons ensemble comment mettre en page un formulaire avec des éléments en ligne et d'autres en multicolonnes. Les options multicolonnes 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-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.

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ément avant de passer au suivant.

Lorsque votre section est prête, resélectionnez la section mère et ajoutez-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 leurs 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ément (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.

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

Pas encore de commentaires.

Connectez-vous pour poster un commentaire

Afin d'éviter les messages indésirables, les commentaires sont réservés aux membres inscrits. Veuillez vous inscrire ou vous connecter pour publier votre commentaire

FAIRE UN DON

paypal btn

Via PayPal

PLUGIN UP DE LOMART

Universal Plugin : UP

De très nombreuses actions pour vos articles en un unique plugin.
up lomart