Vous avez installé et configuré WPForms sur votre site WordPress, mais vous souhaitez maintenant personnaliser l’apparence de vos formulaires pour qu’ils s’intègrent parfaitement au design de votre site. Que ce soit pour harmoniser les couleurs, ajuster les polices ou adapter la mise en page, il est important que vos formulaires reflètent l’identité visuelle de votre site web.
Dans ce tutoriel, nous allons vous guider à travers les différentes étapes pour modifier l’apparence des formulaires WPForms sans avoir à coder, tout en vous montrant également comment aller plus loin avec du CSS si nécessaire. L’objectif est de vous fournir toutes les clés pour rendre vos formulaires professionnels et élégants.
Avant de commencer à personnaliser le design de votre formulaire
Avant de pouvoir personnaliser l’apparence de vos formulaires WPForms, deux étapes sont nécessaires :
Activer l’option « Utiliser le balisage moderne » dans les réglages du plugin. Cela vous permettra d’utiliser une structure HTML plus moderne, offrant plus de flexibilité pour les personnalisations.
Intégrer votre formulaire dans une page via l’éditeur WordPress afin de commencer la personnalisation directement sur votre site.
Activer l'option "Utiliser le balisage moderne"
- Accéder aux réglages de WPForms :
- Dans votre tableau de bord WordPress, allez dans WPForms > Réglages.
- Activer le balisage moderne :
- Dans les options de réglage, cherchez l’option « Utiliser le balisage moderne » et activez-la.
- Enregistrez les modifications.
Intégrer votre formulaire dans une page
Vous devez maintenant intégrer votre formulaire dans l’une de vos pages ou articles afin d’accéder aux options de personnalisation et de modifier le design de votre formulaire.
- Dans l’éditeur de blocs, commencez par ajouter un nouveau bloc pour insérer WPForms, en Cliquant sur l’icône plus (+) en haut à gauche.
- Un menu apparaîtra avec différentes options de blocs.
- Pour trouver le bloc WPForms, vous pouvez soit le rechercher en tapant « WPForms », soit le trouver dans la catégorie Widgets.
- Une fois trouvé, cliquez sur le bloc WPForms pour l’ajouter à votre page.
- Dans le menu déroulant Sélectionner un formulaire, choisissez le formulaire que vous souhaitez afficher.
- Dès que vous sélectionnez un formulaire, celui-ci apparaîtra directement dans le bloc WPForms.
Personnalisation des styles du formulaire via l'éditeur WPForms
Maintenant que votre formulaire est intégré dans une page ou un article, cliquez dessus pour faire apparaître l’éditeur intégré de WPForms dans le panneau de droite. Cet éditeur propose des options simples mais efficaces pour personnaliser l’apparence de vos formulaires sans nécessiter de code. Vous pourrez ajuster les couleurs, les polices et les tailles des champs afin qu’ils s’harmonisent parfaitement avec le design global de votre site.
Modifier les couleurs
Une fois dans l’éditeur, vous pouvez ajuster les couleurs des champs de texte, des étiquettes et des boutons d’action comme « Envoyer ». Assurez-vous de choisir des couleurs qui s’accordent avec la palette de votre site pour garantir une cohérence visuelle.
Personaliser les tailles et rayons de bordures
Une fois dans l’éditeur, vous pouvez ajuster les couleurs des champs de texte, des étiquettes et des boutons d’action comme « Envoyer ». Assurez-vous de choisir des couleurs qui s’accordent avec la palette de votre site pour garantir une cohérence visuelle.
Utiliser Elementor pour personnaliser un formulaire WPForms
Elementor est un constructeur de pages très flexible qui vous permet de personnaliser facilement un formulaire WPForms. Voici comment utiliser Elementor pour adapter votre formulaire WPForms au design de votre site WordPress.
Étape 1 : Ajouter un formulaire WPForms à une page via Elementor
- Page / article :
- Créez une nouvelle page / article, ou allez sur la page / article où vous souhaitez placer votre formulaire, puis cliquez sur Modifier avec Elementor.
- Ajouter le bloc WPForms :
- Dans la colonne de gauche d’Elementor, recherchez le widget WPForms. Vous pouvez taper « WPForms » dans la barre de recherche ou le trouver dans la section Widgets.
- Sélectionner le formulaire :
Une fois le widget WPForms ajouté à la page, utilisez le menu déroulant dans l’éditeur Elementor pour choisir le formulaire que vous souhaitez afficher.
- Prévisualiser :
Le formulaire sélectionné apparaîtra immédiatement sur votre page, vous permettant de voir à quoi il ressemble avant de le modifier.
Étape 2 : Personnaliser l’apparence du formulaire WPForms
Une fois le formulaire WPForms ajouté à votre page, Elementor vous permet de personnaliser son apparence grâce à diverses options visuelles.
Personnalisation des couleurs et polices :
- Sélectionnez le formulaire WPForms dans l’éditeur.
- Allez dans l’onglet Style à gauche.
- Modifiez les couleurs des champs, des étiquettes, et des boutons pour qu’elles s’accordent avec le design de votre site.
- Vous pouvez également personnaliser les polices et la taille du texte pour qu’elles soient cohérentes avec le reste de la page.
- Ou encore, ajoutez vos propres règles CSS.
Enfin, dans l’onglet Avancé du widget, vous trouverez toutes les options habituelles d’Elementor, qui vous permettront, entre autres :
- D’ajuster la mise en page en modifiant l’espacement autour de votre formulaire.
- Changer les bordures. (couleurs, épaisseur, radius).
- La possibilité de masquer le formulaire sur certaines tailles d’écrans (ordinateur, tablette, smartphone).
- Changer l’arrière-plan.
- Etc.
Conclusion
WPForms offre une multitude d’options de personnalisation qui permettent d’adapter facilement l’apparence des formulaires au design de votre site WordPress, sans nécessiter de compétences avancées en programmation. Grâce à son interface intuitive, vous pouvez ajuster les couleurs, les polices, la mise en page, et même ajouter du CSS personnalisé pour un contrôle total sur l’apparence.
De plus, WPForms s’intègre parfaitement avec Elementor, le célèbre constructeur de pages, grâce à son widget dédié. Ce widget vous permet d’ajouter et de personnaliser aisément vos formulaires WPForms directement dans l’éditeur visuel d’Elementor, sans avoir à écrire une seule ligne de code. Cette compatibilité rend la création de formulaires non seulement plus flexible, mais aussi plus intuitive, tout en assurant une cohérence parfaite avec le design global de votre site.
