Comment personnaliser et styliser vos formulaires WordPress (2 méthodes faciles)

Un formulaire WordPress simple et maladroit peut donner l'impression que même le site Web le mieux conçu est incomplet et semble complètement déplacé.

Le pire ? Les visiteurs pourraient hésiter à le remplir s'il ne correspond pas au reste de votre site.

Au cours de notre expérience à gérer un blog WordPress, nous avons appris que des formulaires bien conçus et personnalisés à votre marque peuvent faire une grande différence.

En fait, lorsque nous avons fait correspondre nos formulaires aux couleurs et à la mise en page de notre site, nous avons constaté une augmentation considérable des soumissions de formulaires.

Dans ce guide, nous vous montrerons deux façons simples mais puissantes de personnaliser et de styliser vos formulaires WordPress, afin qu'ils soient non seulement esthétiques, mais aussi plus performants. 🚀

Pourquoi personnaliser et styliser vos formulaires WordPress ?

La personnalisation de vos formulaires WordPress les aide à correspondre à votre marque, ce qui renforce la confiance et peut augmenter considérablement vos taux de conversion de formulaires. En stylisant vos formulaires, vous les rendez plus attrayants visuellement et plus faciles à naviguer pour vos visiteurs.

Par exemple, si vous ajoutez un formulaire d'inscription à votre site Web à l'aide d'un plugin de formulaire d'inscription utilisateur, vous constaterez que sa mise en page est un peu ennuyeuse. Cela peut ne pas capter l'attention de vos visiteurs et même les décourager de remplir le formulaire.

La personnalisation de vos formulaires peut les rendre plus attrayants en les faisant correspondre à votre thème WordPress et à votre image de marque.

Cela peut entraîner plus de conversions car les formulaires WordPress stylisés sont plus faciles à naviguer et peuvent encourager plus d'utilisateurs à les remplir.

Les formulaires stylisés peuvent également accroître la notoriété de votre marque auprès des utilisateurs. Par exemple, vous pouvez utiliser le logo de votre site Web et les couleurs signature de votre entreprise pour rendre votre formulaire plus mémorable et efficace.

Maintenant, nous allons vous montrer comment personnaliser et styliser facilement vos formulaires WordPress, étape par étape.

Nous couvrirons deux méthodes dans cet article, et vous pouvez utiliser les liens rapides ci-dessous pour accéder à celle que vous souhaitez utiliser :

Commençons !

Méthode 1 : Comment personnaliser et styliser les formulaires WordPress avec WPForms (méthode sans code)

WPForms est le meilleur plugin de formulaire de contact WordPress avec un constructeur par glisser-déposer. Il offre plus de 2 000 thèmes prédéfinis et des options de personnalisation intégrées pour styliser les formulaires sans code, ainsi que des outils d'IA pour la création de formulaires.

Nous utilisons WPForms sur WPBeginner pour les formulaires de contact, les migrations de sites Web et notre enquête annuelle. Pour en savoir plus sur notre expérience, consultez notre avis complet sur WPForms.

Étape 1. Installer et activer le plugin WPForms

Tout d'abord, inscrivons-nous à un compte WPForms.

Sur leur site Web, cliquez sur le bouton « Obtenir WPForms maintenant », choisissez un plan et suivez les instructions à l'écran pour terminer l'enregistrement.

Maintenant, vous devez installer et activer le plugin WPForms.

Dans votre zone d'administration WordPress, allez dans Plugins » Ajouter un plugin.

Sur l'écran suivant, vous pouvez utiliser la barre de recherche pour trouver rapidement le plugin WPForms.

Cliquez sur « Installer maintenant » puis sur « Activer » pour l'activer sur votre site WordPress.

Pour des instructions détaillées, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Si vous utilisez la version Pro, visitez la page WPForms » Paramètres dans la barre latérale d'administration de WordPress pour saisir votre clé de licence lors de l'activation.

Vous pouvez trouver ces informations dans votre compte sur le site Web de WPForms.

Ensuite, allez dans WPForms » Paramètres dans votre tableau de bord d'administration et vérifiez que la case « Utiliser le balisage moderne » est cochée.

Vous devez activer le balisage moderne pour débloquer les paramètres de conception avancés et les options de personnalisation dans l'éditeur de blocs WordPress.

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos réglages.

Étape 2. Créez votre formulaire WordPress

À partir de là, dirigez-vous vers l'écran WPForms » Ajouter un nouveau depuis le tableau de bord d'administration WordPress pour créer votre formulaire.

Cela vous mènera à la page « Configuration », où vous pourrez commencer par taper un nom pour votre formulaire.

Après cela, vous pouvez choisir n'importe quel modèle de formulaire que vous souhaitez, le survoler et cliquer sur le bouton « Utiliser le modèle » en dessous. Pour ce tutoriel, nous allons créer et ajouter un simple formulaire de contact à notre site Web.

Cela lancera le modèle dans le constructeur de formulaires WPForms, où vous verrez un aperçu du formulaire à droite et les champs du formulaire dans la colonne de gauche.

À partir de là, vous pouvez faire glisser et déposer n'importe quel champ de formulaire de votre choix dans le formulaire selon vos préférences. Vous pouvez également réorganiser ou supprimer des champs.

Pour des instructions détaillées, consultez notre tutoriel sur comment créer un formulaire de contact dans WordPress.

Une fois que vous avez terminé avec votre formulaire, cliquez simplement sur le bouton « Enregistrer » en haut pour quitter le constructeur de formulaires.

Étape 3. Personnalisez la conception de votre formulaire avec les thèmes WPForms

Vous êtes maintenant prêt à ajouter votre formulaire à l'éditeur de blocs et à le personnaliser. Cliquez sur le bouton « Intégrer » dans le constructeur de formulaires.

Cela ouvrira l'assistant d'intégration, où vous pourrez choisir l'une des options suivantes :

• Sélectionner une page existante – Choisissez une page de votre site WordPress et ajoutez le formulaire à l'aide du bloc WPForms.
• Créer une nouvelle page – Cela ajoute automatiquement le formulaire à une nouvelle page.

Pour ce guide, nous choisirons « Créer une nouvelle page ».

Ensuite, ajoutons un nom pour la nouvelle page, par exemple, « Contactez-nous ».

Cliquez sur « Allons-y ! » lorsque vous avez terminé.

Cela ouvrira l'éditeur de page avec votre formulaire déjà intégré.

Pour plus de détails, consultez notre guide sur comment intégrer des formulaires dans WordPress.

Maintenant que vous avez ajouté le formulaire, il est temps de le personnaliser et de le styliser.

Pour ce faire, vous devez ouvrir le panneau de blocs sur le côté droit de l'écran et faire défiler jusqu'à la section « Thèmes ».

À partir de là, vous pouvez choisir parmi une bibliothèque de plus de 40 thèmes prédéfinis pour donner instantanément à votre formulaire un aspect magnifique.

Ensuite, vous pouvez faire défiler jusqu'à la section « Styles des champs » pour personnaliser davantage votre formulaire.

Vous pouvez sélectionner la taille de vos champs de formulaire dans le menu déroulant et même définir la taille et le rayon de leur bordure.

Ensuite, vous pouvez changer la couleur d'arrière-plan, de texte et de bordure des champs de formulaire à l'aide de l'outil de sélection de couleur.

Ici, vous pouvez utiliser les couleurs signature de votre marque ou d'autres couleurs utilisées sur le reste de votre blog WordPress pour créer un formulaire visuellement attrayant.

Une fois que vous avez terminé, faites défiler jusqu'à la section « Styles des étiquettes », où vous pouvez sélectionner la taille de la police des étiquettes dans le menu déroulant.

Après cela, vous pouvez également changer la couleur de la police des étiquettes de champ, des sous-étiquettes et des messages d'erreur qui seront affichés dans votre formulaire.

Pour personnaliser le bouton de votre formulaire, faites défiler jusqu'à la section « Styles des boutons » et sélectionnez sa taille dans le menu déroulant.

Vous pouvez également définir un rayon de bordure et changer la couleur d'arrière-plan et de texte du bouton de soumission du formulaire.

Une fois que vous avez terminé la personnalisation du formulaire, cliquez simplement sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos paramètres.

Vous pouvez maintenant visiter votre site WordPress pour voir le formulaire stylisé en action.

Méthode 2 : Comment styliser les formulaires WordPress avec CSS (personnalisation avancée)

Si vous ne souhaitez pas utiliser les options de personnalisation offertes par WPForms ou si vous souhaitez appliquer des personnalisations différentes avec du CSS, vous pouvez également utiliser un extrait de CSS personnalisé.

Étape 1. Créez votre formulaire à l'aide de WPForms

Pour commencer, vous devrez créer un formulaire à l'aide de WPForms. C'est le meilleur plugin de formulaire de contact WordPress avec un constructeur par glisser-déposer, offrant plus de 2 000 modèles pour vous aider à créer rapidement des formulaires de contact, des formulaires de téléchargement de fichiers, des formulaires d'inscription et des formulaires RSVP.

Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur comment créer un formulaire de contact dans WordPress ou consulter la méthode 1.

Une fois que vous avez fait cela, récupérons l'ID de votre formulaire – vous en aurez besoin pour votre extrait de code personnalisé.

Pour ce faire, visitez la page WPForms » Tous les formulaires dans le tableau de bord WordPress et copiez le numéro d'ID WPForms du formulaire que vous souhaitez styliser.

Étape 2. Installer et activer WPCode

WPCode est le plugin de snippets de code WordPress le plus sûr et le plus simple pour ajouter du CSS personnalisé afin de styliser les formulaires. Il dispose d'une validation de code intelligente pour éviter les erreurs et offre une bibliothèque de snippets prêts à l'emploi pour la personnalisation de WordPress.

Nous utilisons WPCode sur WPBeginner pour ajouter et gérer des snippets de code personnalisés sur nos sites Web professionnels. Pour en savoir plus sur notre expérience, consultez notre avis complet sur WPCode.

Tout d'abord, vous pouvez créer un compte WPCode. Sur le site Web de WPCode, cliquez sur le bouton « Obtenir WPCode maintenant », sélectionnez un plan et suivez les instructions à l'écran pour vous inscrire.

Maintenant, installons et activons le plugin WPCode.

Dans votre tableau de bord d'administration WordPress, allez dans Plugins » Ajouter un plugin.

Ensuite, vous pouvez utiliser la barre de recherche pour trouver rapidement le plugin WPCode.

Lorsque vous le voyez, cliquez sur le bouton ‘Installer maintenant’ puis sur ‘Activer’.

Pour des instructions détaillées, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Étape 3. Ajoutez un extrait de code personnalisé pour personnaliser les formulaires WordPress

Après l'activation, visitez la page Snippets de code » + Ajouter un snippet depuis le tableau de bord WordPress.

Ensuite, survolez l'option ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur le bouton ‘Utiliser l'extrait’.

Vous verrez alors une fenêtre contextuelle vous demandant de sélectionner votre type de code.

Choisissons ‘Extrait CSS’.

Cela vous mènera à la page « Créer un snippet personnalisé », où vous pourrez commencer par taper un nom pour votre snippet de code.

Après cela, sélectionnez l'option « Snippet CSS » dans le menu déroulant dans le coin droit de l'écran.

Ensuite, copiez et collez le code suivant dans la boîte ‘Aperçu du code’. Les balises !important indiquent au navigateur de donner la priorité à ces styles par rapport aux paramètres par défaut de votre thème :

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Voici à quoi cela peut ressembler sur votre écran :

Ensuite, vous pouvez modifier le code hexadécimal, comme #ADD8E6, pour qu'il corresponde à la couleur spécifique de votre marque. Vous pouvez trouver ces codes en utilisant n'importe quel outil gratuit de sélection de couleur en ligne.

Vous pouvez également ajouter une famille de polices de caractères de votre choix et configurer le remplissage (espace à l'intérieur de la boîte) et le rayon des bords (coins arrondis) du formulaire en modifiant l'extrait de code.

Une fois que vous avez fait cela, faites défiler jusqu'à la section « Insertion » et sélectionnez le mode « Insertion automatique ».

Le code sera automatiquement exécuté sur votre site lors de l'activation.

Enfin, faites défiler jusqu'en haut de la page et basculez l'interrupteur sur « Actif ».

Ensuite, cliquez sur le bouton « Enregistrer le snippet » pour stocker vos paramètres.

Désormais, le formulaire WordPress sera automatiquement personnalisé selon le snippet CSS, et vous pourrez aller le visualiser.

Cependant, si vous n'avez pas encore ajouté le formulaire à votre site Web, ouvrez simplement une page ou un article dans l'éditeur de blocs.

Une fois que vous y êtes, cliquez sur le bouton « + » dans le coin supérieur gauche pour ouvrir le menu des blocs et ajouter le bloc WPForms.

Ensuite, sélectionnez le formulaire que vous avez stylisé à l'aide du snippet CSS dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.

Maintenant, vous pouvez visiter votre site WordPress dans une fenêtre de navigation privée pour voir le formulaire personnalisé en action, car la mise en cache du navigateur peut parfois masquer les modifications récentes.

Conseil bonus 🧑‍💻 : Comment créer facilement des pages Web personnalisées

Vous pouvez styliser vos formulaires WordPress pour rendre votre site plus attrayant et visuellement intéressant. Il est également possible de concevoir vos propres pages Web entièrement personnalisées à l'aide de SeedProd. C'est le meilleur plugin de création de pages WordPress par glisser-déposer pour créer des pages Web et des thèmes sans code.

Nous avons testé en profondeur SeedProd pour voir comment il se compare aux autres solutions. Pour en savoir plus sur notre expérience, consultez notre avis complet sur SeedProd.

SeedProd dispose également de modèles et kits de site préconçus, d'options de personnalisation faciles, de palettes de couleurs et de blocs de page avancés. De plus, vous pouvez facilement intégrer vos formulaires WPForms dans l'éditeur SeedProd.

Pour plus de détails, vous pouvez consulter notre tutoriel sur comment créer une page de destination dans WordPress.

FAQ sur la personnalisation et la stylisation des formulaires WordPress

Vous avez encore des questions ? Voici quelques-unes des questions les plus fréquemment posées par nos lecteurs – avec leurs réponses.

Que puis-je personnaliser dans un formulaire WordPress ?

Vous pouvez personnaliser les champs, la mise en page, les couleurs, les polices, les étiquettes, les messages d'erreur et le bouton de soumission pour qu'ils correspondent au design de votre site.

Ai-je besoin de compétences en codage pour styliser les formulaires WordPress ?

Non. Avec d'excellents plugins comme WPForms, vous pouvez personnaliser et styliser les formulaires à l'aide des paramètres intégrés, sans code requis.

Puis-je faire en sorte que mes formulaires correspondent à la marque de mon site Web ?

Oui. Vous pouvez utiliser les couleurs de votre marque, les polices et l'espacement afin que le formulaire s'intègre naturellement à votre thème WordPress.

La personnalisation et la stylisation d'un formulaire affecteront-elles son fonctionnement ?

Les changements visuels n'affecteront pas la fonctionnalité. Assurez-vous simplement de tester le formulaire si vous modifiez les champs requis ou les règles.

Puis-je changer le style du formulaire plus tard ?

Absolument. Vous pouvez mettre à jour le design à tout moment sans reconstruire le formulaire à partir de zéro.

Plus de guides sur l'utilisation des formulaires dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment personnaliser et styliser vos formulaires WordPress.

Vous voudrez peut-être aussi consulter nos tutoriels sur :

• Comment téléverser des fichiers depuis les formulaires WordPress vers Google Drive
• Comment permettre aux utilisateurs de prendre des photos et des vidéos en direct dans les formulaires WordPress
• Conseils pour rendre vos formulaires WordPress plus interactifs
• Comment automatiser les formulaires WordPress avec n8n pour économiser des heures de travail manuel
• Meilleures alternatives à Google Forms (meilleures fonctionnalités + gratuit)

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.