FreeCom création de site internet Auch, Tarbes, Toulouse Agence de Communication Web et Print, Site en Wordpress,

Plusieurs Colonnes sur votre Formulaire

Un formulaire peut paraître long s’il y a beaucoup de champs à renseigner.
Voici une méthode en 3 étapes afin que vous puissiez mettre sur plusieurs colonnes vos champs de formulaire.

  • Étape 1 :

Créez les champs de votre formulaire

  • Étape 2 :

Cliquez sur “Apparence

champ nom apparence

  • Étape 3 :

Renseignez la case “Classe CSS personnalisée” avec le code suivant : col-xs-12 col-lg-6

Pour un formulaire sur 2 colonnes : col-xs-12 col-lg-6 sur les deux premiers champs

Pour un formulaire sur 3 colonnes : col-xs-12 col-lg-4 sur 3 champs

Voici un schéma qui vient du site http://getbootstrap.com/css/ qui illustre l’utilisation des colonnes :

utilisation des colonnes sur un formulaire

N'oubliez pas d‘enregistrer le formulaire.

Attention, il faut renseigner le code des colonnes dans TOUS les champs. Si vous ne renseignez pas le code, la petite marge à gauche du formulaire disparaît.

Aussi, il se peut que pour les blocs qui rassemblent plusieurs champs (comme par exemple le bloc “Adresse” qui contient plusieurs champs : adresse, adresse ligne 1, ville, code postal ZIP, État/province/région, Pays) le code “casse” la mise en page des colonnes.

Pour pallier à cela, nous vous conseillons de ne pas prendre de bloc champ et de les remplacer en créant les champs un par un avec le champ “ligne de texte simple” ou “Texte (paragraphe)” et d’appliquer un code colonne dans ces champs. Vous aurez la même présentation avec moins de difficulté à mettre en page votre formulaire.