Personnaliser Contact Form 7 grâce à CSS | Tutoriel
Вставка
- Опубліковано 4 лип 2024
- 🐙 GRATUIT : 6 techniques essentielles pour attirer un trafic ciblé sans dépenser un euro en publicité ⇒ noracheikh.com/formation-grat...
Aujourd’hui, nous allons personnaliser Contact Form 7 grâce à CSS. Par défaut, les formulaires de contact Contact Form 7 sont peu esthétiques, mais il est possible de les adapter à l’image de votre site ou à votre marque en utilisant CSS. Dans cette vidéo, je vais styliser un formulaire pour exemple et vous pourrez ensuite adapter le code pour qu’il réponde à vos besoins.
Pour plus d’informations sur la personnalisation de Contact Form 7 avec CSS et les morceaux de codes utilisés, consultez cet article : noracheikh.com/personnaliser-...
🛠️ Les outils que je mentionne dans ce tutoriel 🛠️
Contact Form 7 : fr.wordpress.org/plugins/cont...
Divi (aff.) : noracheikh.com/divi
WordPress : fr.wordpress.org/
00:00 Introduction
00:41 Formulaire avant et après
00:56 Ajouter du CSS à WordPress
01:48 Personnalisation du formulaire
02:36 Ajouter des classes et id à CF7
03:04 Trouver les classes et id de CF7
06:28 Ajouter des règles CSS
15:06 Conclusion
Les liens marqués “aff." sont des liens affiliés. Si vous réalisez un achat en utilisant mon lien, je recevrai une commission d’affiliation, sans frais supplémentaires pour vous. Seules des entreprises que j’ai utilisées moi-même et que je n'hésite pas à recommander sont listées ici. - Наука та технологія
Vraiment merci beaucoup pour tes vidéos
Parfait continue 👏
Hello ! Merci pour ce tutoriel super bien expliqué ! :) cela m'a beaucoup aidé. Par contre je ne ne sais pas de quelle manière je peux réduire mon champ textarea en CSS ? je crois que l'on peut modifier le "rows" en html mais je ne vois pas comme je peux le faire
Bonjour, c’est possible de donner une hauteur à un champ textarea en définissant la propriété “height” avec CSS et en ajoutant la hauteur désirée en pixels. Donc : textarea { height: 200px; } par exemple :)
@@noracheikh Merci pour ton retour :).
J’avais essayé avec height mais cela ne fonctionne pas vraiment, cela réduit mais de 5mm pas plus ^^, même si je mets 5px
Peut-être qu’il y a une propriété “min-height” qui est définie et que tu dois changer ? Sinon, il se peut que ce soit un “padding” qui empêche de diminuer davantage la hauteur. Il faut aussi vérifier la propriété “display” du champ textarea. Par défaut, elle est définie sur “block” ce qui permet ensuite de spécifier une “height”. Mais si ce n’est pas le cas, il faut modifier “display”. N’hésite pas à revenir ici si rien ne fonctionne :)
Hello, super vidéo ! Dit moi si je fais plusieurs formulaires, comment je peux changer un p:nth-child en particulier sans que ça bouleverse les autres style de formulaire ? Car vise tout la grid alors que id et class ne vise que l'input.
J'ai mis une balise pour pouvoir changer la classe de la balise submit mais rien y fait.
Bonjour, c’est difficile à dire sans voir ton code. Mais pour viser un p:nth-child d’un seul formulaire, tu devrais pouvoir utiliser l’id du formulaire, puis la classe ou l’id de l’élément “p” ou de son élément parent et ensuite l’élément enfant lui-même. Donc, ça pourrait donner quelque chose comme :
#id_formulaire .classe_p p:nth-child(x)
ou
#id_formulaire .classe_parent_p p p:nth-child(x)
Merci pour ce tuto
Comment personnaliser les messages ?
et peux-on faire des différences entre le design des messages d'erreur et le message de validation ok du formulaire ?
Bonjour, les messages peuvent être personnalisés dans l’onglet “Messages” qui se trouve sur la page de modification d’un formulaire.
Pour les messages d’erreur et de validation, ils sont personnalisables au moyen de plusieurs classes, notamment .wpcf7-not-valid-tip (erreur) pour les instructions du type “Ce champ est obligatoire” ou .wpcf7 form.invalid (erreur) pour les cadres de texte “Un ou plusieurs champs contiennent des erreurs…”. Et les classes du message de validation sont .wpcf7 form.sent .wpcf7-response-output.
Il est possible de trouver ces classes avec DevTools en remplissant un formulaire de manière correcte ou incorrecte et en sélectionnant ensuite les éléments correspondants qui apparaissent sur la page.
@@noracheikh Merci beaucoup !
Bonjour
Est-ce que par hasard, il y aurait une solution pour augmenter le volume maximal de Mo qu'il est possible d'envoyer via un formulaire Contact Form 7 ?
Il me semble que la totalité maximum est de 25 Mo.
Merci pour votre aide.
Bonjour, non, a priori cette limite ne peut pas être dépassée parce que c’est la limite de nombreuses messageries email pour la taille des fichiers joints, notamment Gmail. Des fichiers plus lourds pourraient provoquer des blocages dans le système de messagerie.
@@noracheikh Merci pour ces précisions
merci mais la responsivité ne marche pas chez moi. Je ne vois que la partie gauche du formulaire sur telephone
Bonjour, il faudrait vérifier s’il y a un autre élément qui contient le formulaire et qui a une largeur fixe sur mobile.