Comment styliser les formulaires de contact dans WordPress (sans CSS !)

Lorsque les propriétaires de petites entreprises se lancent dans la création de leurs propres formulaires WordPress, les résultats sont souvent fades et peu inspirants. C'est un schéma que j'ai constamment observé au fil des ans.

Sans l'expertise des développeurs et des designers, ces formulaires peuvent fonctionner suffisamment bien mais manquent de l'attrait visuel qui peut engager les utilisateurs et générer des conversions.

La bonne nouvelle est que vous n'avez plus besoin de connaissances en codage ou d'expertise en design pour créer de beaux formulaires. Il vous suffit du bon plugin.

Dans cet article, je vais vous montrer la manière sans code de styliser vos formulaires de contact pour faire une forte première impression sur vos visiteurs.

Créez votre formulaire WordPress personnalisé maintenant 🎨

Comment styliser les formulaires de contact dans WordPress

Maintenant que vous savez que notre outil de style est le meilleur et le plus simple pour WPForms, décomposons-le étape par étape.

1. Installer et activer WPForms

Tout d'abord, vous voudrez installer le plugin WPForms si vous ne l'avez pas déjà.

La personnalisation des formulaires est disponible avec toutes les versions de WPForms, y compris WPForms Lite (le meilleur constructeur de formulaires gratuit).

Besoin d'aide pour cette étape ? Consultez ce guide pour débutants sur comment installer un plugin WordPress.

Maintenant, assurons-nous que vous êtes prêt avec les versions dont vous avez besoin :

• Version de WordPress : 6.0 ou supérieure.
• WPForms 1.9.7.

2. Ouvrez votre formulaire dans le constructeur

Il est maintenant temps de créer votre formulaire ! Pour commencer, placez votre curseur sur WPForms dans la barre latérale de votre menu d'administration WordPress et cliquez sur Ajouter.

Ensuite, il est temps de commencer à configurer votre formulaire, en commençant par le nom du formulaire et la sélection du modèle. Il existe des centaines de modèles de formulaires pour le marketing et diverses autres fonctions que vous pouvez utiliser. Vous pouvez également créer votre formulaire entièrement à partir de zéro si vous le souhaitez.

Le formulaire de contact simple est l'un de nos modèles les plus populaires. Il convient également assez bien à ce tutoriel, nous allons donc le sélectionner en cliquant sur le bouton Utiliser le modèle.

Une fois que vous avez fait votre sélection, vous pouvez créer ou personnaliser votre formulaire à l'aide du constructeur glisser-déposer convivial de WPForms.

Besoin d'un peu d'aide ? Pas de problème. Nous avons un document pour vous apprendre comment créer votre premier formulaire.

3. Choisissez votre thème

Vous êtes maintenant prêt à styliser le thème de votre formulaire directement dans le constructeur de formulaires.

Allez dans Paramètres >> Thèmes pour accéder aux contrôles de style.

Le panneau de gauche affiche toutes les options de style. Le panneau de droite affiche un aperçu en direct à l'aide de champs d'exemple.

C'est ici que vous choisirez le thème.

Les thèmes sont votre raccourci vers un formulaire d'aspect attrayant. Ils définissent des couleurs et des styles coordonnés pour les champs, les étiquettes, les boutons, le conteneur et l'arrière-plan, le tout en un seul clic.

Et ils sont accessibles à tous les utilisateurs ! Pour ceux qui ont WPForms Lite, les thèmes « Classique » et « Moderne (Défaut) » sont disponibles.

Les utilisateurs disposant d'une licence WPForms ont accès à la bibliothèque complète de thèmes, y compris 15 thèmes variés.

Lush est mon préféré !

J'ai examiné tous les thèmes moi-même et j'ai créé cet aperçu descriptif pour chacun d'eux :

Nom du thème	Apparence	Couleur d'accentuation	Couleur d'arrière-plan	Notes
Moderne (Défaut)	Épuré, contemporain	Bleu	Aucun	Défaut pour tous les nouveaux formulaires
Classique	Minimaliste	Gris	Aucun	Très peu de CSS, idéal pour un look de base
Océan	Similaire à Moderne	Bleu sarcelle foncé	Aucun	Idéal pour les marques aux tons froids
Mandarine	Chaleureux, énergique	Orange	Aucun	Se démarque sur les sites neutres
Aero	Léger et aéré	Bleu	Gris clair avec ombre portée	Léger effet « carte »
Béton	Industriel	Rose	Texture de béton	Nécessite le téléchargement d'images d'arrière-plan
Élégance	Raffiné	Correspond à l'image	Image décorative	Coins arrondis sur le conteneur
Frais	Inspiré de la nature	Vert	Image feuillue	Idéal pour les marques éco/bio
Morosité	Mode sombre	Vert	Arrière-plan sombre	Éléments de formulaire à contraste élevé
Couloir	Dramatique	Sombre	Image	Conteneur audacieux et immersif
Luxuriant	Texturé	Noir	Image de mur de briques	Coins arrondis et ombre portée
Monstera	Ludique	Vert	Image aquarelle	Coins arrondis
Gamme	Vibrant	Vert	Image de coucher de soleil	Bordures et ombres de boîte
Printemps	Dégradé doux	Bleu	Image de dégradé	Ombre de boîte pour la profondeur
Vintage	Rétro	Jaune	Couleur unie	Ambiance chaleureuse et nostalgique

Consultez notre document complet qui couvre plusieurs de ces thèmes en détail.

4. Personnalisez les styles des champs

Une fois que vous avez choisi un thème, accédez à Styles de champ pour ajuster :

• Taille : Petite, Moyenne, Grande
• Bordure : Unie, Tirets, Points
• Taille et rayon de la bordure : Contrôlez l'épaisseur et l'arrondi des coins
• Couleurs : Définissez l'arrière-plan, la bordure et le texte. Utilisez la palette de thèmes, le code HEX ou le sélecteur de couleurs

Ces touches supplémentaires contribuent vraiment à l'effet et à l'ambiance que vous recherchez pour chaque formulaire. Par exemple, les coins arrondis donnent une impression de convivialité, tandis que les bords carrés donnent une impression de formalité.

Vous y trouverez également des options pour mettre à jour les couleurs d'Arrière-plan, de Bordure et de Texte de vos champs de formulaire.

Cliquez sur l'étiquette pour ouvrir le sélecteur de couleurs et apporter des modifications. Vous pouvez choisir une couleur visuellement ou entrer un code hexadécimal spécifique pour un contrôle précis.

5. Personnalisez les styles des étiquettes

Les étiquettes sont les courts textes au-dessus de vos champs de formulaire qui indiquent aux utilisateurs ce qu'il faut saisir : des éléments comme Nom, Adresse e-mail ou Message. Bien faites, elles rendent votre formulaire facile à suivre, aidant les utilisateurs à éviter la confusion et les erreurs.

Dans Styles d'étiquette, vous pouvez modifier :

Taille : Texte petit, moyen ou grand. Par exemple, vous pourriez vouloir de petites étiquettes pour un formulaire d'inscription minimaliste, mais de grandes étiquettes en gras pour un formulaire de candidature où la clarté est primordiale.

Couleurs :

• Texte de l'étiquette : Le titre principal au-dessus de chaque champ.
• Sous-étiquettes et indices : Instructions utiles, comme « Prénom uniquement » ou « Nous ne partagerons jamais votre e-mail ».
• Messages d'erreur : Texte qui apparaît lorsque l'utilisateur fait une erreur, comme « Ce champ est requis ». Cette couleur contrôle également l'astérisque sur les champs requis

Par exemple, si votre site a un arrière-plan sombre, vous pourriez définir le texte de l'étiquette en blanc, les sous-étiquettes en gris clair et les messages d'erreur en rouge vif pour qu'ils ressortent immédiatement en cas de problème.

6. Personnalisez les styles des boutons

Votre bouton d'envoi est le dernier « appel à l'action » de votre formulaire. Il doit suffisamment ressortir pour que les visiteurs n'aient pas à le chercher.

Dans Styles de bouton, vous pouvez ajuster :

• Taille : Petite, Moyenne ou Grande. Les grands boutons fonctionnent bien sur mobile, tandis que les moyens peuvent mieux convenir aux mises en page de bureau.
• Style de bordure : Pleine, Tirets ou Points — bien que la plupart des designs modernes s'en tiennent à Pleine ou Aucune pour un aspect plus épuré.
• Taille et rayon de la bordure : Des bordures plus épaisses et des coins plus vifs donnent une impression plus formelle ; des bordures plus fines et des coins arrondis donnent une impression plus conviviale et décontractée.
• Couleurs d’arrière-plan et de texte : Celles-ci définissent l’apparence principale de votre bouton.

💡 Astuce : La couleur d’arrière-plan ici devient également la couleur d’accent pour le reste de votre formulaire, y compris les états de mise au point des champs, les barres de progression et même les cases à cocher. Donc, si vous rendez votre bouton bleu sarcelle, attendez-vous à ce que ce bleu sarcelle apparaisse subtilement dans tout votre formulaire pour un look coordonné.

7. Personnalisez les styles des conteneurs

Le conteneur est comme le « cadre » autour de votre formulaire. Il sépare visuellement le formulaire du reste de la page et peut contribuer à lui donner une impression plus intentionnelle.

Dans Styles du conteneur, vous pouvez modifier :

• Rembourrage : Espace à l’intérieur du conteneur autour de vos champs de formulaire. Plus de rembourrage donne une sensation épurée et spacieuse ; moins de rembourrage crée un aspect compact et peu encombrant.
• Style, taille et rayon de la bordure : Adaptez cela au ton visuel de votre site — coins carrés et bordures pleines pour un look d’entreprise, coins arrondis et bordures subtiles pour une sensation plus douce.
• Ombre : Ajouter une ombre portée petite ou moyenne peut donner l’impression que votre formulaire est « soulevé » de la page. Idéal pour le faire ressortir sur des arrière-plans plats.
• Couleur de la bordure : Souvent négligée, mais une bordure colorée peut lier votre formulaire à la palette de votre marque.

Pour un site de portfolio photographique, par exemple, vous pourriez utiliser un conteneur avec un rembourrage généreux, une fine bordure blanche et une ombre portée douce pour créer un élégant effet « carte ».

8. Personnalisez les styles d'arrière-plan

L’arrière-plan est l’endroit où vous pouvez faire preuve de créativité, mais aussi où il est facile d’en faire trop. Un bon arrière-plan complète le formulaire sans le rendre difficile à lire. Alors résistez à la tentation !

Les options ici incluent :

• Source de l’image : Téléchargez depuis votre Bibliothèque de médias ou parcourez les Photos de stock intégrées de WPForms (la première fois que vous utilisez des photos de stock, vous téléchargerez la bibliothèque entière).
• Position : Contrôlez où l’image est placée — Haut Centre, Centre Centre, Bas Droite, etc.
• Répétition : Choisissez Aucune répétition pour une image unique, Mosaïque pour répéter sur tout l’arrière-plan, ou des répétitions horizontales/verticales pour les motifs.
• Taille : Couvrir fait que l’image remplit la zone du conteneur. Dimensions vous permet de définir une largeur et une hauteur exactes.
• Couleur d’arrière-plan unie : Une excellente option si vous voulez quelque chose de simple ou si votre image ne se charge pas.

💡 Évitez les arrière-plans chargés qui rendent le texte difficile à lire. Si vous aimez une image chargée, atténuez-la avec une superposition de couleur avant de la télécharger.

10. Enregistrez, prévisualisez et testez

Une fois que vous avez apporté vos modifications, il ne vous reste plus qu’à enregistrer votre formulaire. Cliquez sur Enregistrer dans le constructeur de formulaire.

Or, use Aperçu (en haut à droite) pour voir vos styles appliqués à une mise en page d’exemple. Ensuite, allez sur votre page dans l’éditeur WordPress et prévisualisez le formulaire réel avec de vrais champs.

N’oubliez pas que vous pouvez également Tester :

• Remplissez chaque champ pour vérifier l’espacement et l’alignement.
• Déclenchez un message d’erreur pour voir si vos couleurs sont claires.
• Visualisez le formulaire sur mobile, tablette et ordinateur pour confirmer qu’il est responsive.

Et voilà ! Vous pouvez maintenant commencer à styliser vos formulaires de contact (ou tout autre formulaire) que vous avez dans WordPress, directement dans le constructeur de formulaires.

Bon stylisme !

Stylisation des formulaires de contact – FAQ

Voici quelques questions courantes sur la stylisation des formulaires de contact dans WordPress sans code :

Mes styles s’appliqueront-ils partout ?

Oui. Lorsque vous stylisez un formulaire dans le constructeur WPForms, ces paramètres sont enregistrés avec le formulaire lui-même, pas seulement avec la page sur laquelle vous travaillez.

Cela signifie que si vous intégrez le même formulaire sur plusieurs pages ou articles, il sera cohérent partout par défaut. La seule exception est si vous remplacez intentionnellement le style dans l’éditeur de blocs ou Elementor lors de l’intégration. Ces modifications ne s’appliquent qu’à cette page spécifique.

Puis-je styliser un modèle de formulaire ?

Absolument. Les modèles dans WPForms – comme « Formulaire de contact simple » ou « Inscription à la newsletter » – ne sont que des ensembles de champs pré-construits. Dès que vous intégrez un formulaire basé sur un modèle, vous pouvez choisir un thème et ajuster son style exactement de la même manière que vous le feriez pour un formulaire personnalisé.

Puis-je supprimer un thème personnalisé ?

Oui, mais faites-le prudemment. Lorsque vous supprimez un thème personnalisé du panneau Thèmes dans le constructeur, il est supprimé définitivement.

Ensuite, connectez vos formulaires WordPress à ChatGPT

Curieux de savoir comment automatiser votre flux de travail en matière de formulaires ? Découvrez comment connecter ChatGPT à vos formulaires WordPress et rationalisez les réponses avec l’IA.

Vous cherchez un moyen de rendre vos formulaires plus attrayants ? Consultez nos conseils pour créer des formulaires interactifs qui captent l’attention des utilisateurs.

Créez votre formulaire 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é, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.