Styliser vos formulaires dans l'éditeur de blocs

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 avec le constructeur visuel WPForms dans l'éditeur de blocs.

---

Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence.

Activation du 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 la stylisation des formulaires, vous devrez activer le balisage moderne depuis votre page de paramètres WPForms. Pour ce faire, allez dans WPForms » Paramètres et sélectionnez l'onglet Général.

Ensuite, faites défiler jusqu'à la section Général et assurez-vous que l'option Inclure la stylisation du formulaire est définie sur Style de base et thème du formulaire.

Après cela, cochez la case Utiliser le balisage moderne pour l'activer.

N'oubliez pas de sauvegarder vos modifications après avoir activé cette option.

Personnalisation de vos formulaires

Après avoir activé l'option de balisage moderne, créez un nouveau formulaire et ajoutez le formulaire à 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 du formulaire, les étiquettes, les boutons, ainsi que 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 à un autre dans la section Avancé.

Nous aborderons 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 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.

Vous pouvez également renommer ce thème pour une identification facile dans le champ Nom du thème.

Pour supprimer un thème de formulaire personnalisé, cliquez simplement sur le texte Supprimer le thème à côté du nom du thème.

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 les paramètres Couleurs. Cela vous permet de mettre à jour les couleurs d’arrière-plan, de bordure, de texte et de menu déroulant de vos champs.

Lorsque vous cliquez sur une option de couleur particulière, une superposition avec les couleurs de thème disponibles apparaîtra.

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, collez le code couleur hexadécimal dans le champ Hex.

Styles d'étiquette

Dans la section Styles des étiquettes, vous trouverez l’option pour mettre à jour la taille et les couleurs de vos étiquettes de formulaire. Les options de taille disponibles incluent Petit, Moyen et Grand.

Sous la section Couleurs, vous trouverez l’option pour mettre à jour les couleurs des étiquettes, sous-étiquettes et messages d’erreur. Vous trouverez ci-dessous une explication des 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.

Dans le panneau Couleurs, vous trouverez 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 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 vous permet de copier les styles d’un formulaire à un 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 toute personnalisation que vous avez ajoutée à votre formulaire, cliquez sur le bouton Réinitialiser les paramètres de style. Cela restaurera 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 boîte CLASSE(S) CSS SUPPLÉMENTAIRE(S). Pour en savoir plus, consultez notre tutoriel sur l’ajout de classes CSS personnalisées.

Après avoir stylisé votre formulaire, assurez-vous de sauvegarder vos modifications en publiant la page ou en l’enregistrant en tant que brouillon.

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 courantes que nous recevons concernant la personnalisation de vos formulaires dans l’éditeur de blocs.

Je ne trouve pas l’option Utiliser la balisage moderne. Comment activer le balisage moderne dans WPForms ?

Les utilisateurs ayant au moins un formulaire sur leur site 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 Utiliser la balisage moderne sur votre page de paramètres. Votre site sera configuré pour utiliser le balisage moderne par défaut.

Si vous souhaitez afficher cette option sur votre page de paramètres, vous devrez ajouter l’extrait de code suivant à votre site.

Comment forcer WPForms à utiliser le balisage moderne ?

Si l'utilisation du champ Carte de crédit obsolète 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 balisage moderne depuis votre page de paramètres WPForms.

Comment puis-je apporter des modifications de style non 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.

Ou, si vous souhaitez styliser vos formulaires avec du CSS, nous vous recommandons d'utiliser WPCode pour ajouter vos styles personnalisés à votre site.

C'est tout ! Vous savez maintenant comment personnaliser l'apparence de vos formulaires WordPress à l'aide de WPForms et de l'éditeur de blocs.

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.