06 59 90 16 92
contact [@] romainvincent.com
Besoin d'une formation WordPress ?
Twitter
LinkedIn
logo-romainvincent.com-190x61px
  • Accueil
  • Un Site Internet ?
    • Maintenance WordPress
    • Formation WordPress
  • Dernières Réalisations
  • Actualités WP & Web
  • Contact
06 59 90 16 92
Twitter
LinkedIn
e-mail ?

Comment créer un formulaire responsive en 2 colonnes avec Contact Form 7 ?

9 novembre 2016Design, Tutoriel, WordPress15 commentairesRomain VINCENT

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 :cf7-2-colonnes-responsive

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 :

<div id="formulaire-responsive" class="clearfix">

<div class="rang-form">
<div class="demi-colonne">Votre prénom [text* first-name]</div>
<div class="demi-colonne">Votre nom [text* last-name]</div>
</div>

<div class="rang-form">
<div class="demi-colonne">Email [email* your-email]</div>
<div class="demi-colonne">Téléphone [text* your-phone]</div>
</div>

<div class="rang-form">
<div class="colonne">Sujet [text* your-subject]</div>
</div>

<div class="rang-form">
<div class="colonne">Votre message  [textarea your-message]</div>
</div>

<div class="rang-form">
<div class="colonne">[submit "Envoyer"]</div>
</div>

</div><!--fin de formulaire-responsive-->

Si vous publiez le formulaire de suite, il ressemblera à ça :

formulaire-cf7

Ajoutons les styles CSS

On va donc ajouter les styles pour créer 2 colonnes :

#formulaire-responsive {
	max-width:600px /*-- à modifier en fonction de la largeur désirée --*/;
	margin:0 auto;
        width:100%;
}
.rang-form {
	width: 100%;
}
.demi-colonne, .colonne {
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.demi-colonne {
		width: 50%;
	}
}

Et des styles pour les champs, les labels, le bouton d’envoi et les messages de CF7 :

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	color: #69af36; 
      font-family: 'Noto Sans', sans-serif;
      border-color: #69af36; 
      font-size: 14px; 
  	  line-height: 49px; 
      height: 49px; 
      font-weight: 600; 
      background-color: #ffffff; 
      border-radius: 4px; 
          -moz-border-radius: 4px; 
          -webkit-border-radius: 4px; 
       text-transform: uppercase; 
       border-width: 2px;  
       padding-left: 26px; 
       padding-right: 26px;
}
.wpcf7-submit:hover{
	background: #69af36;
      color: #ffffff;
  }
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

Voici le résultat final :

Sur grand écran
Sur écran mobile

Si vous avez des questions, n’hésitez pas à les poser dans les commentaires.

Article précédent On pourra régler la langue de l’admin de WordPress 4.7 Article suivant WordPress en 2017 : Passage au https & à PHP 7 pour tous

15 commentaires. En écrire un nouveau

PICARD Yann
8 janvier 2017 14 h 35 min

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?

Répondre
Romain VINCENT
9 janvier 2017 12 h 58 min

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”.

Sylvie
5 juillet 2017 18 h 43 min

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.

Répondre
Alain Lennuyeux
27 août 2017 15 h 00 min

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.

Répondre
Romain VINCENT
5 septembre 2017 10 h 29 min

Avec plaisir 🙂

Ben
18 septembre 2017 22 h 04 min

Salut Romain, un grand merci pour ce tuto au poil !

Répondre
Pino
24 septembre 2017 5 h 36 min

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.

Répondre
Aurovrata V.
13 novembre 2017 14 h 24 min

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.

Répondre
Romain VINCENT
13 novembre 2017 15 h 02 min

Super mais quand on peut se passer de plugins 😉

Pierre
20 novembre 2017 2 h 59 min

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

Répondre
Valérie
23 novembre 2017 16 h 24 min

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 😉

Répondre
Seb
11 janvier 2018 13 h 06 min

C’est parfait, ça fait plaisir de trouver des choses aussi carrées !

Répondre
DAUBREGE
24 février 2018 22 h 37 min

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…

Répondre
tuxmika
19 mars 2018 11 h 43 min

Bonjour
peut t’on utiliser Contact Form 7 sur une page HTML simple ( pas de CMS )?

Répondre
Romain VINCENT
19 mars 2018 11 h 46 min

Contact Form 7 est un plugin WordPress donc…. Il vous faut WordPress 🙂

Laisser un commentaire Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

sur Twitter...Follow

Romain VINCENT
Alice_RidiceAlice Orrù@Alice_Ridice·

Twitter francophone, une question pour vous :
Connaissez-vous des entreprises qui ont choisi d'utiliser l'écriture inclusive dans leurs contenus web ou leurs réseaux sociaux ?
Pouvez-vous m'écrire l'URL ? 👇
Merci !

#EcritureInclusive

Reply on Twitter 1382292057985843202Retweet on Twitter 13822920579858432027Like on Twitter 13822920579858432027Twitter 1382292057985843202
wp_rocketWP Rocket ™@wp_rocket·

We’re excited to announce that WP Rocket (part of WP Media) is joining the http://group.ONE family!

Partnering up with one of the leading web hosting providers means that we’ll be able to help more people have a blazing-fast website.

Info 👉https://bit.ly/2POD5vx

Reply on Twitter 1381517449506476034Retweet on Twitter 13815174495064760343Like on Twitter 138151744950647603410Twitter 1381517449506476034
wp_rocketWP Rocket ™@wp_rocket·

It’s #hiring time. 🙌

Looking for a friendly person to join our AMAZING support team. As Technical Support, you’ll be assisting our customers with their technical issues and answering their performance-related questions.

Apply right here 👇
https://bit.ly/2NoJsE7

Reply on Twitter 1381283903982477319Retweet on Twitter 13812839039824773198Like on Twitter 13812839039824773194Twitter 1381283903982477319
wp_rocketWP Rocket ™@wp_rocket·

📣 WP Rocket 3.8.8 is out.

We've stopped preloading fonts when Optimize CSS Delivery is enabled and removed font-face rules in Critical CSS .
This change should result in an overall improvement of the Core Web Vitals score.🎉

More info 👉 https://zcu.io/UkKp

Reply on Twitter 1379461645974577155Retweet on Twitter 13794616459745771552Like on Twitter 13794616459745771558Twitter 1379461645974577155
wp_rocketWP Rocket ™@wp_rocket·

Are you our next...
✔Head of Engineering
✔PHP Developer
✔WordPress Technical Support

We're hiring for these positions!
#hiring #remotejobs

Check out our career page⤵️
https://bit.ly/30ddFHc

Reply on Twitter 1376210472706396165Retweet on Twitter 13762104727063961652Like on Twitter 13762104727063961654Twitter 1376210472706396165

Catégories

  • Culture
  • Design
  • Développement
  • e-commerce
  • Insolite
  • OS
  • Prix
  • Rendez-Vous
  • Sécurité
  • Technologie
  • Tutoriel
  • Typo
  • Update
  • Web
  • Web Design
  • WordCamp
  • WordPress

À Propos de moi

Passionné de Design & de communication Graphique, j'ai créé mes premières affiches avec Photoshop 4.0, il y a près de 20 ans...

Initié à WordPress en 2006 par un des grands spécialistes WordPress Français, je me suis spécialisé depuis sur cette plate-forme formidable. Curieux, dynamique et jovial, je réalise des sites Internet pour les Entreprises, Associations, Start-Up et Collectivités et les conseille sur leur communication graphique.

À votre service, avec plaisir !

O2switch Hébergement web
Laisser un avis ?
logo Romain VINCENT
Romain VINCENT • WebMaster WordPress
Rue des Quatre Vents
61130 Bellême
Normandie

06 59 90 16 92
Lun – Ven / 9h30 – 18h00

Facebook
Twitter
Google+
LinkedIn
Un Site Web ?OrneSartheEure-et-LoirCalvadosMentions légales
2011-2019 Tous droits réservés. romainvincent.com