Comment mettre un formulaire sur plusieurs colonnes
11 janvier 2021 | Astuces 6temFlex | 6temflex, design, formulaire, colonnes
En créant un site avec 6temFlex, vous pouvez intégrer des formulaires personnalisés très facilement (formulaire de contact, de devis ou bien un formulaire pour permettre aux internautes d’être rappelé…). Personnaliser la mise en forme du formulaire permet d’optimiser l’espace sur votre site, de faire en sorte que le formulaire soit plus visuel et d’inciter les internautes à le compléter.
Ci-contre, on peut voir que le formulaire a été disposé sur deux colonnes, ce qui parfois, peut se montrer plus esthétique, design.
Voici la procédure à suivre :
1 – Créez les champs de votre formulaire
2 – Cliquez sur “Apparence”
3 – Renseignez la case “Classe CSS personnalisée” avec le code correspondant au nombre de colonne souhaité :
- 2 colonnes : gf_left_half à renseigner pour le champ de gauche et gf_right_half pour le champ de droite
- 3 colonnes : gf_left_third à renseigner pour le premier champ de gauche, gf_middle_third pour le champ du milieu et gf_right_third pour le champ de droite
Il est aussi possible de diviser en plusieurs colonnes des cases à cocher :
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.
Certains blocs intégrables dans les formulaires rassemblent plusieurs champs; c’est le cas du bloc « Adresse » qui insére automatiquement les champs « adresse ligne 1 », « ville », « code postal », « ZIP, État/province/région », « Pays ». Le code permettant de faire des colonnes peut « casser » la mise en page de tous ces champs.
Pour pallier ce risque, nous vous conseillons de ne pas utiliser le bloc « Adresse » pré-formaté mais de créer des champs individuels avec le bloc “ligne de texte simple” ou “Texte (paragraphe)” et d’appliquer un code colonne dans chacun de ces champs.
Vous aurez la même présentation sans risque de casser la mise en forme.