Comment ajuster l’espacement entre les champs de formulaire dans WPForms

L'espacement est un élément crucial de la conception des formulaires, et dans WPForms, l'espacement entre les champs, les titres et d'autres aspects est défini par défaut pour offrir une expérience optimale à vos visiteurs.

Cela dit, chaque site Web est unique. Ainsi, si vous souhaitez définir des espacements personnalisés entre les champs pour mieux les aligner avec votre style spécifique, vous êtes au bon endroit.

Dans cet article, je vais vous montrer étape par étape comment forcer un espacement entre les champs dans WPForms. Bien que vous deviez travailler avec un peu de code, vous n'avez pas besoin de connaissances préalables en codage pour suivre ma méthode.

Comment ajuster l’espacement entre les champs de formulaire dans WPForms

Chaque modification d'espacement dans ce guide suit la même forme. Vous décidez quelle partie du formulaire vous souhaitez déplacer, copiez le CSS correspondant, puis choisissez où le coller en fonction de si la modification doit affecter une page, un formulaire ou tous les formulaires de votre site.

Étape 1 : Installer le plugin WPForms

Pour ceux qui débutent, WPForms est un constructeur de formulaires par glisser-déposer avec plus de 2 100 modèles prêts à l'emploi, vous pouvez donc généralement commencer par quelque chose de proche de ce dont vous avez besoin plutôt que par une toile vierge.

Si vous n'en avez jamais créé auparavant, ce guide sur la création d'un formulaire de contact simple est le moyen le plus rapide. Ce que j'aime le plus chez WPForms pour cette tâche particulière, c'est la quantité de choses que vous pouvez modifier avant même de toucher au code.

Les contrôles de style visuel gèrent les couleurs, les bordures, les tailles de champs et le remplissage des conteneurs, ce qui couvre une quantité surprenante de ce que les gens pensent nécessiter du CSS.

Pour commencer, achetez la licence Pro. Ensuite, installez WPForms sur votre site Web. Si vous avez besoin d’aide, suivez ces instructions sur la manière d’ajouter un plugin à WordPress.

Passez à WPForms Pro maintenant !

Pour les exemples ci-dessous, j'utilise ce modèle de formulaire d'enquête prêt à l'emploi, qui contient suffisamment de champs pour rendre les modifications d'espacement évidentes.

Étape 2 : Essayez d'abord les contrôles d'espacement intégrés

Avant d'écrire du CSS, il est utile de vérifier si les contrôles visuels font déjà ce que vous voulez. Ouvrez votre formulaire et accédez à Paramètres » Thèmes dans le constructeur, ou cliquez sur le formulaire dans l'éditeur de blocs pour ouvrir le même panneau là.

Trois de ces paramètres modifient directement l'espacement :

• Styles des champs » Taille : Cela modifie la hauteur du champ et, plus utile ici, l'écart entre une étiquette et son champ de saisie. Bascule entre Petit, Moyen et Grand.
• Styles des étiquettes » Taille : Ajuste la taille du texte de l'étiquette, ce qui modifie l'espace occupé par chaque étiquette au-dessus de son champ.
• Styles du conteneur » Remplissage : Définit l'espace à l'intérieur du bord extérieur du formulaire. Augmentez-le lorsque le formulaire semble être pressé contre un arrière-plan ou une bordure.

Il y a une limitation honnête à signaler ici, car aucun de ces contrôles ne définit l'écart vertical entre une ligne de champ et la suivante, ce qui est la chose la plus courante que les gens veulent changer.

Cet écart est fixe à 15 px au-dessus et en dessous de chaque champ, et le CSS est le seul moyen de le modifier. Si les contrôles intégrés vous ont rapproché suffisamment, vous pouvez vous arrêter ici. Si les lignes elles-mêmes sont encore trop serrées ou trop lâches, continuez à lire.

Étape 3 : Copiez le CSS pour l'espacement que vous souhaitez modifier

Chaque extrait ci-dessous se présente sous deux formes, l'une qui s'applique à tous les formulaires WPForms de votre site et l'autre qui cible un seul formulaire par son ID, ce que vous voudrez lorsque un formulaire nécessite un espacement différent du reste.

Pour trouver l'ID d'un formulaire, accédez à WPForms » Tous les formulaires et survolez le nom du formulaire. Ou, vous pouvez également ouvrir le formulaire spécifique, cliquer sur intégrer et copier directement le shortcode du formulaire depuis le constructeur.

WPForms applique déjà ses propres styles à ces éléments, vous aurez donc souvent besoin de !important pour que vos valeurs l'emportent. Je l'ai inclus dans les extraits ci-dessous là où il est vraiment nécessaire.

Espace entre les champs (écart vertical)

C'est celui que la plupart des gens recherchent. WPForms donne à chaque champ 15px de padding en haut et en bas, de sorte que les champs adjacents sont espacés de 30px. Voici l'espacement par défaut sur mon formulaire d'enquête :

Pour le modifier sur tous vos formulaires :

.wpforms-container .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Augmentez les deux valeurs pour écarter les champs uniformément, ou diminuez-les pour resserrer le formulaire. Si vous ne voulez qu'agrandir l'espace dans une seule direction, définissez uniquement padding-top et laissez le bas tel quel.

Pour un seul formulaire, ajoutez l'ID :

#wpforms-2294 .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Espace sous le titre du formulaire

Par défaut, le H1 de votre page se trouve au-dessus du formulaire plutôt qu'à l'intérieur. WPForms place 35px sous le titre du formulaire avant que le premier champ ne commence.

C'est un peu plus que l'espace entre les champs, ce qui est intentionnel, car le titre est un en-tête et les en-têtes méritent plus d'espace que le contenu qui les suit.

Si vous préférez que le titre soit à l'intérieur du conteneur du formulaire, cliquez sur le formulaire intégré dans votre éditeur et activez Afficher le titre dans le panneau de droite.

Vous voudrez probablement masquer le H1 de la page à ce stade afin que le titre n'apparaisse pas deux fois. Cliquez sur le H1 et appuyez sur l'icône en forme d'œil qui apparaît.

Voici l'espacement du titre avant toute modification :

Pour le contrôler, mettez à zéro le padding du conteneur et définissez la marge du titre à ce que vous souhaitez réellement :

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

.wpforms-container-full .wpforms-title {
	margin-bottom: 15px !important;
}

Laissez padding-bottom à 0 et ne modifiez que margin-bottom.

Le régler à 15px fait que le titre se trouve à la même distance du premier champ que les champs les uns des autres.

Cela semble net lorsque vous voulez que le formulaire soit lu comme un seul bloc uniforme. Et voici le résultat sur mon formulaire d'enquête :

La version pour formulaire unique, avec le # sur les deux sélecteurs :

#wpforms-2294 .wpforms-head-container {
	padding-bottom: 0 !important;
}

#wpforms-2294 .wpforms-title {
	margin-bottom: 15px !important;
}

Espace entre une étiquette et son champ

Cet espace pose problème car il ressemble à l'espacement des champs mais il est contrôlé séparément.

Avec le balisage moderne, WPForms le définit via une variable CSS appelée --wpforms-field-size-input-spacing, qui est par défaut à 15px.

Remplacer la variable est plus propre que de lutter directement contre la marge de l'étiquette, car cela maintient la logique de dimensionnement propre à WPForms intacte :

.wpforms-container-full {
	--wpforms-field-size-input-spacing: 8px;
}

Baissez-la à environ 8px et chaque étiquette se rapproche de son champ, ce qui lie visuellement les deux.

C'est vraiment utile sur les formulaires longs, car un espacement serré entre l'étiquette et le champ, associé à des espaces plus larges entre les lignes, permet de distinguer beaucoup plus facilement quelle étiquette appartient à quelle case.

Si vous préférez ne pas toucher au CSS pour celui-ci, le contrôle Styles des champs » Taille de l'étape 2 modifie la même variable.

Espace entre les champs côte à côte

Lorsque vous placez des champs les uns à côté des autres en utilisant le champ Mise en page ou les classes de colonnes de WPForms, ils sont séparés par une gouttière de 20px. La modifier demande un peu de soin, car la gouttière est construite à partir de deux valeurs qui doivent s'accorder.

Chaque colonne de largeur égale est définie sur calc(50% - 10px) avec une marge gauche de 20px. Modifiez uniquement la marge et vos colonnes déborderont de leur ligne. Ajustez les deux ensemble :

.wpforms-container .wpforms-one-half {
	width: calc(50% - 20px) !important;
	margin-left: 40px !important;
}

La règle est que la soustraction de largeur doit être la moitié de votre gouttière. Une gouttière de 40px signifie soustraire 20px, une gouttière de 30px signifie soustraire 15px, et ainsi de suite.

Pour en savoir plus sur la création de ces lignes en premier lieu, consultez le guide sur les dispositions de formulaires multicolonnes.

Espace au-dessus du bouton de soumission

Le balisage moderne contrôle la marge supérieure du bouton de soumission avec sa propre variable, --wpforms-button-size-margin-top, qui est définie par défaut à 10px et ressemble à ceci sur mon formulaire :

Vous pouvez donc définir votre propre valeur pour celle-ci et laisser tout le reste inchangé :

.wpforms-container-full {
	--wpforms-button-size-margin-top: 30px;
}

Donner plus d'espace au bouton qu'aux champs est généralement la bonne décision, car cela sépare l'action des éléments à remplir, et la différence est immédiatement visible :

Réduire ou supprimer l'espace supplémentaire

Maintenant, tout ce qui précède fonctionne en sens inverse, et la réduction des écarts est une demande aussi courante que leur augmentation. Pour resserrer les lignes, réduisez le remplissage des champs en dessous de sa valeur par défaut de 15px :

.wpforms-container .wpforms-field {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

Si l'écart que vous combattez se situe entre le formulaire et le contenu qui l'entoure plutôt qu'à l'intérieur du formulaire, le coupable est généralement le conteneur plutôt que les champs. Définissez le remplissage du conteneur à zéro et supprimez l'espacement du titre :

.wpforms-container-full {
	--wpforms-container-padding: 0px;
}

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

Faites attention à ne pas aller trop loin, car une fois que les lignes sont plus rapprochées que l'écart entre une étiquette et son propre champ, les gens commencent à mal lire quelle étiquette correspond à quel champ, et cela se traduit par de mauvaises données plutôt que par des plaintes. Je garderais au moins 8px de remplissage sur chaque champ.

Étape 4 : Choisissez où ajouter votre CSS

Le même CSS se comporte différemment selon l'endroit où vous le collez, et choisir le bon endroit vous évite de vous répéter sur chaque page ou de retoucher accidentellement des formulaires que vous vouliez laisser tranquilles.

Où vous l'ajoutez	Ce que cela affecte
Constructeur WPForms	Ce formulaire unique, partout où il est intégré
Éditeur de blocs	Cette seule intégration, sur cette page unique
WPCode	Tous les formulaires de votre site

Méthode 1 : L'éditeur WPForms

Ouvrez votre formulaire et accédez à Paramètres » Thèmes, puis basculez vers l'onglet Avancé. Vous y trouverez une boîte CSS personnalisé. Collez votre extrait, puis cliquez sur Enregistrer.

Les styles ajoutés ici sont stockés avec le formulaire lui-même, ils le suivent donc sur chaque page. Cela s'applique que vous l'intégriez avec le bloc WPForms, le shortcode ou le module Divi.

Pour la plupart des gens, c'est le bon réglage par défaut, car cela signifie une seule modification au lieu d'une modification par page. L'ensemble complet des options est couvert dans la documentation sur la personnalisation de vos formulaires dans le constructeur de formulaires.

Méthode 2 : L'éditeur de blocs

Cliquez sur le bloc de formulaire dans votre page ou article pour ouvrir le panneau de style à droite, puis ouvrez la section Avancé et ajoutez votre CSS là.

Publiez ou mettez à jour la page pour l'appliquer. La différence ici est la portée, car tout ce que vous ajoutez dans l'éditeur de blocs n'affecte que cette intégration spécifique.

Vous pouvez exécuter un formulaire de contact sur tout le site avec un espacement généreux sur une page de contact dédiée et un espacement plus serré dans une barre latérale, sans dupliquer le formulaire.

Notez que ce panneau n’apparaît que pour les formulaires intégrés avec le bloc WPForms. Un formulaire inséré via un shortcode ne l’aura donc pas. La documentation sur la mise en forme de vos formulaires dans l’éditeur de blocs couvre le reste des contrôles.

Méthode 3 : WPCode (pour tout le site)

Les deux méthodes ci-dessus sont limitées à un seul formulaire ou à une seule intégration, ce qui est exactement ce que vous souhaitez la plupart du temps. Mais si vous standardisez l’espacement sur une douzaine de formulaires, le définir une fois pour tout le site est préférable à l’ouverture de chacun d’eux.

Le CSS global survit également à un changement de thème, contrairement au CSS ajouté via le personnaliseur de votre thème. WPCode est un plugin gratuit qui rend cela simple. Depuis votre menu d’administration WordPress, allez dans Plugins » Ajouter.

Recherchez WPCode, puis cliquez sur Installer maintenant à côté dans les résultats. Une fois l’installation terminée, le bouton devient Activer. Cliquez dessus.

Avec WPCode actif, allez dans Extraits de code » + Ajouter un extrait.

Cliquez sur Utiliser un extrait sous l’option Ajouter votre code personnalisé (Nouvel extrait).

Donnez un nom à votre extrait, puis choisissez Extrait CSS dans le menu déroulant Type de code. Ceci est important, car WPCode n’appliquera pas le code correctement s’il est toujours défini sur PHP.

Collez votre CSS et laissez les paramètres d’insertion sous l’Aperçu du code à leurs valeurs par défaut. Aucun des extraits de ce guide ne nécessite quoi que ce soit de différent.

Enregistrez l’extrait, puis activez-le avec le commutateur en haut à droite. Rien ne change sur votre site tant que ce commutateur n’est pas activé, ce qui surprend presque tout le monde la première fois.

Comme cela s’applique à tous les formulaires, utilisez la version de l’ID du formulaire de votre extrait si vous souhaitez en exclure certains. Vous pouvez également ajouter vos propres noms de classe à des champs spécifiques et les cibler à la place, ce qui est couvert dans la documentation sur les classes CSS personnalisées.

Quelle quantité d'espace faut-il laisser entre les champs du formulaire ?

Le principe principal est la proximité, ce qui signifie qu’une étiquette doit être plus proche de son propre champ que ce champ ne l’est du suivant.

Un espacement égal partout laisse les gens deviner quelle étiquette appartient à quelle case, et c’est exactement pourquoi la variable étiquette-champ est par défaut à 15px tandis que les champs adjacents sont espacés de 30px.

Une ligne directrice courante dans les systèmes de conception est d’espacer les champs de 50 % à 75 % de la hauteur du champ. Les champs WPForms mesurent 43 px de hauteur en taille Moyenne, ce qui place la plage recommandée à environ 21 px à 32 px.

Le défaut de 30px s’inscrit confortablement à l’intérieur, donc si vous n’êtes pas sûr de vouloir changer quoi que ce soit, la réponse est probablement non. Quelques autres points à garder à l’esprit :

• Donnez plus d’espace aux sections qu’aux champs : Lorsqu’un formulaire a des groupes distincts comme les détails de contact et les détails de paiement, doublez ou triplez l’écart entre les groupes afin que la structure soit visible en un coup d’œil.
• Gardez la cohérence entre mobile et bureau : WPForms gère déjà l’espacement réactif, alors résistez à l’ajout d’espacements spécifiques au mobile, sauf si quelque chose est réellement cassé.
• Changez une valeur à la fois : Les problèmes d'espacement sont généralement dus à un seul coupable, pas à cinq. Ajustez le remplissage des champs, regardez le formulaire, puis passez à autre chose.

Pour en savoir plus sur l'aspect conception, notre guide sur les meilleures pratiques de conception de formulaires aborde plus en détail la mise en page et l'ordre des champs.

FAQ sur l'espacement des formulaires dans WPForms

L'espacement des formulaires dans WPForms revient souvent dans le support, généralement autour des espaces qui semblent trop larges ou du CSS qui ne prend pas effet. Voici les questions que je vois le plus souvent.

Comment réduire l'espace entre les champs dans WPForms ?

Réduisez le remplissage des champs en dessous de sa valeur par défaut de 15px. Utilisez .wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; } et ajustez à partir de là. Gardez au moins 8px pour que les étiquettes restent visuellement attachées à leurs propres champs.

Pourquoi y a-t-il autant d'espace entre mes champs de formulaire ?

Chaque champ a 15px de remplissage en haut et en bas, donc les champs voisins sont espacés de 30px avant que votre thème n'ajoute quoi que ce soit. Si l'écart semble plus grand que cela, votre thème applique probablement ses propres marges aux éléments du formulaire ou aux paragraphes à l'intérieur du conteneur du formulaire.

Puis-je modifier l'espacement du formulaire sans utiliser de CSS ?

En partie. Styles des champs » Taille modifie l'espacement entre l'étiquette et le champ, et Styles du conteneur » Remplissage modifie l'espace à l'intérieur du bord du formulaire, le tout sans code. L'écart vertical entre les lignes de champs n'a pas de contrôle visuel, donc celui-ci nécessite du CSS.

Comment ajouter de l'espace entre deux champs sur la même ligne ?

Les champs côte à côte utilisent une gouttière de 20px créée à partir d'une largeur calc() et d'une marge gauche correspondante. Modifiez les deux ensemble, en maintenant la soustraction de largeur à la moitié de la gouttière, sinon les colonnes déborderont de leur ligne.

Pourquoi mon CSS d'espacement ne fonctionne-t-il pas ?

Le plus souvent, il s'agit d'un # manquant sur un sélecteur d'ID de formulaire, ou des styles de WPForms qui prennent le dessus. Ajoutez !important avant le point-virgule et confirmez que votre sélecteur correspond au formulaire. Notre guide sur le dépannage du CSS qui ne fonctionne pas couvre le reste.

Comment centrer un formulaire dans WPForms ?

C'est une question de largeur de conteneur plutôt que d'espacement, donc les extraits ici ne le feront pas. Définir une max-width sur le conteneur du formulaire avec margin: 0 auto est l'approche habituelle.

Ensuite, personnalisez le reste de la conception de votre formulaire

L'espacement des champs et des étiquettes est l'une des rares parties de la conception de formulaires qui bénéficie encore d'une ou deux lignes de CSS, mais presque tout le reste est cliquable dans le même panneau Paramètres » Thèmes que vous avez utilisé ci-dessus. Notre guide sur la mise en forme des formulaires avec l'éditeur de blocs présente l'ensemble complet des contrôles.

Si vous repensez la mise en page plutôt que le simple espacement, la conception des mises en page de formulaires couvre la structure des colonnes et l'ordre des champs, et comment styliser les formulaires de contact dans WordPress est une bonne lecture complémentaire pour les formulaires de contact spécifiquement.

Stylez vos formulaires WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.