Comment mettre son formulaire Ninja Form avec 2 colonnes

Comment mettre son formulaire Ninja Form avec 2 colonnes

Ninja form est un plugin WordPress qui permet de créer facilement des formulaires. Cependant la version de base bien que complète et suffisante pour des petits besoins, est assez limitée en terme de design.

Une des problématiques rencontrées régulièrement est de mettre une partie du formulaire en 2 colonnes afin de gagner de l’espace et surtout ne pas s’encombrer avec des lignes très longues qui ne sont pas nécessaire. Je prends par exemple les champs NOM et PRÉNOM qui n’ont pas besoin d’être sur une ligne chacun mais qui peuvent être sur une double colonne afin d’optimiser l’espace.

Il existe bien évidement un addon payant qui nous offre la possibilité de créer une double colonne qui ressemble à un builder donc facile à prendre en main. Cependant si votre besoin est de mettre 2 colonnes à votre formulaire seulement cela peut s’avérer un coût assez élevé par rapport à votre besoin. Dans cet article nous allons voir comment mettre 2 colonnes à son formulaire Ninja Form de manière très simple.

Se rendre dans les réglages de Ninja Form

La première étape va consister à se rendre dans les réglages de Ninja Form. En effet, de base Ninja Form bloque certaines fonctionnalités réservés aux développeurs (mais pas d’inquiétude, nous n’allons pas réaliser plusieurs lignes de codes afin d’obtenir 2 colonnes sur votre formulaire de contact). Vous cliquez sur Ninja Form puis réglages

Une fois dans les réglages vous allez cocher le mode développeur. Cette opération va nous permettre d’ouvrir des nouvelles fonctionnalité dans l’interface de création de votre formulaire.

Mise en place des 2 colonnes dans votre formulaire

Une fois que nous avons déverrouillé le mode développeur de Ninja Form nous allons retourner dans notre formulaire et le modifier.

Pour cela on clique sur la roue crantée de la ligne que l’on souhaite passer en 2 colonnes.

Vous allez tomber sur un écran comme celui-ci :

Vous remarquerez que dans le champ : AFFICHAGE nous avons maintenant la possibilité de rentrer des noms de classe (élément et conteneur). C’est ces paramètres que nous allons modifier pour obtenir 2 colonnes sur votre formulaire de contact.

Dans le champ CONTENEUR vous allez mettre : one-half first

Nous définissons ici, la création de colonne avec comme paramètre le champ nom comme première colonne.

Puis vous allez dans le champ que vous souhaitez mettre avec le premier champ (ici dans cet exemple prénom)

Dans le champ CONTENEUR vous allez mettre : one-half

Nous définissons la fin de la double colonne.

Voilà c’est fini, vous avez du coup les champs NOM et PRÉNOM de votre formulaire sur 2 colonnes afin de gagner de l’espace dans votre formulaire et éviter d’avoir des champs à rallonge qui ne sont pas nécessaires