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.

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