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

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 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 :

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;
}

Et voici le résultat final:

Une image pour envoyer un formulaire Contact Form 7

Vous avez installé le plugin Contact Form 7 pour la gestion de formulaires? Et vous souhaitez remplacer le bouton de soumission par défaut par votre propre image? Cette portion de code est pour vous…

 

1. Ajoutez le code suivant dans le fichier style.css de votre thème:

.submit-button { background: url('mon_image.gif') top left no-repeat transparent; border: none; padding: 0px; margin: 0px; text-indent: -50000px; width: 274px; height: 50px; }

Les variables à changer sont les suivantes: url, width & height.

 

2. Spécifiez la nouvelle classe du bouton Envoyer en éditant votre formulaire. Il ressemblera à ceci:

[submit class:submit-button "Envoyer le message"]