Contact Form 7 - gratuit, performant, extensible…

Contact Form 7 est l'une des plus basiques, des plus anciennes, des plus utilisées des extensions pour les formulaires dans WordPress. Mais aussi une des plus puissantes.

Cet article prend 10 minutes à lire et comporte 2261 mots.

Par défaut, WordPress ne gère pas les formu­laires, si ce n’est pour les commen­taires. Mais rassurez-vous, vous trou­ve­rez dans le dépôt WordPress des dizaines d’ex­ten­sions pour pallier ce manque. Dont WPForms, Ninja Forms et… Contact Form 7. C’est d’ailleurs le plus popu­laire, au vu de ses plus de 10 millions d’ins­tal­la­tions actives.

Et pour­tant, contrai­re­ment à certains de ses concur­rents, il n’offre pas de construc­teur dédié, et dans sa version de base, il est on ne peut plus rustique. Alors pour­quoi cet engouement ?

Plusieurs raisons permettent d’ex­pli­quer le succès de cette extension : 

  • Tout d’abord, sa simpli­cité. Ce côté rustique avec une inter­face spar­tiate rassure. Mais ne vous mépre­nez pas ! Rustique, simple, mais puissant.
  • Contact Form 7 est égale­ment flexible, grâce aux hooks WordPress. Les filtres et actions dispo­nibles dans Contact Form 7 auto­risent une grande souplesse dans le trai­te­ment des formu­laires. Pour un déve­lop­peur, c’est le nec plus ultra, c’est l’as­su­rance de pouvoir faire ce que l’on veut comme l’on veut.
  • Enfin, vous trou­ve­rez des addons à Contact Form 7 dans le dépôt WordPress, pour redi­ri­ger après envoi, pour créer un formu­laire séquen­tiel, pour gérer des types de champs supplé­men­taires, pour struc­tu­rer via un système de grille…

Lors du déve­lop­pe­ment (récent) d’un CRM basé sur WordPress, j’ai été emmené à user des hooks et des addons de Contact Form 7, et le moins que je puisse dire, c’est qu’au­cun de ses concur­rents ne m’au­raient permis de faire ne serait-ce que le dixième de ce que j’ai fait en l’uti­li­sant. Et ce n’est pas faute d’avoir tenté. Seul concur­rent sérieux, a priori : Gravity Forms – mais il est payant. Ce qui dans certains cas ne posera pas vrai­ment problème, certains des addons de Contact Form 7 l’étant aussi. Tout est ques­tion de besoin – et de portefeuille.

Ce que je vous propose, c’est de faire un tour rapide d’ho­ri­zon de Contact Form 7, de ses hooks et de ses addons.

Nous allons pour commen­cer par la…

Prise en main de Contact Form 7

Si vous êtes un habi­tué de WordPress, vous savez comment instal­ler une exten­sion. Sinon, je vous propose de lire mon billet Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress.

Une fois Contact Form 7 installé et activé, vous pouvez l’uti­li­ser, il n’y a pas de réglages parti­cu­liers. Tout se gère formu­laire par formu­laire : les champs du formu­laire, le contenu du message envoyé, les textes des messages de noti­fi­ca­tion, et les réglages addi­tion­nels (nous revien­drons plus tard dessus).

Création d’un formulaire

Rien de plus simple, cliquez sur ajou­ter et vous aurez un formu­laire basique, de type formu­laire de contact. L’interface mini­ma­liste du premier onglet contient le code HTML ainsi que les short­codes pour l’in­ser­tion des champs et boutons :

<label> Votre nom
    [text* your-name autocomplete:name] </label>

<label> Votre e-mail
    [email* your-email autocomplete:email] </label>

<label> Objet
    [text* your-subject] </label>

<label> Votre message (facultatif)
    [textarea your-message] </label>

[submit "Envoyer"]

Dans l’exemple ci-dessus, nous trou­vons des short­codes corres­pon­dant aux champs HTML5 input de type email, text, à la zone de texte (textarea) et au bouton de soumis­sion. Vous avez égale­ment le champ caché, la liste dérou­lante, la case à cocher, le bouton radio, les champs de type télé­phone, date, url, nombre, confir­ma­tion (pour accep­ter les condi­tions géné­rales par exemple) pour ne citer que l’essentiel.

C’est basique, brut de décof­frage, le bali­sage n’est pas un modèle du genre, mais tout y est et le formu­laire est prêt à être inséré dans une page ou un article.

Arrêtons nous sur la construc­tion des tags : [text* your-name autocomplete:name] avec la struc­ture [type de champ (l'étoile indique que le champ est obligatoire) - nom du champ - critères complémentaires].

Les critères complé­men­taires corres­pondent pour certains aux attri­buts de la balise HTML input : class:myclass donnera class="myclass", id:myid donnera id="myid".

Vous trou­ve­rez le détail de la struc­ture des champs sur le site de Contact Form 7 à la page How tags works.

En aparté, la docu­men­ta­tion (en anglais) est plutôt complète mais ne couvre que l’uti­li­sa­tion « clas­sique » de l’ex­ten­sion. C’est sur le web qu’il faudra cher­cher tuto­riels et howtos, en parti­cu­lier pour les hooks et événe­ments person­na­li­sés. L’inconvénient, c’est que si l’on ne sait pas exac­te­ment ce que l’on cherche, ou si notre recherche porte sur une option peu utili­sée, on peut y perdre un certain temps, pour ne pas dire un temps certain.

Les réglages de base

Le second onglet permet de gérer l’en­voi d’un email à un desti­na­taire prédé­fini. Tout est prévu pour un cour­riel bien formatté : desti­na­taire, expé­di­teur, objet, en-têtes addi­tion­nels pour répondre à l’ex­pé­di­teur réel du message, envoi au format texte (par défaut) ou HTML, possi­bi­lité de joindre des fichiers, envoi d’une réponse automatique…

Contact Form 7 - gratuit, performant, extensible…
Réglages de l’email dans Contact Form 7

Les messages (notifications)

Le troi­sième onglet, Messages, permet de person­na­li­ser chaque noti­fi­ca­tion. Quand le message de l’expéditeur a bien été envoyé, par exemple, le texte par défaut est Merci pour votre message. Il a été envoyé. Mais vous pouvez le rempla­cer par le texte de votre choix, comme Merci pour ce message, je vous répon­drai dès que possible par exemple.

Des noti­fi­ca­tions sont prévues pour vous infor­mer des événe­ments impac­tants dans la saisie du formu­laire : l’en­voi du message (ou l’échec de l’opé­ra­tion), une saisie mal format­tée ou manquante, l’obli­ga­tion d’ac­cep­ter les condi­tions avant soumis­sion… c’est au total 22 messages que vous pouvez person­na­li­ser pour chaque formu­laire créé.

Les réglages additionnels

Le quatrième onglet , Réglages addi­tion­nels, permet de modi­fier le compor­te­ment par défaut de Contact Form 7 : demo_mode: on pour mettre le formu­laire en mode démo (le cour­riel ne sera pas envoyé, mais vous aurez la noti­fi­ca­tion de succès), skip_mail: on pour passer l’en­voi du courriel.

Voilà pour les basiques. C’est déjà bien, vous pouvez main­te­nant insé­rer votre formu­laire via le bloc Gutenberg dédié :

Bloc Gutenberg pour Contact Form 7
Bloc Gutenberg pour Contact Form 7

En ❶, vous avez l’icone du bloc tel qu’il appa­rait dans la liste des blocs Gutenberg. En ❷, la liste de choix du formu­laire à afficher.

Voici ce que vous obtiendrez :

Formulaire Contact Form 7 - sur écran d'ordinateur
Formulaire Contact Form 7 – sur écran d’ordinateur

À noter que par défaut, le bali­sage étant en HTML5, les formu­laires sont responsives.

Les hooks (filtres et actions)

Nous avons vu le fonc­tion­ne­ment en utili­sant l’in­ter­face de base de l’ex­ten­sion, mais on peut égale­ment utili­ser les hooks pour aller plus loin avec Contact Form 7. L’un des plus utili­sés est wpcf7_before_send_mail que l’on appel­lera via add_filter ( 'wpcf7_before_send_mail', 'myfunctions_formsActions', 10, 3 ); par exemple. Et dans la fonc­tion PHP myfunctions_formsActions vous mettrez le code pour trai­ter les données reçues avant de repar­tir dans la boucle des actions par défaut. Ce hook porte bien son nom, il permet de réali­ser un trai­te­ment entre la soumis­sion du formu­laire et son envoi.

Tenez, un cas d’uti­li­sa­tion : j’ai créé un formu­laire pour modi­fier rapi­de­ment certaines valeurs dans une base de données externe en plus de la base WordPress du site. Le formu­laire est envoyé (mais grâce à skip_mail : on il n’y a pas d’en­voi de cour­riel), les valeurs en base de données sont modi­fiées en utili­sant la classe wpdb pour la base WordPress et par l’en­voi de données via cURL dans myfunctions_formsActions() et le trai­te­ment adéquat sur le site distant, avant l’en­voi d’une noti­fi­ca­tion de réus­site ou d’échec. Simple et efficace.

Le hook wpcf7_add_form_tag vous permet de créer votre propre champ de formu­laire, si par exemple vous souhai­tez format­ter diffé­rem­ment un input en lui rajou­tant des options non incluses dans l’in­ter­face par défaut par exemple. Comme un champ date et heure rensei­gné auto­ma­ti­que­ment et basé sur une valeur prédé­fi­nie (H+24 par exemple).

Les événements DOM personnalisés

Pour aller plus loin, il est aussi possible de se servir des événe­ments DOM person­na­li­sés. Nous n’uti­li­sons plus PHP mais javascript :

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    // le traitement à appliquer, une redirection par exemple
    // vous pouvez par exemple utiliser les données du formulaire via event.detail.inputs
    var inputs = event.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {
        if ( 'your-name' == inputs[i].name ) {
            var yourname = inputs[i].value;
        }
    location = 'https://url-de-redirection.com/?nom=' + yourname;
    }
}, false );
</script>

Ce code peut être mis en service via l’ex­ten­sion WPCode – Insert Headers and Footers + extraits de code person­na­li­sés – Gestionnaire de code WordPress.

Insertion d'un bout de code - javascript
Insertion d’un bout de code – javascript

Suivez les étapes de l’image : ❶ acti­vez le bout de code, ❷ donnez-lui un nom, ❸ sélec­tion­nez le type de code, ❹ insé­rez votre code, et retour en ❶ pour enregistrer.

Le script peut aussi être inséré via du code PHP, en voici un exemple plus complet :

add_action('wp_footer', 'mysite_cf7_redirect');

function mysite_cf7_redirect() {
    if (function_exists('wpcf7')) {
        echo "<script type='text/javascript'>
        document.addEventListener('wpcf7mailsent', function(event) {
            location = 'https://your-redirection-url.com'; // remplacer avec votre URL de destination
        }, false);
        </script>";
    }
}

Attention ! À l’étape ❸ ne choi­sis­sez pas javas­cript mais PHP !

Pour en savoir plus les événe­ments DOM person­na­li­sés, je vous conseille de consul­ter la page DOM Events sur le site de l’ex­ten­sion. Vous y trou­ve­rez les diffé­rents événe­ments appe­lables, et le contenu de l’ob­jet event asso­cié à l’événement.

Après ce bref tour d’ho­ri­zon de Contact Form 7, vous commen­cez peut-être à entre­voir tout le poten­tiel de cette exten­sion. Bien sûr, comparé à d’autres exten­sions de formu­laires, on reste dans le basique. Mais c’est sans comp­ter sur les addons gratuits et payants déve­lop­pés pour étendre ses fonctionnalités.

Les addons pour Contact Form 7

Ce n’est pas un addon pour Contact Form 7, mais il vous permet­tra d’in­sé­rer vos bouts de code sans modi­fier le fichier functions.php (très mauvaise pratique par ailleurs), c’est WPCode – Insert Headers and Footers + extraits de code person­na­li­sés – Gestionnaire de code WordPress, dont nous avons parlé précé­dem­ment. Vous pour­rez insé­rer vos bouts de code PHP, javas­cript, CSS ou HTML, partout sur le site, sur certaines pages, dans la partie admin unique­ment, sur ordi­na­teur ou mobile (ou sur les deux)… il vous servira donc pour Contact Form 7, mais pas que.

Les constructeurs de formulaire pour Contact Form 7

Le construc­teur de formu­laire par défaut n’est pas le nec plus ultra des construc­teurs, il faut le recon­naitre. Le premier vrai addon dans ma liste, c’est donc CF7 Smart Grid Design Extension.

Cette exten­sion permet de créer une grille pour chaque formu­laire, et le résul­tat est habi­tuel­le­ment inté­res­sant. C’est le plus simple et le plus agréable à utili­ser. Mais à l’oc­ca­sion, je rencontre des bugs sans raison appa­rente. Sur un site, elle ne se charge pas en front-end, ce qui donne un rendu basique pour le formu­laire. Sur un autre site, elle inter­fère avec d’autres addons. Vous pouvez tenter, mais person­nel­le­ment, je suis déçu par cette exten­sion pour­tant si prometteuse.

Je préfère désor­mais créer mes formu­laires via le construc­teur en ligne de Crocoblock. Voici une courte vidéo qui vous en expli­quera le fonctionnement :

Une fois la grille construite, il vous suffit de copier le HTML et le CSS pour obte­nir un cane­vas où il ne reste plus qu’à inté­grer le contenu spéci­fique à Contact Form 7, pour passer de 

<div class="cf-container">
	<div class="cf-col-6">CF7 field. Row: 1. Column: 1</div>
	<div class="cf-col-6">CF7 field. Row: 1. Column: 2</div>
</div>

à

<div class="cf-container">
	<div class="cf-col-6">[text your-name placeholder "Votre nom"]</div>
	<div class="cf-col-6">[email your-email placeholder "Votre courriel"]</div>
</div>

et vous obtien­drez ce résultat :

Rendu du formulaire avec le constructeur Crocoblock
Rendu du formu­laire avec le construc­teur Crocoblock

Le couteau suisse pour Contact Form 7

Contact Form 7 est perfor­mant mais basique, c’est un fait. Si vous avez besoin d’un formu­laire un mini­mum élaboré, avec un cane­vas, avec une logique condi­tion­nelle, la signa­ture de votre client, des champs prérem­plis, l’in­té­gra­tion avec WooCommerce, Telegram, Zapier, Mailchimp… alors il vous faut Ultimate Addons for Contact Form 7.

Cette exten­sion permet d’étendre les capa­ci­tés de Contact Form 7, et de mettre en forme plus fine­ment son formu­laire, sans pour autant avoir la souplesse du construc­teur de Crocoblock, tout au moins dans sa version gratuite. C’est un tout en un, il y a donc des fonc­tion­na­li­tés plus basiques que d’autres.

J’ai utilisé le module de grille pour des formu­laires multi­co­lonnes, le champ signa­ture dans un formu­laire de compte rendu d’in­ter­ven­tion chez le client, la redi­rec­tion après soumis­sion du formu­laire, les champs condi­tion­nels en fonc­tion du public visé (le numéro SIREN n’a pas d’in­té­rêt pour un parti­cu­lier mais est obli­ga­toire pour un profes­sion­nel)… mais il y a en plus la possi­bi­lité de créer des formu­laires avec étapes (multis­tep), d’in­sé­rer des champs selon une logique condi­tion­nelle, de sauve­gar­der les entrées du formu­laire en base de donnée, et j’en passe, il y a une ving­taine de modules livrés avec la version gratuite.

La version Pro est encore plus complète, elle permet de créer des grilles person­na­li­sées avec une variété de combi­nai­sons plus impor­tante, la possi­bi­lité de créer des formu­laires inter­ac­tifs, d’avoir des champs répé­tables, une redi­rec­tion condi­tion­nelle, de créer des listes ou des grilles de produits WooCommerce…

Une licence à vie (life­time) vaut de 99 à 199€ en fonc­tion des promo­tions en cours sur le site, ce qui est raison­nable au vu des fonc­tion­na­li­tés propo­sées, d’au­tant que le support est très réac­tif : à chaque ques­tion posée, j’ai eu une réponse dans la jour­née.

Le filtre antispam

Même si l’ap­pa­rence est essen­tielle, la sécu­rité lui dame le pion – de mon point de vue tout au moins. C’est pour cela que j’ai installé et activé Contact Form 7 Honeypot.

Pas de confi­gu­ra­tion parti­cu­lière pour cette exten­sion qui vous protège effi­ca­ce­ment du spam. Ceci dit, si vous utili­sez une autre exten­sion pour éviter le spam et les commen­taires indé­si­rables, elle couvre peut être aussi les formu­laires créés via Contact Form 7. L’avantage de celle-ci, c’est qu’elle est trans­pa­rente pour l’uti­li­sa­teur. Pas de CAPTCHA, pas de quiz, aucune action de l’uti­li­sa­teur n’est requise.

Les autres addons

En fonc­tion de vos besoins : télé­ver­se­ment de plusieurs images, inscrip­tion à une liste de diffu­sion, champs calcu­lés pour établir un devis, paie­ment via Paypal ou Stripe, connexion à Google Sheets, template desi­gner pour envoyer des cour­riels plus accro­cheurs, envoi de SMS, vous trou­ve­rez l’ex­ten­sion qu’il vous faut dans le dépôt WordPress ou en cher­chant sur le web – toutes les exten­sions ne sont pas gratuites, et certaines n’ont pas de version gratuite bridée.

Le mot de la fin

Contact Form 7 ne va pas vous éblouir par son inter­face user friendly, par les types de champs gérés ou par ses options déli­rantes, mais il permet de créer un formu­laire qui répond à vos besoin, via des addons dans certains cas, ou en mettant les mains dans le cambouis à l’oc­ca­sion, mais pour des possi­bi­li­tés qui vont au-delà du simple formu­laire de contact, et au-delà de ce que vous proposent la plupart de ses concur­rents, le tout gratui­te­ment ou pour un coût dérisoire.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris