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”
- É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 :
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.
