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

ninja form reglage

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.

cocher mode developpeur

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 :

mettre 2 colonnes ninja form

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)

ajouter un champ conteneur ninja form

Dans le champ CONTENEUR vous allez mettre : one-half

Nous définissons la fin de la double colonne.

2 colonnes ninja form

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

Résumé
Comment mettre son formulaire Ninja Form avec 2 colonnes
Nom de l'article
Comment mettre son formulaire Ninja Form avec 2 colonnes
Description
Comment mettre son formulaire Ninja Form avec 2 colonnes sans avoi à acheter un plugin supplémentaire
Auteur
Éditeur
KendoDev
Logo de l'éditeur

Vous avez aimer cet article ? Partager le sur les réseaux sociaux :)

Laissez un commentaire

Articles

Voir tout