Vous désirez que le formulaire de contact de Contact Form 7 se ferme automatiquement après l’envoi du formulaire? Copiez le code suivant dans un snippet HTML si vous utilisez Elementor ou dans le fichier header.php de votre thème:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
document.querySelectorAll("form.wpcf7-form > :not(.wpcf7-response-output)").forEach(el => {
el.style.display = 'none';
});
}, false );
</script>
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.
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 :
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:
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"]