CF7, Petit plugin pour une puissance incontournable
Les possibilités
Le plugin contact form 7 n’est pas un générateur de formulaire pour mail. Mais de quoi les créer de toutes pièces facilement en codant un peu. Et si on lui ajoute un plugin de condition, il deviendra une arme redoutable pour vos sites Web. Faut-il encore savoir le maîtriser.
Chez DonF, nous avons déjà réalisé des plugins pour des assurances (santé, automobile, etc), je vous laisse juger la complexité de mise en oeuvre avec toutes les variables à mettre en place.
Il est également capable d’envoyer un mail, un double mail lors de la validation. Le premier pour vous, avec toutes les mentions désirées et un second pour votre prospect/client lui confirmant par exemple la bonne réception du mail et du traitement rapide.
Gérer les champs
En parcourant les sites qui disposent de CF7 (contact form 7), j’admets qu’on y trouve de tout, du bien comme du mal. Cela montre aussi la mauvaise maîtrise du sujet par le dev d’un site. Oui, il ne s’agit pas que de faire des clics clics à la Windows pour que ça marche et dire youpi je suis dev >_ o/. Ce plugin, oblige à mettre les mains dans le cambouis pour un parfait fonctionnement.
Simple et efficace, prenons le contact form de 14x soit la page contact. On y trouvera un simple formulaire de contact avec la gestion de recaptcha, très utile pour lutter contre les bots, donc les spam et la RGPD. Le recaptcha est inclus dans le plugin CF7.
Au niveau des champs c’est très simple et juste la base d’un formulaire Pro soit
- Prénom
- Nom
- Téléphone
- Sujet
- Message
- Check RGPD + Lien des mentions
- Mentions recaptcha + Liens
Rien de bien fou me direz-vous. Je précise que pour la RGPD, le check ne doit pas être coché de base (on ne sait jamais) et qu’un lien vers les mentions légales est plus que nécessaire. Un additif sera nécessaire en supplément pour CF7 si vous souhaitez le bouton Envoyer actif. Vous devez inclure cette mention dans le mail retour pour garder une trace de cette validation (on ne sait jamais).
Concernant, les mentions recaptcha, elles sont aussi obligatoires par Google si il n’y a pas la présence du badge en bas à droite. Si vous souhaitez supprimer le badge il suffit d’appliquer ceci sur le site en CSS
.grecaptcha-badge { visibility: hidden; }C’est même parfaitement détaillé sur le site officiel de CF7, oui ils ont un site avec plein de choses sympa :-)
Revenons à ce qui vous intéresse le code du formulaire ! Qui se trouve ici :
<div id="form-donf-responsive" class="clearfix">
<div class="rang-form-donf">
<div class="demi-donf">[text* first-name placeholder "Prénom"]</div>
<div class="demi-donf">[text* last-name placeholder "Nom"]</div>
<div class="demi-donf">[email* your-email placeholder "Email"]</div>
<div class="demi-donf">[text* telephone placeholder "Téléphone"]</div>
<div class="donf">[text* your-subject placeholder "Sujet"]</div>
<div class="donf">[textarea* your-message placeholder "Message"]</div>
<div class="acceptance-donf">[acceptance your-consent] J’ai lu et accepte <a href="/mentions-legales">la politique de confidentialité</a> de ce site [/acceptance]</div>
<div class="colonne-captcha"><p style="font-size:10px;">Ce site est protégé par reCAPTCHA et Google <a href="https://policies.google.com/privacy">Politique de confidentialité</a> et <a href="https://policies.google.com/terms">Conditions d'utilisation</a>.</p></div>
<div class="donf">[submit "Envoyer"]</div>
</div></div>Oula, c’est pas vraiment le code normal de Contact form 7 ! C’est juste pour une simple raison, oui, on peut appliquer du design via CSS pour appliquer une mise en forme. J’admets que je n’ai pas traduit le nom des champs, il est possible de le faire !
CSS pour le design
Mais pourquoi donc ? La réponse est simple, ajouter la gestion des colonnes et appliquer un responsive. Vous le verrez tout de suite c’est beaucoup plus sympa ! Juste avec ce code dans la page CF7
#form-donf-responsive {
max-width:auto; /*-- à modifier en fonction de la largeur désirée --*/;
margin:0 auto;
width:100%;
}
.rang-form-donf {
width: 100%;
}
.demi-donf, .donf, .acceptance-donf {
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acceptance-donf {
margin-bottom: -20px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Le smartphone sera content ----------------**/
@media only screen and (min-width: 768px) {
.demi-donf {
width: 50%;
}
}
Simple mais sacrément efficace. Avec un peu d’imagination on peut tout faire, mettre en place des colonne à 25% ou 33.33%. il faudra bien-sûr ajouter les class de champs dans le Contact Form 7.
Aller plus loin
Si vous avez bien regarder le code du CF7, vous avez sans doute remarqué qu’il manque 1 class de CSS, pour le captcha. Il est présent ici, uniquement pour appliquer des ajustements de marge ou marge interne.
C’est bien beau d’avoir des colonnes, mais il manque une chose ! le design des input et même du bouton. Ici je vais juste vous donner les codes css utilisés dans la page de 14x.
.wpcf7 input[type="text"]
.wpcf7 input[type="email"]
.wpcf7 input[type="tel"]
.wpcf7 textarea Et le bouton :
.wpcf7 input[type="submit"]C’est à vous maintenant de mettre en place le design qui va bien pour votre site en jouant avec color, font-size, border-radius, etc ! Ici, le code sera propre à chacun.
Pour finir
Chez DonF, nous maîtrisons les formulaires avec beaucoup de complexité, dynamiques, multipages. Nous pouvons donc réaliser pour nos clients des formulaires sur mesure. Il est également possible de faire un peu de design dans le mail retour, la fonction qui cache automatiquement les lignes si le champ n’est pas rempli est un atout à ne pas négliger.
N’hésitez pas à nous contacter par notre formulaire qui n’est pas du contact form 7 ;-), mais ça c’est une autre histoire. J’espère que cette base servira aux p’tits dev clic clic :-)
