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 inachevé 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 ?

Lorsque vous ajoutez un formulaire à votre site web WordPress à l'aide d'un plugin, vous remarquerez que sa mise en page est généralement simple et basique.

Par exemple, si vous ajoutez un formulaire d'inscription à votre site web à l'aide d'un plugin de formulaire d'inscription d'utilisateur, vous verrez 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.

Cela dit, nous allons vous montrer comment personnaliser et styliser facilement vos formulaires WordPress, étape par étape. Nous aborderons deux méthodes dans cet article, et vous pouvez utiliser les liens rapides ci-dessous pour accéder à celle que vous souhaitez utiliser :

• Méthode 1 : Comment personnaliser et styliser les formulaires WordPress avec WPForms (méthode sans code)
• Méthode 2 : Comment styliser les formulaires WordPress avec CSS (personnalisation avancée)
• Conseil bonus 🧑‍💻 : Comment créer facilement des pages Web personnalisées

Commençons !

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

Vous pouvez facilement personnaliser et styliser vos formulaires WordPress en utilisant WPForms. C'est le meilleur plugin de formulaire de contact WordPress du marché, utilisé par plus de 6 millions de sites Web.

Nous utilisons nous-mêmes WPForms pour de nombreux types de formulaires, et vous pouvez en savoir plus sur le plugin dans notre avis détaillé sur WPForms.

WPForms est livré avec un constructeur par glisser-déposer qui rend la création de tout type de formulaire extrêmement facile. Il dispose même d'une vaste bibliothèque de plus de 2 000 thèmes préconçus et d'options de personnalisation intégrées pour votre formulaire qui ne nécessitent aucun codage.

Il dispose également d'outils d'IA pour vous aider à créer des formulaires personnalisés à partir de zéro en utilisant une simple invite et à générer plusieurs choix pour des champs tels que déroulant, des boutons radio ou des cases à cocher.

Tout d'abord, vous devez installer et activer le plugin WPForms. Pour des instructions détaillées, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois activé, visitez la page WPForms » Paramètres depuis la barre latérale d'administration de WordPress pour saisir votre clé de licence.

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

Une fois que vous avez fait cela, dirigez-vous vers l'écran WPForms » Ajouter nouveau depuis le tableau de bord WordPress.

Cela vous mènera à la page « Sélectionner un modèle », où vous pourrez commencer par taper un nom pour votre formulaire. Ensuite, vous pourrez choisir n'importe quel modèle de formulaire que vous souhaitez et cliquer sur le bouton « Utiliser le modèle » sous celui-ci.

Pour les besoins de 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.

Après cela, vous devez visiter la page WPForms Paramètres depuis le tableau de bord WordPress et cocher la case « Utiliser le balisage moderne ». Si vous ne le faites pas, les paramètres de personnalisation de WPForms ne seront pas disponibles dans l'éditeur de blocs.

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

Ensuite, ouvrez la page ou l'article où vous souhaitez ajouter le formulaire que vous venez de créer.

À partir de là, vous devez cliquer sur le bouton « Ajouter un bloc » « + » dans le coin supérieur gauche pour ouvrir le menu des blocs et ajouter le bloc WPForms.

Une fois que vous avez fait cela, sélectionnez simplement le formulaire que vous souhaitez ajouter à votre site dans le menu déroulant du bloc lui-même.

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.

Maintenant, vous pouvez 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 proposées par WPForms ou si vous souhaitez appliquer différentes personnalisations avec du CSS, vous pouvez également utiliser un extrait de CSS personnalisé.

Pour ce faire, vous devrez d'abord créer un formulaire à l'aide de WPForms, qui est le constructeur de formulaires n°1 sur le marché.

Il utilise un constructeur par glisser-déposer et est livré avec plus de 2 000 modèles pour vous aider à créer rapidement des formulaires, y compris des formulaires de contact, des formulaires de téléchargement de fichiers, des formulaires d'inscription, des formulaires RSVP, et bien plus encore !

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 créé un formulaire, il est temps de le personnaliser à l'aide de WPCode. C'est le meilleur plugin de snippets de code WordPress du marché, offrant le moyen le plus simple et le plus sûr d'ajouter du code CSS pour styliser votre formulaire WordPress.

Certains de nos sites Web d'entreprise utilisent WPCode pour ajouter et gérer des snippets de code personnalisés, et cela fonctionne exceptionnellement bien. Consultez notre avis complet sur WPCode pour plus de détails sur l'outil.

Tout d'abord, vous devrez installer et activer le plugin WPCode. Pour des instructions détaillées, vous voudrez peut-être consulter notre guide pour débutants sur comment installer un plugin WordPress.

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

Une fois que vous y êtes, cliquez simplement sur le bouton « Utiliser le snippet » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».

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 » :

#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;
}

Une fois que vous avez fait cela, vous devrez remplacer le shortcode par défaut en haut par le shortcode du formulaire que vous souhaitez personnaliser.

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

Ensuite, collez le numéro d'ID du formulaire à côté de la ligne wpforms- dans le code. Désormais, tout le code sera exécuté uniquement dans ce formulaire spécifique.

Ensuite, vous pouvez facilement changer le code hexadécimal de la couleur d'arrière-plan, ajouter une police de caractères de votre choix, et configurer le remplissage et les rayons des bordures 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.

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

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

La stylisation des formulaires WordPress n'est qu'une façon de rendre votre site plus attrayant et visuellement intéressant. Vous pouvez également concevoir vos propres pages de site web entièrement personnalisées en utilisant SeedProd.

C'est le meilleur plugin de constructeur de pages WordPress du marché. Il vous permet de créer des pages attrayantes sans utiliser de code.

Certaines de nos marques partenaires ont construit l'intégralité de leurs sites Web en utilisant SeedProd. C'est un puissant constructeur par glisser-déposer qui va au-delà des simples pages de destination ! Apprenez-en davantage sur cet outil dans notre avis complet sur SeedProd.

SeedProd dispose également de modèles et kits de site préfabriqués, 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.

Nous espérons que cet article vous a aidé à apprendre comment personnaliser et styliser vos formulaires WordPress. Vous voudrez peut-être aussi consulter notre tutoriel sur comment ajouter un champ de code promo aux formulaires WordPress et notre comparaison de WPForms vs. Gravity Forms vs. Formidable Forms.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.