Comment styliser WPForms à l'aide de l'éditeur de blocs

Cherchez-vous à styliser WPForms à l'aide de l'éditeur de blocs pour des formulaires attrayants et faciles à utiliser sur votre site WordPress ?

WPForms est un plugin intuitif qui simplifie la création et la gestion de formulaires tout en offrant des options de personnalisation étendues. En utilisant l'éditeur de blocs, vous pouvez styliser vos formulaires sans effort pour améliorer votre expérience utilisateur.

Suivez ce tutoriel étape par étape pour maîtriser le style de WPForms à l'aide de l'éditeur de blocs et améliorer la fonctionnalité globale de votre site.

Créez votre formulaire WordPress maintenant

Pourquoi devez-vous styliser vos formulaires ?

En stylisant vos formulaires, vous pouvez améliorer l'esthétique de votre site Web, en veillant à ce qu'il contribue à une expérience utilisateur positive. Voici quelques autres raisons clés pour lesquelles le style des formulaires est crucial pour votre site Web :

• Image de marque cohérente : Créer un formulaire de marque pour qu'il corresponde à la conception et au schéma de couleurs de votre site Web garantit une image de marque cohérente.
• Meilleure expérience utilisateur : Des formulaires bien conçus permettent aux utilisateurs de naviguer/soumettre facilement les informations requises, ce qui entraîne des taux de complétion de formulaire plus élevés.
• Conception réactive : Un formulaire bien stylisé s'adapte sans effort à différentes tailles d'écran et appareils, garantissant une expérience utilisateur fluide pour tous les visiteurs.
• Conversions accrues : Un formulaire visuellement attrayant peut capter l'attention d'un utilisateur et le motiver à accomplir l'action souhaitée, qu'il s'agisse de s'inscrire à une newsletter, d'effectuer un achat ou de soumettre une requête.
• Accessibilité améliorée : Styliser vos formulaires avec des étiquettes claires, un espacement adéquat et des couleurs contrastées peut améliorer l'accessibilité pour les utilisateurs malvoyants, garantissant que votre site Web s'adresse à un public plus large.

Maintenant que vous comprenez l'importance de styliser vos WPForms, il est temps de plonger dans le processus étape par étape pour styliser efficacement vos formulaires à l'aide de l'éditeur de blocs et tirer le meilleur parti du plugin WPForms.

Comment styliser WPForms à l'aide de l'éditeur de blocs

Suivez ces étapes pour apprendre à styliser vos WPForms à l'aide de l'éditeur de blocs Gutenberg sans avoir besoin d'écrire de CSS personnalisé.

Étape 1 : Installer et activer WPForms

WPForms simplifie le processus de création et de gestion de formulaires sur votre site Web. Le plugin crée sans effort divers formulaires, y compris des formulaires de contact, des sondages, des quiz et des formulaires d'inscription, sans connaissances en codage, et il vous offre plus de 2 100 modèles prêts à l'emploi pour commencer.

Ce que j'aime le plus dans la personnalisation de WPForms, c'est que chaque contrôle se trouve dans la barre latérale des blocs, juste à côté du formulaire que vous éditez. Modifiez le rayon d'un bord ou la couleur d'un bouton et le formulaire se met à jour sous vos yeux, vous évitant ainsi une boucle de sauvegarde, actualisation et vérification.

Vous n'avez pas non plus besoin d'une licence payante pour tout cela. La personnalisation des formulaires et la bibliothèque complète de plus de 40 thèmes sont disponibles dans WPForms Lite, la version gratuite, donc chaque étape de ce guide fonctionne de la même manière, que vous utilisiez Lite ou Pro.

Pour commencer avec WPForms, vous devez installer le plugin sur votre site WordPress. Une fois activé, suivez les étapes simples ci-dessous pour créer et personnaliser le style de votre formulaire.

Obtenir WPForms Gratuitement Maintenant

Étape 2 : Créer un formulaire ou utiliser un modèle

Commençons à créer votre formulaire ! Depuis votre tableau de bord WordPress, naviguez vers WPForms et cliquez sur le bouton Ajouter un nouveau.

Lorsque vous y êtes invité, donnez un nom à votre formulaire qui reflète son objectif. Ensuite, vous avez la possibilité de choisir un modèle prédéfini ou de Créer un formulaire vierge.

Ensuite, WPForms ouvrira son interface intuitive de création de formulaires, où vous pourrez personnaliser votre formulaire en ajoutant, modifiant, supprimant ou repositionnant n'importe quel champ de formulaire.

Après avoir configuré les champs du formulaire, vous devrez configurer les Notifications par e-mail pour être alerté lorsque quelqu'un remplit le formulaire et clique sur le bouton d'envoi.

Vous pouvez également configurer le Message de confirmation que les utilisateurs voient une fois le formulaire soumis pour améliorer l'expérience utilisateur.

Avant de passer à l'étape suivante, enregistrez les paramètres de votre formulaire pour éviter de perdre votre progression. Cliquez sur le bouton Enregistrer situé en haut de l'écran.

Étape 3 : Activer le balisage moderne

Pour améliorer l'accessibilité et permettre la personnalisation visuelle des formulaires dans l'éditeur de blocs, WPForms propose le balisage moderne.

Pour activer le balisage moderne dans WPForms, allez dans WPForms » Paramètres et sélectionnez l'onglet Général.

Faites défiler jusqu'à la section Général, où deux paramètres fonctionnent ensemble pour activer la personnalisation de l'éditeur de blocs. Commencez par le paramètre Inclure la personnalisation du formulaire et réglez-le sur Style de base et thème du formulaire.

C'est l'option qui charge le CSS dont dépendent vos contrôles de personnalisation, et lorsqu'elle est réglée sur une valeur plus restrictive, vos modifications n'apparaîtront pas dans l'éditeur de blocs ou ne seront pas transmises au front-end.

Ensuite, activez l'option Utiliser le balisage moderne. Avec cette option activée, vous êtes prêt à personnaliser votre formulaire via l'éditeur de blocs. Enregistrez vos modifications avant de quitter la page.

WPForms version 1.8.1 et ultérieures activent le balisage moderne par défaut pour les nouveaux utilisateurs, et l'option de le désactiver n'est pas disponible.

Donc, si vous utilisez la dernière version du plugin et que vous ne voyez pas ce paramètre, vous êtes déjà prêt et pouvez commencer à styliser vos formulaires.

Commencez à personnaliser vos formulaires dans l'éditeur de blocs pour profiter des fonctionnalités du balisage moderne, mais d'abord, intégrons le formulaire sur votre site !

Étape 4 : Intégrer le formulaire sur votre site

Pour intégrer le formulaire que vous avez créé précédemment, ouvrez une page existante ou créez-en une nouvelle. Recherchez le bouton Ajouter un bloc et recherchez le bloc WPForms.

Après avoir inséré le bloc WPForms dans votre page ou article, sélectionnez le formulaire souhaité dans le menu déroulant. Nous pouvons maintenant commencer à styliser votre formulaire avec l'éditeur de blocs !

Étape 5 : Modifier les styles à partir de l'éditeur de blocs

Ouvrez la page ou l'article qui contient votre WPForms dans l'éditeur de blocs. Cliquez sur le bloc WPForms pour ouvrir les options supplémentaires.

Vous découvrirez une variété d'options pour personnaliser les thèmes, les champs de formulaire, les étiquettes, les boutons, ainsi que le conteneur et l'arrière-plan de votre formulaire, le tout pour correspondre à l'esthétique de votre marque.

La section Avancé vous permet également de copier les paramètres de style entre les formulaires, ce qui permet de gagner du temps lorsque plusieurs formulaires nécessitent le même traitement.

Découvrez comment utiliser ces différentes options de style ci-dessous pour personnaliser l'apparence de votre formulaire et correspondre au design de votre site Web en un rien de temps :

Thèmes

Le panneau Thèmes est le moyen le plus rapide de restyler un formulaire. WPForms est livré avec plus de 40 thèmes de formulaire pré-faits, et l'application d'un thème ne prend qu'un seul clic.

Chaque thème apporte son propre mélange de couleurs, de bordures, d'arrière-plan et de style de bouton, donc choisir un thème recolore vos champs, étiquettes, boutons, conteneur et arrière-plan ensemble.

Si vous préférez parcourir avant de vous engager sur un thème, vous pouvez voir tous les thèmes côte à côte d'abord. Une fois que vous appliquez un thème, puis modifiez un paramètre individuel, WPForms enregistre votre version comme un nouveau thème personnalisé et l'ajoute à votre liste de thèmes.

Utilisez le champ Nom du thème pour renommer un thème personnalisé afin de pouvoir le distinguer plus tard. Pour vous débarrasser d'un thème dont vous n'avez plus besoin, cliquez sur le texte Supprimer le thème à côté du nom du thème.

Styles de champ

Ouvrez les options Styles des champs dans les paramètres du bloc WPForms. Vous y trouverez les contrôles pour la Taille, la Bordure, l’Épaisseur de la bordure, le Rayon de la bordure et les Couleurs.

Taille

Pour ajuster la taille de vos champs de formulaire, sélectionnez la taille souhaitée dans le paramètre Taille. Les tailles disponibles incluent Petit, Moyen et Grand.

Rayon de bordure

Pour ajuster la bordure de vos champs de formulaire, utilisez le paramètre Rayon de bordure pour définir la valeur de rayon souhaitée. Vos formulaires peuvent maintenant avoir des bords arrondis grâce à cela.

Par défaut, l'unité de mesure pour la taille des éléments de formulaire dans WPForms est définie en pixels (px). Cliquez sur l'Unité de mesure pour afficher un menu déroulant avec différentes options, telles que :

• Pixels (PX)
• Pourcentage (%)
• Carré Em (EM)
• Roentgen équivalent homme (REM)
• Largeur de fenêtre d'affichage (VW)
• Hauteur de fenêtre d'affichage (VH)

Couleurs

Pour ajuster la couleur d'arrière-plan, de bordure et de texte de vos champs de formulaire, ouvrez le paramètre Couleurs dans les paramètres du bloc WPForms.

Cliquez sur l'option de couleur spécifique que vous souhaitez mettre à jour, telle que la couleur d'arrière-plan. Une superposition apparaîtra, montrant les couleurs de thème disponibles parmi lesquelles choisir.

Ensuite, cliquez sur l'échantillon de couleur pour ouvrir le Sélecteur de couleurs, où vous pourrez affiner davantage la couleur.

Un code couleur hexadécimal peut être collé dans la boîte Hex si vous avez déjà une couleur de marque en tête pour vos formulaires.

Styles d'étiquette

Vous pouvez maintenant modifier la taille et la couleur de la police de vos étiquettes de formulaire ici dans la section Styles d'étiquette. Les tailles disponibles vont de Petit à Grand.

Pour mettre à jour les couleurs des étiquettes, sous-étiquettes et messages d'erreur, accédez à la section Couleurs. Voici une description des options de couleur d'étiquette disponibles.

• Étiquette : Ce paramètre détermine la couleur de l'étiquette principale de votre champ.
• Sous-étiquette et Indice : Ce paramètre détermine la teinte utilisée pour les sous-étiquettes et les indices de champ lorsque WPForms suggère des valeurs dans le frontend.
• Message d'erreur :  La couleur du texte qui apparaît si un utilisateur fait une erreur en remplissant votre formulaire.

Styles de bouton

Pour modifier la conception de vos boutons de formulaire dans WPForms, accédez à Styles de bouton. Cliquez sur le menu déroulant sous Taille pour l'ouvrir et sélectionnez la taille du bouton.

Si vous souhaitez donner un rayon de bordure au bouton, il vous suffit de saisir la valeur souhaitée dans le champ intitulé Rayon de bordure.

Ensuite, sous la section intitulée Couleurs, vous trouverez la possibilité de modifier la couleur d'arrière-plan et la couleur du texte de votre bouton.

Dans la plupart des cas, la couleur d'arrière-plan du bouton servira également de couleur d'accentuation. Par conséquent, la couleur d'arrière-plan du bouton sera également utilisée comme couleur principale pour les cases à cocher, les boutons radio, les barres de progression et les champs.

Styles du conteneur

Les Styles du conteneur régissent la boîte dans laquelle se trouve votre formulaire, plutôt que les champs qu'elle contient. C'est ici que vous donnez à un formulaire un peu d'espace, un bord défini ou un léger décollement de la page derrière lui.

• Rembourrage : Définit l'espace à l'intérieur des bordures du conteneur, entre le bord de la boîte et le contenu de votre formulaire. Augmentez-le lorsque les champs semblent trop serrés contre les bords.
• Style de bordure : Dessine le contour du conteneur avec un bord Continu, Tirets ou Pointillés.
• Épaisseur de la bordure : Détermine l'épaisseur de ce contour. Les pixels sont également l'unité par défaut ici, et les mêmes options d'unité s'appliquent.
• Rayon de la bordure : Arrondit les coins du conteneur. Des valeurs plus élevées donnent une forme de carte plus douce, tandis que des valeurs plus basses gardent les bords nets.
• Ombre : Ajoute de la profondeur derrière le conteneur, avec des tailles allant de aucune à grande. Une petite ombre suffit généralement à détacher un formulaire d'un arrière-plan uni.
• Couleurs : Définit la couleur de la bordure du conteneur afin que son bord s'intègre confortablement au reste de votre conception.

Styles d'arrière-plan

Les Styles d'arrière-plan vous donnent le contrôle sur ce qui se trouve derrière votre formulaire, qu'il s'agisse d'une couleur unie ou d'une image complète. Pour commencer avec une image, ouvrez le menu déroulant Image et choisissez d'où elle doit provenir.

Médiathèque ouvre vos propres téléchargements, alors choisissez-la lorsque l'image existe déjà sur votre site ou que vous souhaitez en télécharger une nouvelle. Photos de stock ouvre une bibliothèque d'images professionnelles à la place.

La première fois que vous choisissez Photos de stock, WPForms affiche une superposition vous demandant de télécharger la bibliothèque d'images de stock. Cliquez sur Continuer sur cette notification et les photos deviennent disponibles pour la navigation.

Une fois votre sélection effectuée, cliquez sur Choisir l'image pour sélectionner le fichier réel. Avec une image en place, quatre autres paramètres apparaissent dans le panneau :

• Position : Aligne l'image à l'intérieur du formulaire à l'aide d'options telles que Haut Centre et Bas Centre, vous permettant ainsi de contrôler quelle partie de la photo s'affiche.
• Répétition : Décide comment l'image se répète. Aucune répétition l'affiche une fois, Répéter la répète sur tout l'arrière-plan, et Répéter horizontalement et Répéter verticalement la répètent le long d'un seul axe.
• Taille : Contrôle comment l'image s'ajuste. Couvrir la redimensionne pour remplir l'arrière-plan quelle que soit la taille du formulaire, et Dimensions vous permet d'entrer une largeur et une hauteur exactes.
• Couleurs : Définit une couleur d'arrière-plan unie, ce qui s'affiche lorsqu'aucune image n'est utilisée.

Style avancé

Sous les paramètres Avancé, vous pouvez accéder au code CSS qui inclut tous les styles personnalisés que vous avez appliqués à votre formulaire.

Si vous souhaitez simplement déplacer ces styles vers un autre formulaire, recherchez l'option permettant de copier et coller les paramètres de style.

Si vous souhaitez annuler les modifications apportées à votre formulaire, cliquez sur le bouton Réinitialiser les paramètres de style. Cela rétablira le style par défaut de votre formulaire, annulant toute personnalisation précédente.

Le champ Classe(s) CSS supplémentaire(s) est l'endroit où vous pouvez librement saisir toutes les autres classes CSS que vous avez développées. Lisez notre guide sur comment implémenter de nouvelles classes CSS pour en savoir plus.

Étape 6 : Tester et publier le formulaire

Il est maintenant temps d'enregistrer vos modifications en publiant la page ou en l'enregistrant comme brouillon. Enfin, effectuez un test rapide pour vous assurer que votre formulaire s'affiche et fonctionne comme vous le souhaitez.

Une fois la page enregistrée, cliquez sur Aperçu pour voir le formulaire réel avec vos styles appliqués. L'éditeur de blocs vous rapproche, mais l'aperçu montre ce que vos visiteurs verront réellement.

FAQ sur le style de WPForms dans l'éditeur de blocs

Voici les réponses aux questions les plus fréquentes concernant la mise en forme des formulaires WPForms, le balisage moderne et les thèmes de formulaires.

Pourquoi ne vois-je aucune option de style pour mon bloc WPForms ?

Deux paramètres contrôlent cela, et les deux se trouvent sous WPForms » Paramètres » Général. Inclure le style du formulaire doit être défini sur Style de base et thème du formulaire, et Utiliser le balisage moderne doit être activé.

Si vous avez installé WPForms à la version 1.8.1 ou ultérieure, le balisage moderne est déjà activé et la case à cocher n'apparaîtra pas du tout, alors vérifiez d'abord le paramètre de style.

Le seul véritable blocage est le champ Carte de crédit obsolète, qui n'est pas compatible avec le balisage moderne, de sorte qu'un formulaire l'utilisant encore ne peut pas être stylisé dans l'éditeur de blocs tant que ce champ n'est pas remplacé.

Ai-je besoin de WPForms Pro pour styliser mes formulaires ?

Non. Le style des formulaires et les plus de 40 thèmes de formulaires fonctionnent sur WPForms Lite, la version gratuite, donc chaque étape de ce guide s'exécute sur une installation gratuite.

Pro ajoute des fonctionnalités telles que les modules de paiement, les enquêtes et la logique conditionnelle sur les paiements, bien qu'aucune de ces fonctionnalités ne soit nécessaire pour modifier l'apparence de vos formulaires.

Mon formulaire conservera-t-il ses styles si je l'intègre sur une autre page ?

Les styles appliqués dans le constructeur WPForms sous Paramètres » Thèmes sont enregistrés avec le formulaire et le suivent partout, couvrant les intégrations de shortcodes, le bloc WPForms et le module Divi. Les styles appliqués dans l'éditeur de blocs restent uniquement sur cette intégration.

Vous pouvez donc styliser un formulaire une fois dans le constructeur pour un look cohérent sur votre site, puis remplacer les couleurs sur une seule page de destination sans toucher à l'original.

Puis-je styliser WPForms sans l'éditeur de blocs ?

Oui. Le constructeur WPForms a les mêmes panneaux sous Paramètres » Thèmes, et tout ce que vous y définissez s'applique à l'ensemble du site.

Elementor a ses propres contrôles de style, vous pouvez donc personnaliser vos formulaires dans Elementor à la place, et ces modifications restent sur cette page.

Divi fonctionne différemment, car son module WPForms n'expose que les paramètres de taille et d'espacement propres à Divi, alors stylisez le formulaire dans le constructeur et l'intégration Divi le récupère.

Comment puis-je apporter des modifications de style que l'éditeur de blocs n'offre pas ?

Ajoutez vos propres classes dans la boîte Classe(s) CSS supplémentaire(s) sous le panneau Avancé, puis écrivez le CSS pour les faire correspondre.

Le guide CSS personnalisé lié dans la section Styles avancés ci-dessus couvre les classes que WPForms applique déjà, ce que vous voudrez cibler.

Ensuite, créez des formulaires interactifs qui stimulent l'engagement

Vous cherchez d'autres moyens de personnaliser vos WPForms ? Consultez ces conseils pour faire passer vos formulaires au niveau supérieur. Que vous cherchiez à améliorer l'apparence ou la fonctionnalité de votre formulaire, nous avons ce qu'il vous faut.

Stylez vos formulaires 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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.