Styliser les étiquettes du formulaire pour qu’elles apparaissent à côté des champs

Souhaitez-vous créer une mise en page de formulaire plus compacte en affichant les étiquettes à côté de leurs champs au lieu de dessus ? Bien que WPForms affiche les étiquettes au-dessus des champs par défaut, vous pouvez facilement modifier cette mise en page à l'aide de CSS pour afficher les étiquettes et les champs côte à côte.

Ce tutoriel vous montrera comment obtenir cette mise en page horizontale professionnelle.

Configuration de votre formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter les champs souhaités. Si vous avez besoin d'aide, veuillez consulter ce guide sur la création de votre premier formulaire.

Une fois votre formulaire créé, cliquez sur Paramètres » Général, cliquez sur la flèche Avancé pour ouvrir ces options. Une fois sur place, dans la section Classe CSS du formulaire, ajoutez la classe wpforms-inline-labels.

Cette classe CSS nous permet de cibler des formulaires spécifiques plutôt que d'affecter tous les formulaires de votre site.

Ajout du style des étiquettes

Il est maintenant temps d'ajouter le code CSS à votre site. Si vous ne savez pas comment ajouter du CSS à votre site, consultez ce guide sur l'ajout de styles CSS personnalisés.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Après avoir ajouté ce CSS, vous verrez que les étiquettes de votre formulaire apparaissent maintenant sur la même ligne que vos champs de formulaire.

Et voilà ! Souhaitez-vous styliser les étiquettes du formulaire pour qu'elles apparaissent à l'intérieur du champ du formulaire ? Consultez notre tutoriel sur Comment créer un formulaire avec des étiquettes flottantes.

Questions fréquemment posées

Q : Et si je voulais appliquer cela à tous mes formulaires ?

R : Si vous souhaitez cela pour tous vos formulaires, utilisez plutôt ce CSS et sautez l'étape ci-dessus lors de l'ajout de la Classe CSS du formulaire. Ce ne serait pas nécessaire si vous vouliez appliquer cela à tous les formulaires.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

C'est tout ! Ensuite, souhaitez-vous explorer d'autres options de style de formulaire ? Jetez un œil à notre guide sur le style du bouton de soumission avec CSS.