Stylisez Contact Form 7 hyper facilement avec ce plugin !

avatar de baptiste pagès
Par Baptiste Pagès le 6 novembre 2021

Publié dans Tutoriel

Mis à jour le 18 novembre 2021

Contact Form 7 est une extension WordPress très pratique, seulement voilà...

Elle est moche.

Mais moche !

Si vous laissez votre formulaire CF7 tel quel et que votre thème n'a rien prévu pour le styliser, vous donnerez à votre site un aspect amateur qui massacrera votre taux de conversion.

Heureusement, j'ai une solution pour vous ! Si vous ne voulez pas engager quelqu'un pour écrire du CSS et que vous ne savez pas le faire vous-même, je vous présente aujourd'hui un plugin qui stylisera Contact avec la norme Material Design.

Le nom de ce plugin : Material Design for Contact Form 7.

Prêt à changer le style de Contact Form 7 ? C'est parti.

Note : si votre site ne génère aucune demande de contact, il y a de forte chance que ce ne soit pas à cause du style de votre formulaire, mais plutôt à cause d'un problème de visibilité. Commandez votre audit SEO WordPress dès maintenant pour que j'analyse la situation.

Cette astuce est tirée de cette vidéo sur ma chaîne Youtube, passez vous abonner pour plus d'astuces WordPress 🙂

Étape 1 - Installer du plugin

Pour commencer, il suffit d'installer et d'activer l'extension Le nom de ce plugin : Material Design for Contact Form 7. Pour ça, rendez-vous dans votre administration WordPress, puis dans le panneau des extensions. Cliquez sur Ajouter, puis recherchez Material Design for Contact Form 7.

Enfin, installez et activez l'extension. Elle devrait alors apparaître dans la liste de vos extension active comme ci-dessous.

installation du plugin Material Design for Contact Form 7

Étape 2 - Englober le formulaire dans les nouveaux shortcodes

Le plugin permet d'insérer de nouveaux shortcodes dans vos formulaires Contact Form 7. Ils englobent les champs par défaut de CF7 afin d'y ajouter du style.

Éditez le formulaire que vous voulez styliser, et cliquez sur le bouton "Material". Choisissez ensuite Formulaire pour commencer. Tout le code de votre formulaire devra aller entre les deux balises obtenues.

configuration du plugin Material Design for Contact Form 7
Injection des balises de formulaire

Entre les balises de formulaires que vous venez de générer, insérez maintenant des balises correspondants aux champs de votre formulaire. Par exemple, le premier champ de mon formulaire est un texte, donc j'insère une balise Material de texte.

J'insère un texte entre les balises md-form

Vous obtenez la structure qu'il faut pour styliser votre champ de texte. Il ne reste plus qu'à ajouter le champ Contact Form 7 au milieu comme ci-dessous.

Procédez ainsi pour tous les champs de votre formulaire.

Dans mon exemple, voici ce le formulaire sans Material :

Et le voici avec Material :

Étape 3 - Tester et profiter du résultat !

Pour tester le résultat, il vous suffit d'inclure le formulaire dans une page, comme avec n'importe quel formulaire CF7. Voici ce que ça donne dans mon exemple :

nouveau style contact form 7

Merci d'avoir lu, à bientôt

Vous savez maintenant ajouter du style à votre formulaire Contact Form 7. Si cet article vous a été utile, n'hésitez pas à le partager. À bientôt !

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
2Panier (2)