Résumé IA
L'espacement est un élément crucial de la conception des formulaires. 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.
Dans cet article
Forcer des espaces entre les champs du formulaire
Avant de partager le code exact pour forcer des espaces entre différents types de composants de formulaire, vous aurez besoin des bons plugins pour rendre cette tâche aussi simple que possible.
Configuration initiale : Espacement des formulaires avec du code
Commençons par installer les plugins requis sur votre site.
Étape 1 : Installer WPForms et WPCode
Cette méthode fonctionne pour les versions Lite et Pro de WPForms. Mais je recommande d'obtenir WPForms Pro car cela vous donnera accès à des tonnes d'options de style supplémentaires avec l'éditeur de blocs, éliminant ainsi le besoin de code pour des personnalisations plus avancées.
Après avoir acheté WPForms Pro, procédez à l'installation du plugin sur votre site. Voici un guide détaillé sur l'installation de WPForms.
Ensuite, vous aurez également besoin du plugin WPCode. Il s'agit d'un plugin gratuit qui rend l'ajout de snippets de code à votre site incroyablement facile.
Les étapes d'installation sont similaires à la méthode d'installation de WPForms, mais vous pouvez ajouter la version gratuite de WPCode directement depuis le répertoire WordPress. Voici la version rapide du processus.
Depuis votre menu d'administration WordPress, allez dans Plugins » Ajouter.
Cela vous mènera à l'écran des plugins. Utilisez la boîte de recherche sur le côté droit pour rechercher WPCode. Lorsque la liste des plugins apparaît à l'écran, cliquez sur le bouton Installer maintenant à côté.
L'installation ne prendra que quelques secondes et le bouton Installer se transformera en Activer. Appuyez sur le bouton Activer pour terminer l'installation du plugin sur votre site.
Excellent ! Les plugins nécessaires étant installés, nous pouvons passer à l'ajustement des espaces entre les différents éléments du formulaire.
Étape 2 : Créer et intégrer un formulaire
Si vous essayez d'ajuster l'espacement entre les champs dans WPForms, vous avez probablement déjà créé et publié un ou plusieurs formulaires sur votre site.
Mais juste au cas où vous ne l'auriez pas fait, vous pouvez suivre ce guide facile sur la création d'un formulaire de contact simple.
À des fins d'illustration, j'utilise ce modèle de formulaire d'enquête prêt à l'emploi.
Assurez-vous d'intégrer et de publier votre formulaire (ou au moins d'enregistrer une version brouillon dans votre éditeur WordPress). Vous ne pouvez personnaliser l'espacement que sur un formulaire déjà intégré à votre site.
Vous devrez également connaître l'ID du formulaire que vous souhaitez personnaliser. Vous pouvez facilement trouver l'ID du formulaire en allant dans WPForms » Tous les formulaires.
L'ID du formulaire est entièrement composé de chiffres et il est mentionné dans la colonne Shortcode entre guillemets doubles. Dans mon cas, l'ID du formulaire est 2294.
Génial ! Mais vous vous demandez peut-être encore comment insérer le code pour modifier l'espacement de WPForms. Je vais vous décrire cela ensuite.
Étape 3 : Insérer le code pour l'espacement des formulaires
Avant d'utiliser les codes, il est important de savoir comment insérer de nouveaux extraits de code dans votre site WordPress. Vous devrez répéter ce processus pour chaque code contrôlant l'espacement entre les champs dans WPForms.
Pour ajouter un nouvel extrait, allez simplement dans Extraits de code » + Ajouter un extrait.
Ensuite, cliquez sur le bouton Utiliser l'extrait sous l'option Ajouter votre code personnalisé (Nouvel extrait).
Vous devriez maintenant vous trouver sur un nouvel écran, où vous pouvez donner un titre à votre extrait et écrire votre code personnalisé (ou simplement copier-coller ceux que je partagerai dans la section suivante).
Étant donné que tous les codes de contrôle de l'espacement dans un formulaire sont en CSS, assurez-vous de sélectionner Extrait CSS dans le menu déroulant Type de code.
Après cela, il vous suffit d'ajouter votre extrait de code et de sélectionner la méthode d'insertion. Les paramètres d'insertion peuvent être modifiés dans une section sous l'aperçu du code. Mais vous n'aurez pas besoin de modifier les paramètres par défaut pour aucun des codes abordés dans cet article.
Plus important encore, n'oubliez pas de sauvegarder votre extrait et de l'activer après avoir ajouté votre code personnalisé. Vous ne verrez pas le code prendre effet tant qu'il n'est pas activé à l'aide du bouton bascule en haut à droite.
Excellent ! Vous êtes maintenant prêt à commencer à personnaliser l'espacement des formulaires avec du code personnalisé.
Codes CSS pour ajuster l'espacement des formulaires
Nous sommes maintenant prêts à commencer à créer les extraits de code CSS qui contrôlent les espacements des différents éléments du formulaire.
Modifier l'espace entre le titre du formulaire et le premier champ
Parlons des titres de formulaire ! Par défaut, WPForms utilise le titre H1 de votre page comme titre de formulaire. Ce titre apparaît au-dessus du formulaire lui-même.
Si vous souhaitez que le titre apparaisse à l'intérieur du conteneur du formulaire à la place, vous pouvez facilement activer cette option depuis l'éditeur de blocs WordPress.
Cliquez sur le formulaire intégré dans votre éditeur pour ouvrir des options supplémentaires dans le panneau de droite. Ensuite, cliquez sur le bouton bascule Afficher le titre .
Vous voudrez peut-être masquer le H1 si vous utilisez le titre WPForms. Cela peut être simplement fait en cliquant sur le H1, puis en appuyant sur l'icône de l'œil lorsqu'elle apparaît.
Maintenant, nous sommes prêts à modifier l'espacement entre le titre et le premier champ du formulaire. Vous pouvez Publier ou Mettre à jour votre formulaire à ce stade.
Examinons d'abord l'espacement par défaut entre le titre du formulaire et le premier champ dans WPForms. Voici à quoi cela ressemble généralement :
Pour modifier cet espacement, créez un nouvel extrait dans WPCode, comme indiqué à l'étape 3. Vous pouvez y accéder rapidement en allant dans Extraits de code » + Ajouter un extrait sur votre barre latérale WordPress.
Voici le code pour modifier l'espacement du titre pour TOUS les formulaires WPForms de votre site :
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}
Rappelez-vous que les valeurs de padding et de marge sont variables. Cela signifie que vous pouvez saisir ici n'importe quelle valeur dont vous avez besoin. Je recommande de ne modifier que la valeur margin-bottom dans ce code et de laisser padding-bottom à 0.
Par exemple, si vous souhaitez que le titre apparaisse avec la même distance que l'espace entre chaque champ, vous pouvez utiliser 15px comme valeur de margin-bottom. Si vous souhaitez créer une distance plus grande ou plus petite que celle-ci, augmentez ou diminuez simplement la valeur px de margin-bottom selon vos besoins.
Voici comment le titre apparaît après avoir ajouté l'extrait de code ci-dessus à mon formulaire d'enquête.
Si vous souhaitez ajuster cet espacement pour des formulaires spécifiques plutôt que d'appliquer des modifications globales, vous pouvez modifier le code ci-dessus en mentionnant l'ID du formulaire qui vous intéresse.
Par exemple, voici comment le code sera modifié pour un formulaire ayant l'ID # 2294.
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
Cela s'occupe de l'espacement du titre de votre formulaire. Mais qu'en est-il de l'espacement entre chaque champ ?
J'aborderai cela ensuite.
Modifier l'espacement de tous les champs
L'espace entre chaque ligne successive de champs est un autre nombre variable qui peut être facilement contrôlé par le code.
Pour référence, examinons d'abord l'espacement par défaut entre les champs.
Maintenant, si vous souhaitez augmenter ou réduire cet espace, vous pouvez créer un nouveau extrait CSS en suivant les mêmes étapes que celles présentées ici.
Seulement, cette fois, le code dont vous avez besoin ressemble à ceci :
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
Le résultat est un formulaire plus étiré avec un plus grand espace entre chaque champ successif.
Vous pouvez ajuster l'espace librement en modifiant la valeur px de la propriété padding-top.
Encore une fois, si vous souhaitez uniquement modifier les espacements des champs pour un formulaire individuel, vous devrez modifier le code en mentionnant l'ID du formulaire :
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}
Modifier le padding du bouton de soumission
Modifier l'espace entre votre dernier champ et le bouton de soumission est aussi facile que les codes que vous avez utilisés ci-dessus.
Par défaut, l'espacement du bouton de soumission dans WPForms apparaît comme ceci :
Le code dont vous avez besoin pour ajuster le padding du bouton de soumission est :
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Après avoir activé ce code, vous constaterez que le padding accru prend effet pour le bouton de soumission de votre formulaire :
C'était assez simple, n'est-ce pas ?
N'hésitez pas à utiliser les codes CSS pour forcer un espace dans WPForms selon vos besoins !
Ensuite, Appliquer des styles de formulaire avancés
Ajuster les marges et les paddings dans vos formulaires est l'une des rares choses qui nécessite du code. Mais WPForms vous permet de personnaliser les styles de vos formulaires en détail sans code, dans la plupart des cas.
Vous pouvez modifier l'apparence de vos champs, étiquettes, boutons, et plus encore avec des contrôles intuitifs en pointer-cliquer. Consultez notre guide sur la mise en forme des formulaires avec l'éditeur de blocs pour un aperçu complet.
Créez votre formulaire 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é, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
