Souhaitez-vous personnaliser facilement l'aspect et la convivialité de vos formulaires WordPress ? Notre fonction de style de formulaire vous permet de styliser vos formulaires sans écrire de CSS.
Ce tutoriel vous montrera comment styliser vos formulaires avec le constructeur visuel WPForms dans l'éditeur de blocs.
Conditions requises : Pour pouvoir styliser vos formulaires dans l'éditeur de blocs, vous devez disposer des éléments suivants :
- WordPress version 6.0 ou supérieure
- Éditeur de blocs ou thème avec édition complète du site
Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence.
Permettre un balisage moderne
Le balisage moderne dans WPForms inclut une accessibilité accrue et vous permet de personnaliser vos formulaires visuellement dans l'éditeur de blocs.
Pour activer le style des formulaires, vous devez activer le balisage moderne dans la page de configuration de WPForms. Pour cela, allez dans WPForms " Settings et sélectionnez l'onglet General.
Ensuite, allez dans la section Général et assurez-vous que l'option Inclure le style du formulaire est réglée sur Base et style du thème du formulaire.
Ensuite, cochez la case Use Modern Markup pour l'activer.
Veillez à enregistrer vos modifications après avoir activé cette option.
Personnalisation des formulaires
Après avoir activé l'option de balisage moderne, créez un nouveau formulaire et ajoutez-le à une page ou à un article.
Dans l'éditeur de blocs, cliquez sur le formulaire pour ouvrir des options supplémentaires pour le bloc WPForms.
Dans les paramètres du bloc WPForms, vous trouverez des options pour personnaliser le thème de couleur, les champs de formulaire, les étiquettes, les boutons, et les styles de conteneur et d'arrière-plan sans écrire de CSS. Vous trouverez également des options supplémentaires pour copier les paramètres de style d'un formulaire à l'autre dans la section Avancé.
Nous examinerons chacune de ces options plus en détail ci-dessous.
Thèmes
Le paramètre Thèmes vous permet de choisir un thème de couleurs prédéfini pour actualiser automatiquement le style des champs, des étiquettes, des boutons, du conteneur et de l'arrière-plan de votre formulaire.
Pour l'appliquer, il suffit de cliquer sur le thème de votre choix, et il ajustera instantanément les couleurs des champs, étiquettes, boutons, conteneurs ou arrière-plans de votre formulaire.
Si vous personnalisez des paramètres individuels après avoir sélectionné un thème, ces modifications seront enregistrées en tant que 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.
Vous pouvez également renommer ce thème pour faciliter son identification dans le champ Nom du thème.
Pour supprimer un thème de formulaire personnalisé, il suffit de cliquer sur le texte " Supprimer le thème" à côté du nom du thème.
Styles de champ
Dans la section Styles de champ, vous trouverez les options permettant d'ajuster la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos champs de formulaire. Nous expliquons ci-dessous les options disponibles pour les champs.
- Taille : Ajuste la taille globale des champs de votre formulaire. Les options sont les suivantes : petit, moyen et grand.
- Bordure : Ce paramètre vous permet d'ajouter ou de supprimer une bordure à vos champs de formulaire. Les options disponibles sont les suivantes : bordures pleines, pointillées ou en pointillés.
- Taille des bordures : Définit l'épaisseur des bordures du champ. L'unité par défaut est le pixel (px), mais vous pouvez sélectionner l'unité qui convient le mieux à vos besoins de conception.
- Rayon de la bordure: Cette option permet d'appliquer des coins arrondis aux champs de votre formulaire pour un aspect plus doux et plus moderne. L'unité par défaut est le pixel (px), mais vous pouvez la remplacer par l'unité de votre choix.
Vous trouverez ensuite les paramètres de couleurs. Ces paramètres vous permettent de mettre à jour les couleurs de l'arrière-plan, de la bordure, du texte et du menu déroulant de vos champs.
Lorsque vous cliquez sur une option de couleur particulière, une superposition des couleurs disponibles pour le thème apparaît.
Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleurs.
Si vous avez déjà une couleur de marque que vous souhaitez utiliser pour vos formulaires, allez-y et collez le code de la couleur hexagonale dans le champ Hex.
Styles d'étiquettes
Dans la section Styles d'étiquettes, vous trouverez la possibilité de modifier la taille et les couleurs de vos étiquettes de formulaire. Les options de taille disponibles sont Petit, Moyen et Grand.
Dans la section Couleurs, vous trouverez la possibilité de mettre à jour les couleurs des étiquettes, des sous-étiquettes et des messages d'erreur. Nous expliquons ci-dessous les options de couleurs disponibles pour les étiquettes.
- Étiquette : Cette option permet de contrôler la couleur du texte de l'étiquette du champ principal.
- Sublabel & Hint : Cette option contrôle la couleur des sous-étiquettes des champs et des indices qui apparaissent lorsque WPForms suggère des valeurs aux utilisateurs dans le frontend.
- Message d'erreur : La couleur du texte qui s'affiche en cas d'erreur lorsque les utilisateurs remplissent le formulaire.
Styles de boutons
Les paramètres des Styles de boutons vous permettent de modifier la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos boutons. Nous expliquons ci-dessous les options disponibles pour les boutons.
- Taille : Cette option définit la taille du bouton. Les options disponibles sont Small (petit), Medium (moyen) et Large (grand).
- Bordure : Ce paramètre vous permet d'entourer vos boutons d'une bordure solide, en pointillés ou en tirets.
- Taille des bordures : Définit l'épaisseur des bordures des boutons. L'unité par défaut est le pixel (px), mais vous pouvez choisir l'unité qui convient le mieux à vos besoins de conception.
- Rayon de la bordure: Cette option permet d'arrondir les coins des boutons pour leur donner un aspect plus doux ou plus net. L'unité standard est le pixel (px), mais des options permettent de changer d'unité en fonction de vos préférences en matière de conception.
Dans le panneau Couleurs, vous trouverez la possibilité de mettre à jour les couleurs d'arrière-plan et de texte de votre bouton.
Styles de conteneurs
Les paramètres des Styles de conteneur vous permettent de personnaliser le rembourrage, le style de bordure, la taille de la bordure, le rayon de la bordure, l'ombre et les couleurs du conteneur de votre formulaire. Nous détaillons ci-dessous 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.
- Border Style (Style de bordure) : Ce paramètre vous permet de choisir le contour de votre conteneur, avec des options pour une bordure solide, en pointillés ou en tirets.
- Taille de la bordure : Détermine l'épaisseur de la bordure de votre conteneur. L'unité par défaut est le pixel (px), mais vous pouvez choisir l'unité qui convient le mieux à vos besoins de conception.
- Rayon de la bordure: Ce paramètre permet d'ajuster l'arrondi des coins de votre conteneur et d'ajouter un bord plus doux ou plus défini à l'apparence de votre formulaire. La mesure par défaut est en pixels (px), mais elle 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 d'aucune à grande.
- Couleurs: Mettez à jour la couleur de la bordure de votre conteneur pour l'aligner sur votre thème visuel et améliorer l'esthétique générale du formulaire.
Styles d'arrière-plan
Les paramètres des Styles d'arrière-plan vous permettent de contrôler 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 multimédia. Pour explorer une plus grande sélection d'images professionnelles, sélectionnez l'option Stock Photos.
Après avoir fait votre sélection, cliquez sur le bouton Choisir l'image pour continuer.
Si vous sélectionnez Médiathèque dans le menu déroulant Image , la galerie multimédia de votre site web s'ouvrira, vous permettant de sélectionner une image ou d'en télécharger une nouvelle. Si vous sélectionnez Photos de stock, vous aurez accès à une sélection de photos de stock 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 Top Center, Bottom Center, et d'autres pour obtenir le placement parfait.
- Répétition : choisissez le mode de répétition de votre image d'arrière-plan. Les options sont les suivantes : pas de répétition pour une seule image, mosaïque pour répéter l'image sur l'ensemble de l'arrière-plan, répétition horizontale pour une répétition sur la largeur et répétition verticale pour une répétition sur la longueur.
- Taille: Cette option permet d'ajuster la taille de l'image de fond dans le formulaire. L'option Couverture permet de s'assurer que l'image couvre l'intégralité de l'arrière-plan, en s'adaptant à la taille du formulaire. Si l'option Dimensions est sélectionnée, 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.
Stylisation avancée
Dans la section Avancé, vous verrez le code CSS qui contient tous les styles que vous avez ajoutés au formulaire sous Copier / Coller les paramètres de style.
Cette option permet de copier les styles d'un formulaire à l'autre.
Si vous avez copié les paramètres de style d'un autre formulaire, vous pourrez les coller rapidement ici. Après avoir collé l'extrait de code, le formulaire utilisera les styles du formulaire précédent.
Si vous souhaitez réinitialiser les personnalisations que vous avez ajoutées à votre formulaire, cliquez sur le bouton Réinitialiser les paramètres de style. Cela rétablira votre formulaire dans son état d'origine, sans aucun style personnalisé.
Vous pouvez éventuellement ajouter des classes CSS personnalisées que vous avez créées dans la case CLASSE(ES) CSS SUPPLÉMENTAIRE. Pour en savoir plus, consultez notre tutoriel sur l'ajout de classes CSS personnalisées.
Après avoir stylisé votre formulaire, veillez à enregistrer vos modifications en publiant la page ou en l'enregistrant en tant que brouillon.
Tester vos formulaires
La dernière étape consiste à effectuer un test rapide pour s'assurer que votre formulaire se présente et fonctionne comme vous le souhaitez.
Pour le tester, il vous suffit de soumettre une entrée dans votre formulaire. Pour en savoir plus, consultez notre liste de contrôle complète sur les tests de formulaires.
Questions fréquemment posées
Nous répondons ci-dessous aux questions les plus fréquentes que nous recevons sur le style de vos formulaires dans l'éditeur de blocs.
Attention ! Certaines FAQ de ce document contiennent du code PHP et sont destinées aux développeurs. Nous offrons ce code par courtoisie, mais nous ne fournissons pas d'assistance pour la personnalisation du code ou le développement par des tiers.
Si vous préférez une approche plus simple pour ajouter du code personnalisé à votre site, veuillez consulter le guide de WPBeginner sur l'utilisation de WPCode.
Je ne trouve pas l'option Use Modern Markup. Comment puis-je activer Modern Markup dans WPForms ?
Les utilisateurs ayant au moins un formulaire sur leur site web avant la mise à jour du plugin WPForms vers la version 1.8.1 verront l'option de balisage moderne.
Si vous venez d'installer le plugin WPForms sur votre site WordPress, vous ne verrez pas l'option Use Modern Markup sur votre page de réglages. Votre site sera configuré pour utiliser le balisage moderne par défaut.
Si vous souhaitez afficher cette option sur votre page de configuration, vous devez ajouter l'extrait de code suivant à votre site.
Comment forcer WPForms à utiliser des balises modernes ?
Si l'utilisation du champ carte de crédit déprécié vous empêche d'activer le balisage moderne, vous pouvez contourner cette restriction en ajoutant un filtre personnalisé. Pour forcer WPForms à activer l'option de balisage moderne, ajoutez l'extrait de code suivant à votre site web.
Après avoir ajouté le code, vous pourrez activer/désactiver le marquage moderne à partir de la page de configuration de WPForms.
Comment puis-je apporter des modifications de style qui ne sont pas disponibles dans l'éditeur de blocs ?
Si vous souhaitez apporter d'autres modifications aux styles de vos formulaires qui ne sont pas disponibles en tant qu'options dans l'éditeur de blocs, vous pouvez utiliser CSS Hero. Ce plugin vous permet de modifier l'apparence de votre site sur le frontend sans écrire de code.
Si vous souhaitez styliser vos formulaires à l'aide de CSS, nous vous recommandons d'utiliser WPCode pour ajouter vos styles personnalisés à votre site.
Voilà, c'est fait ! Vous savez maintenant comment personnaliser l'apparence de vos formulaires WordPress en utilisant WPForms et l'éditeur de blocs.
Ensuite, vous souhaitez utiliser des icônes pour améliorer l'affichage de votre formulaire ? N'hésitez pas à consulter notre tutoriel sur l'utilisation des choix d'icônes pour apprendre comment procéder.