Styliser vos formulaires

Souhaitez-vous personnaliser facilement l'apparence de vos formulaires WordPress ? Notre fonctionnalité de style de formulaire vous permet de styliser vos formulaires sans écrire de CSS.

Ce tutoriel vous montrera comment styliser vos formulaires dans le générateur de formulaires WPForms.

---

Personnalisation de vos thèmes de formulaire

Pour commencer, vous devrez d'abord créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.

Une fois que vous avez ouvert le générateur de formulaires, accédez à Paramètres » Thèmes pour accéder aux paramètres de personnalisation de votre formulaire.

Ici, sur la gauche, vous trouverez des options pour personnaliser le thème de couleur, les champs du formulaire, les étiquettes, les boutons, ainsi que les styles du conteneur et de l'arrière-plan sans écrire de CSS.

La section Aperçu sur la droite affiche une mise en page d'exemple avec des champs courants, afin que vous puissiez voir instantanément à quoi ressembleront vos modifications de style.

Nous aborderons chacune des options disponibles plus en détail ci-dessous.

Thèmes

Le paramètre Thèmes vous permet de choisir un thème de couleur prédéfini pour mettre à jour automatiquement le style des champs, des étiquettes, des boutons, du conteneur et de l'arrière-plan de votre formulaire.

Pour appliquer, cliquez simplement sur votre thème préféré, et il ajustera instantanément les couleurs des champs, des étiquettes, des boutons, du conteneur ou de l'arrière-plan de votre formulaire.

Si vous personnalisez des paramètres individuels après avoir sélectionné un thème, ces modifications seront enregistrées sous forme de nouveau thème de formulaire personnalisé. Ce nouveau thème sera ajouté à votre liste de thèmes disponibles et pourra être appliqué à n'importe quel formulaire, comme vous le feriez avec n'importe quel autre thème de formulaire.

Styles de champ

Dans la section Styles des champs, vous trouverez les options pour ajuster la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos champs de formulaire. Ci-dessous, nous avons expliqué les options de champ disponibles.

• Taille : Ajuste la taille globale de vos champs de formulaire. Les options incluent Petit, Moyen et Grand.
• Bordure : Ce paramètre vous permet d'ajouter ou de supprimer une bordure de vos champs de formulaire. Les options incluent des bordures Pleine, Tirets ou Pointillés.
• Taille de la bordure : Définit l’épaisseur des bordures de votre champ. L’unité par défaut est le pixel (px), mais vous pouvez sélectionner l’unité qui convient le mieux aux besoins de votre design.
• Rayon de la bordure : Utilisez ceci pour appliquer des coins arrondis à vos champs de formulaire pour une apparence plus douce et plus moderne. L’unité par défaut est le pixel (px), mais vous pouvez la changer pour l’unité que vous préférez.

Ensuite, vous trouverez des options pour mettre à jour les couleurs de l’arrière-plan, de la bordure, et du texte de vos champs de formulaire.

Pour changer une couleur, cliquez sur l’étiquette correspondante pour ouvrir le sélecteur de couleurs. Vous pouvez soit choisir une couleur visuellement, soit entrer un code hexadécimal spécifique pour un contrôle précis.

Styles d'étiquette

Dans la section Styles d’étiquette, vous trouverez l’option pour mettre à jour la taille de vos étiquettes de formulaire. Les options de taille disponibles incluent Petite, Moyenne et Grande.

Vous trouverez également l’option pour mettre à jour les couleurs des étiquettes, sous-étiquettes et messages d’erreur. Ci-dessous, nous avons expliqué les options de couleur d’étiquette disponibles.

• Étiquette : Cette option contrôle la couleur du texte de votre étiquette de champ principale.
• Sous-étiquette et Indice : Cette option contrôle la couleur des sous-étiquettes et des indices de champ qui apparaissent lorsque WPForms suggère des valeurs aux utilisateurs sur le front-end.
• Message d’erreur : La couleur du texte qui s’affiche en cas d’erreur lorsque les utilisateurs remplissent votre formulaire.

Styles de bouton

Les paramètres Styles de bouton vous permettent de changer la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos boutons. Ci-dessous, nous avons expliqué les options de bouton disponibles.

• Taille : Cette option définit la taille du bouton. Les options incluent Petite, Moyenne et Grande.
• Bordure : Ce paramètre vous permet de souligner vos boutons avec une bordure Pleine, Tirets ou Pointillés.
• Taille de la bordure : Définit l’épaisseur des bordures de votre bouton. L’unité par défaut est le pixel (px), mais vous pouvez sélectionner l’unité qui convient le mieux aux besoins de votre design.
• Rayon de la bordure : Ceci ajuste l’arrondi des coins de votre bouton pour un aspect plus doux ou plus net. Les pixels (px) sont l’unité standard, avec des options pour changer selon vos préférences de design.

Vous trouverez également l’option pour mettre à jour les couleurs d’arrière-plan et de texte de votre bouton.

Styles du conteneur

Les paramètres Styles de conteneur vous permettent de personnaliser le remplissage, le style de bordure, la taille de la bordure, le rayon de la bordure, l’ombre et les couleurs du conteneur de votre formulaire. Ci-dessous, nous avons détaillé les options de conteneur disponibles.

• Remplissage : Cette option définit l’espace à l’intérieur des bordures du conteneur du formulaire. Vous pouvez augmenter ou diminuer cette valeur pour ajuster l’espacement autour du contenu de votre formulaire.
• Style de bordure : Ce paramètre vous permet de choisir le contour de votre conteneur, avec des options pour une bordure Unie, Tirets ou Pointillés.
• Taille de bordure : Détermine l'épaisseur de la bordure de votre conteneur. L'unité par défaut est le pixel (px), mais vous pouvez sélectionner l'unité qui convient le mieux aux besoins de votre conception.
• Rayon de bordure : Ceci ajuste l'arrondi des coins de votre conteneur, ajoutant un bord plus doux ou plus défini à l'apparence de votre formulaire. La mesure par défaut est en pixels (px) mais peut être modifiée pour s'adapter à votre style.
• Ombre : Choisissez la taille de l'effet d'ombre pour votre conteneur afin d'ajouter de la profondeur à la conception de votre formulaire, avec des options allant de aucune à grande.
• Couleurs : Mettez à jour la couleur de la bordure de votre conteneur pour l'aligner sur votre thème visuel, améliorant ainsi l'esthétique générale du formulaire.

Styles d'arrière-plan

Les paramètres Styles d'arrière-plan vous donnent le contrôle sur l'image et la couleur d'arrière-plan de votre formulaire.

Pour commencer, sélectionnez une source d'image dans le menu déroulant Image. Pour les images déjà téléchargées sur votre site Web ou pour en télécharger de nouvelles, sélectionnez l'option Bibliothèque de médias. Pour explorer une sélection plus large d'images professionnelles, sélectionnez l'option Photos de stock.

Après avoir fait votre sélection, cliquez sur le bouton Choisir une image pour continuer.

Si vous sélectionnez Bibliothèque de médias dans le menu déroulant Image, la galerie multimédia de votre site Web s'ouvrira, vous permettant de choisir une image ou d'en télécharger une nouvelle. Si Photos de stock est sélectionné, vous serez présenté avec une sélection de photos de stock à choisir pour l'arrière-plan de votre formulaire.

Une fois que vous avez sélectionné votre image, la section Styles d'arrière-plan offre des options de personnalisation supplémentaires :

• Position : Ce paramètre vous permet d'aligner votre image d'arrière-plan dans le formulaire en sélectionnant des options telles que Haut au centre, Bas au centre, et plus encore pour obtenir le placement parfait.
• Répétition : Choisissez comment votre image d'arrière-plan se répète. Les options sont Aucune répétition pour une seule image, Mosaïque pour répéter l'image sur tout l'arrière-plan, Répéter horizontalement pour répéter sur la largeur, et Répéter verticalement pour répéter sur la longueur.
• Taille : Ceci ajuste la façon dont votre image d'arrière-plan s'adapte au formulaire. Couvrir garantit que l'image couvre tout l'arrière-plan, s'adaptant à la taille du formulaire. Si Dimensions est sélectionné, vous pouvez spécifier la largeur et la hauteur exactes de votre image.
• Couleurs : Cette option vous permet de sélectionner une couleur d’arrière-plan, qui sera visible lorsqu’aucune image n’est utilisée.

Style avancé

Dans l’onglet Avancé, vous trouverez deux options utiles pour styliser davantage vos formulaires.

• La zone CSS personnalisé vous permet d’ajouter vos propres classes CSS pour une personnalisation supplémentaire. Pour en savoir plus, consultez notre tutoriel sur l’ajout de classes CSS personnalisées.
• La section Copier / Coller les paramètres de style affiche le code CSS de tous les styles que vous avez appliqués dans le générateur de formulaires. Vous pouvez copier ce code pour réutiliser les mêmes styles sur un autre formulaire.

Après avoir stylisé votre formulaire, vous pouvez continuer à modifier les champs si nécessaire. Une fois que vous avez terminé, cliquez sur Enregistrer, puis utilisez le bouton Aperçu pour voir votre formulaire réel avec les styles appliqués.

Test de vos formulaires

La dernière étape consiste à effectuer un test rapide pour vous assurer que votre formulaire a l’apparence et le fonctionnement attendus.

Pour tester, il vous suffit de soumettre une entrée à votre formulaire. Pour en savoir plus, veuillez consulter notre liste de contrôle complète pour les tests de formulaires.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus fréquemment posées concernant la stylisation de vos formulaires.

Mon formulaire conservera-t-il ses styles lorsque je l’intégrerai sur différentes pages ?

Oui. Lorsque vous stylisez un formulaire dans le générateur WPForms, ces paramètres sont enregistrés avec le formulaire et s’appliquent par défaut partout où le formulaire est intégré.

Si vous utilisez l’éditeur de blocs ou Elementor pour appliquer des modifications de style supplémentaires lors de l’intégration du formulaire, ces modifications n’affecteront que cette page spécifique. Les styles de générateur d’origine restent inchangés pour toutes les autres instances.

Cela vous permet d’utiliser le même formulaire sur votre site tout en personnalisant éventuellement son apparence page par page.

Puis-je utiliser les options de style du générateur de formulaires avec des constructeurs de pages comme Divi ?

Oui. Les options de style disponibles dans le générateur de formulaires WPForms (Paramètres » Thèmes) sont enregistrées avec le formulaire et s’appliquent partout où il est intégré, y compris les pages créées avec Divi, Elementor ou tout autre constructeur de pages. Aucune configuration supplémentaire n’est requise.

Si vous souhaitez styliser vos formulaires à l’aide de l’éditeur de blocs à la place, vous aurez besoin du balisage moderne activé. Pour plus de détails, consultez notre guide sur la stylisation de vos formulaires dans l’éditeur de blocs. Notez que les options de style de l’éditeur de blocs ne sont disponibles que lorsque vous utilisez l’éditeur de blocs WordPress ou Elementor — elles ne sont pas accessibles depuis le constructeur visuel de Divi.

C’est tout ! Vous savez maintenant comment personnaliser l’apparence de vos formulaires WordPress à l’aide de WPForms.

Ensuite, souhaitez-vous utiliser des icônes pour améliorer l’affichage de votre formulaire ? Assurez-vous de consulter notre tutoriel sur l'utilisation des choix d’icônes pour apprendre comment.