Dans ce tutoriel nous allons voir comment créer non seulement un formulaire de contact à deux colonnes avec le célèbre Contact Form 7 qui deviendra un formulaire à 1 seule colonne sur un mobile, autrement dit un formulaire de contact responsive.
Le résultat final ressemblera à ça :
Le balisage HTML du formulaire dans CF7
Nous allons tout d’abord mettre en place les balises HTML du formulaire nouvellement ajouter via le panel d’administration de l’extension Contact Form 7. On va envelopper ce formulaire dans une balise <div>
avec comme id="formulaire-responsive"
comme ceci :
Si vous publiez le formulaire de suite, il ressemblera à ça :
Ajoutons les styles CSS
On va donc ajouter les styles pour créer 2 colonnes :
Et des styles pour les champs, les labels, le bouton d’envoi et les messages de CF7 :
Voici le résultat final :
Si vous avez des questions, n’hésitez pas à les poser dans les commentaires.
15 commentaires. En écrire un nouveau
Bonjour, je suis intéressé par ce tuto mais rien ne fonctionne quand j’essaye de modifier le CSS.
Où dois je modifier le CSS svp?
Bonjour Yann,
Depuis WordPress 4.7, tu peux ajouter du CSS personnalisé dans Apparence > Personnaliser > CSS additionnel. Sinon les thèmes ont en général une option “Custom CSS”.
Bonjour Yann,
Super parfait ça fonctionne à merveille!! Depuis le temps que je bataillais pour améliorer Contact Form 7
Un grand merci pour ton tuto que je vais pouvoir mettre en pratique sur mon blog.
Merci pour ce tuto qui m’a permis de solutionner mon problème de mise en page de Contact Form 7 sur DIVI 3.0. (colonnes, couleur, etc …).
Tout fonctionne à merveille !
Encore merci.
Avec plaisir 🙂
Salut Romain, un grand merci pour ce tuto au poil !
Bonjour et merci pour ce Tuto…. Simplement genial. Personnellement j’ aurais meme aimè l’enfermer dans un fond gris-legè pour le rendre plus interessant visuellement… Peut etre une idee de tuto nouveau… Merci a vous.
Il y a maintenant un plugin qui permet de faire des formulaires responsives. le Smart Grid-Layout design for CF7 forms (https://wordpress.org/plugins/cf7-grid-layout/) permet de construire des formulaires de maniere tabulaire et modulaire en reutilisant des formulaire existants.
Super mais quand on peut se passer de plugins 😉
Un très grand merci Romain, depuis que j’utilise ce plugin, je n’avais pas réussi à récupérer un code aussi propre et complet !
Pierre
Parfait merci beaucoup.
Par contre je n’ai pas réussi à le faire fonctionner à partir du moment où j’insère une box de cases à cocher, mais pas grave 😉
C’est parfait, ça fait plaisir de trouver des choses aussi carrées !
bonjour,
parfait parfait !!!!! merci beaucoup. J’aimerai bien écrire mes coordonnées à droite de ce formulaire, et éventuellement une photo. Comment faire, sachant que je l’ai intégré via le widget text html sur une static page? Merci beaucoup pour vos lumières…
Bonjour
peut t’on utiliser Contact Form 7 sur une page HTML simple ( pas de CMS )?
Contact Form 7 est un plugin WordPress donc…. Il vous faut WordPress 🙂