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 2466 mots.

Par défaut, Word­Press ne gère pas les for­mu­laires, si ce n’est pour les com­men­taires. Mais ras­surez-vous, vous trou­verez dans le dépôt Word­Press des dizaines d’ex­ten­sions pour pal­li­er ce manque. Dont WPForms, Nin­ja Forms et… Con­tact Form 7. C’est d’ailleurs le plus pop­u­laire, au vu de ses plus de 10 mil­lions d’in­stal­la­tions actives.

Et pour­tant, con­traire­ment à cer­tains de ses con­cur­rents, il n’of­fre pas de con­struc­teur dédié, et dans sa ver­sion de base, il est on ne peut plus rus­tique. Alors pourquoi cet engoue­ment ?

Plusieurs raisons per­me­t­tent d’ex­pli­quer le suc­cès de cette exten­sion :

• Tout d’abord, sa sim­plic­ité. Ce côté rus­tique avec une inter­face spar­ti­ate ras­sure. Mais ne vous méprenez pas ! Rus­tique, sim­ple, mais puis­sant.
• Con­tact Form 7 est égale­ment flex­i­ble, grâce aux hooks Word­Press. Les fil­tres et actions disponibles dans Con­tact Form 7 autorisent une grande sou­p­lesse dans le traite­ment des for­mu­laires. Pour un développeur, c’est le nec plus ultra, c’est l’as­sur­ance de pou­voir faire ce que l’on veut comme l’on veut.
• Enfin, vous trou­verez des addons à Con­tact Form 7 dans le dépôt Word­Press, pour rediriger après envoi, pour créer un for­mu­laire séquen­tiel, pour gér­er des types de champs sup­plé­men­taires, pour struc­tur­er via un sys­tème de grille…

Lors du développe­ment (récent) d’un CRM basé sur Word­Press, j’ai été emmené à user des hooks et des addons de Con­tact Form 7, et le moins que je puisse dire, c’est qu’au­cun de ses con­cur­rents ne m’au­raient per­mis de faire ne serait-ce que le dix­ième de ce que j’ai fait en l’u­til­isant. Et ce n’est pas faute d’avoir ten­té. Seul con­cur­rent sérieux, a pri­ori : Grav­i­ty Forms — mais il est payant. Ce qui dans cer­tains cas ne posera pas vrai­ment prob­lème, cer­tains des addons de Con­tact Form 7 l’é­tant aus­si. Tout est ques­tion de besoin — et de porte­feuille.

Ce que je vous pro­pose, c’est de faire un tour rapi­de d’hori­zon de Con­tact Form 7, de ses hooks et de ses addons.

Nous allons pour com­mencer par la…

Prise en main de Contact Form 7

Si vous êtes un habitué de Word­Press, vous savez com­ment installer une exten­sion. Sinon, je vous pro­pose de lire mon bil­let Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press.

Une fois Con­tact Form 7 instal­lé et activé, vous pou­vez l’u­tilis­er, il n’y a pas de réglages par­ti­c­uliers. Tout se gère for­mu­laire par for­mu­laire : les champs du for­mu­laire, le con­tenu du mes­sage envoyé, les textes des mes­sages 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 sim­ple, cliquez sur ajouter et vous aurez un for­mu­laire basique, de type for­mu­laire de con­tact. L’in­ter­face min­i­mal­iste du pre­mier onglet con­tient le code HTML ain­si que les short­codes pour l’in­ser­tion des champs et bou­tons :

<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’ex­em­ple ci-dessus, nous trou­vons des short­codes cor­re­spon­dant aux champs HTML5 input de type email, text, à la zone de texte (textarea) et au bou­ton de soumis­sion. Vous avez égale­ment le champ caché, la liste déroulante, la case à cocher, le bou­ton radio, les champs de type télé­phone, date, url, nom­bre, con­fir­ma­tion (pour accepter les con­di­tions générales par exem­ple) pour ne citer que l’essen­tiel.

C’est basique, brut de décof­frage, le bal­is­age n’est pas un mod­èle du genre, mais tout y est et le for­mu­laire est prêt à être inséré dans une page ou un arti­cle.

Arrê­tons nous sur la con­struc­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 com­plé­men­taires cor­re­spon­dent pour cer­tains aux attrib­uts de la balise HTML input : class:myclass don­nera class="myclass", id:myid don­nera id="myid".

L’au­to­com­plé­tion (critère autocomplete) est intéres­sante si vous voulez fournir un for­mu­laire rapi­de à rem­plir à vos con­tacts : given-name pour le prénom, family-name pour le nom de famille ou tout sim­ple­ment name pour les prénom et nom ensem­bles, email pour le cour­riel… vous trou­verez la liste com­plète des auto­com­plé­tions pos­si­bles sur une page dédiée du site Mozil­la.

Et vous trou­verez le détail de la struc­ture des champs sur le site de Con­tact Form 7 à la page How tags works.

En aparté, la doc­u­men­ta­tion (en anglais) est plutôt com­plète mais ne cou­vre que l’u­til­i­sa­tion “clas­sique” de l’ex­ten­sion. C’est sur le web qu’il fau­dra chercher tuto­riels et how­tos, en par­ti­c­uli­er pour les hooks et événe­ments per­son­nal­isés. L’in­con­vénient, c’est que si l’on ne sait pas exacte­ment ce que l’on cherche, ou si notre recherche porte sur une option peu util­isée, on peut y per­dre un cer­tain temps, pour ne pas dire un temps cer­tain.

Les réglages de base

Le sec­ond onglet per­met de gér­er l’en­voi d’un email à un des­ti­nataire prédéfi­ni. Tout est prévu pour un cour­riel bien for­mat­té : des­ti­nataire, expédi­teur, objet, en-têtes addi­tion­nels pour répon­dre à l’ex­pédi­teur réel du mes­sage, envoi au for­mat texte (par défaut) ou HTML, pos­si­bil­ité de join­dre des fichiers, envoi d’une réponse automa­tique…

Les messages (notifications)

Le troisième onglet, Mes­sages, per­met de per­son­nalis­er chaque noti­fi­ca­tion. Quand le mes­sage de l’expéditeur a bien été envoyé, par exem­ple, le texte par défaut est Mer­ci pour votre mes­sage. Il a été envoyé. Mais vous pou­vez le rem­plac­er par le texte de votre choix, comme Mer­ci pour ce mes­sage, je vous répondrai dès que pos­si­ble par exem­ple.

Des noti­fi­ca­tions sont prévues pour vous informer des événe­ments impac­tants dans la saisie du for­mu­laire : l’en­voi du mes­sage (ou l’échec de l’opéra­tion), une saisie mal for­mat­tée ou man­quante, l’oblig­a­tion d’ac­cepter les con­di­tions avant soumis­sion… c’est au total 22 mes­sages que vous pou­vez per­son­nalis­er pour chaque for­mu­laire créé.

Les réglages additionnels

Le qua­trième onglet , Réglages addi­tion­nels, per­met de mod­i­fi­er le com­porte­ment par défaut de Con­tact Form 7 : demo_mode: on pour met­tre le for­mu­laire en mode démo (le cour­riel ne sera pas envoyé, mais vous aurez la noti­fi­ca­tion de suc­cès), skip_mail: on pour pass­er l’en­voi du cour­riel.

Voilà pour les basiques. C’est déjà bien, vous pou­vez main­tenant insér­er votre for­mu­laire via le bloc Guten­berg dédié :

En ❶, vous avez l’i­cone du bloc tel qu’il appa­rait dans la liste des blocs Guten­berg. En ❷, la liste de choix du for­mu­laire à affich­er.

Voici ce que vous obtien­drez :

À not­er que par défaut, le bal­is­age étant en HTML5, les for­mu­laires sont respon­sives.

Les hooks (filtres et actions)

Nous avons vu le fonc­tion­nement en util­isant l’in­ter­face de base de l’ex­ten­sion, mais on peut égale­ment utilis­er les hooks pour aller plus loin avec Con­tact Form 7. L’un des plus util­isés est wpcf7_before_send_mail que l’on appellera via add_filter ( 'wpcf7_before_send_mail', 'myfunctions_formsActions', 10, 3 ); par exem­ple. Et dans la fonc­tion PHP myfunctions_formsActions vous met­trez le code pour traiter les don­nées reçues avant de repar­tir dans la boucle des actions par défaut. Ce hook porte bien son nom, il per­met de réalis­er un traite­ment entre la soumis­sion du for­mu­laire et son envoi.

Tenez, un cas d’u­til­i­sa­tion : j’ai créé un for­mu­laire pour mod­i­fi­er rapi­de­ment cer­taines valeurs dans une base de don­nées externe en plus de la base Word­Press du site. Le for­mu­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 don­nées sont mod­i­fiées en util­isant la classe wpdb pour la base Word­Press et par l’en­voi de don­nées via cURL dans myfunctions_formsActions() et le traite­ment adéquat sur le site dis­tant, avant l’en­voi d’une noti­fi­ca­tion de réus­site ou d’échec. Sim­ple et effi­cace.

Le hook wpcf7_add_form_tag vous per­met de créer votre pro­pre champ de for­mu­laire, si par exem­ple vous souhaitez for­mat­ter dif­férem­ment un input en lui rajoutant des options non inclus­es dans l’in­ter­face par défaut par exem­ple. Comme un champ date et heure ren­seigné automa­tique­ment et basé sur une valeur prédéfinie (H+24 par exem­ple).

Les événements DOM personnalisés

Pour aller plus loin, il est aus­si pos­si­ble de se servir des événe­ments DOM per­son­nal­isés. Nous n’u­til­isons 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 ser­vice via l’ex­ten­sion WPCode – Insert Head­ers and Foot­ers + extraits de code per­son­nal­isés – Ges­tion­naire de code Word­Press.

Suiv­ez les étapes de l’im­age : ❶ activez le bout de code, ❷ don­nez-lui un nom, ❸ sélec­tion­nez le type de code, ❹ insérez votre code, et retour en ❶ pour enreg­istr­er.

Le script peut aus­si être inséré via du code PHP, en voici un exem­ple plus com­plet :

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

Atten­tion ! À l’é­tape ❸ ne choi­sis­sez pas javascript mais PHP !

Pour en savoir plus les événe­ments DOM per­son­nal­isés, je vous con­seille de con­sul­ter la page DOM Events sur le site de l’ex­ten­sion. Vous y trou­verez les dif­férents événe­ments appelables, et le con­tenu de l’ob­jet event asso­cié à l’événe­ment.

Après ce bref tour d’hori­zon de Con­tact Form 7, vous com­mencez peut-être à entrevoir tout le poten­tiel de cette exten­sion. Bien sûr, com­paré à d’autres exten­sions de for­mu­laires, on reste dans le basique. Mais c’est sans compter sur les addons gra­tu­its et payants dévelop­pés pour éten­dre ses fonc­tion­nal­ités.

Les addons pour Contact Form 7

Ce n’est pas un addon pour Con­tact Form 7, mais il vous per­me­t­tra d’in­sér­er vos bouts de code sans mod­i­fi­er le fichi­er functions.php (très mau­vaise pra­tique par ailleurs), c’est WPCode – Insert Head­ers and Foot­ers + extraits de code per­son­nal­isés – Ges­tion­naire de code Word­Press, dont nous avons par­lé précédem­ment. Vous pour­rez insér­er vos bouts de code PHP, javascript, CSS ou HTML, partout sur le site, sur cer­taines pages, dans la par­tie admin unique­ment, sur ordi­na­teur ou mobile (ou sur les deux)… il vous servi­ra donc pour Con­tact Form 7, mais pas que.

WPCode – Insert Head­ers and Foot­ers + extraits de code per­son­nal­isés – Ges­tion­naire de code Word­Press

Auteur(s) : Syed Balkhi

Ver­sion actuelle : 2.2.7

Dernière mise à jour : 1 avril 2025

insert-headers-and-footers.2.2.7.zip

98%Éval­u­a­tions 2 000 000+Instal­la­tions WP 4.6+Néces­saire

Les constructeurs de formulaire pour Contact Form 7

Le con­struc­teur de for­mu­laire par défaut n’est pas le nec plus ultra des con­struc­teurs, il faut le recon­naitre. Le pre­mier vrai addon dans ma liste, c’est donc CF7 Smart Grid Design Exten­sion.

Smart Grid-Lay­out Design for Con­tact Form 7

Auteur(s) : Aurovra­ta Venet

Ver­sion actuelle : 4.15.8

Dernière mise à jour : 13 juin 2024

cf7-grid-layout.4.15.8.zip

90%Éval­u­a­tions 10 000+Instal­la­tions WP 4.7+Néces­saire

Cette exten­sion per­met de créer une grille pour chaque for­mu­laire, et le résul­tat est habituelle­ment intéres­sant. C’est le plus sim­ple et le plus agréable à utilis­er. Mais à l’oc­ca­sion, je ren­con­tre des bugs sans rai­son appar­ente. Sur un site, elle ne se charge pas en front-end, ce qui donne un ren­du basique pour le for­mu­laire. Sur un autre site, elle inter­fère avec d’autres addons. Vous pou­vez ten­ter, mais per­son­nelle­ment, je suis déçu par cette exten­sion pour­tant si promet­teuse.

Je préfère désor­mais créer mes for­mu­laires via le con­struc­teur en ligne de Cro­coblock. Voici une courte vidéo qui vous en expli­quera le fonc­tion­nement :

Une fois la grille con­stru­ite, il vous suf­fit de copi­er le HTML et le CSS pour obtenir un canevas où il ne reste plus qu’à inté­gr­er le con­tenu spé­ci­fique à Con­tact Form 7, pour pass­er 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ésul­tat :

Le couteau suisse pour Contact Form 7

Con­tact Form 7 est per­for­mant mais basique, c’est un fait. Si vous avez besoin d’un for­mu­laire un min­i­mum élaboré, avec un canevas, avec une logique con­di­tion­nelle, la sig­na­ture de votre client, des champs prérem­plis, l’in­té­gra­tion avec WooCom­merce, Telegram, Zapi­er, Mailchimp… alors il vous faut Ulti­mate Addons for Con­tact Form 7.

Ulti­mate Addons for Con­tact Form 7

Auteur(s) : The­mef­ic

Ver­sion actuelle : 3.5.11

Dernière mise à jour : 9 avril 2025

ultimate-addons-for-contact-form‑7.3.5.11.zip

96%Éval­u­a­tions 60 000+Instal­la­tions WP 4.2+Néces­saire

Cette exten­sion per­met d’é­ten­dre les capac­ités de Con­tact Form 7, et de met­tre en forme plus fine­ment son for­mu­laire, sans pour autant avoir la sou­p­lesse du con­struc­teur de Cro­coblock, tout au moins dans sa ver­sion gra­tu­ite. C’est un tout en un, il y a donc des fonc­tion­nal­ités plus basiques que d’autres.

J’ai util­isé le mod­ule de grille pour des for­mu­laires mul­ti­colonnes, le champ sig­na­ture dans un for­mu­laire de compte ren­du d’in­ter­ven­tion chez le client, la redi­rec­tion après soumis­sion du for­mu­laire, les champs con­di­tion­nels en fonc­tion du pub­lic visé (le numéro SIREN n’a pas d’in­térêt pour un par­ti­c­uli­er mais est oblig­a­toire pour un pro­fes­sion­nel)… mais il y a en plus la pos­si­bil­ité de créer des for­mu­laires avec étapes (mul­ti­step), d’in­sér­er des champs selon une logique con­di­tion­nelle, de sauve­g­arder les entrées du for­mu­laire en base de don­née, et j’en passe, il y a une ving­taine de mod­ules livrés avec la ver­sion gra­tu­ite.

La ver­sion Pro est encore plus com­plète, elle per­met de créer des grilles per­son­nal­isées avec une var­iété de com­bi­naisons plus impor­tante, la pos­si­bil­ité de créer des for­mu­laires inter­ac­t­ifs, d’avoir des champs répéta­bles, une redi­rec­tion con­di­tion­nelle, de créer des listes ou des grilles de pro­duits WooCom­merce…

Une licence à vie (life­time) vaut de 99 à 199€ en fonc­tion des pro­mo­tions en cours sur le site, ce qui est raisonnable au vu des fonc­tion­nal­ités pro­posées, d’au­tant que le sup­port est très réac­t­if : à chaque ques­tion posée, j’ai eu une réponse dans la journée.

Le filtre antispam

Même si l’ap­parence 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 instal­lé et activé Con­tact Form 7 Hon­ey­pot.

Hon­ey­pot for Con­tact Form 7 — Pro­tect Con­tact Form 7 spam with ease! [100% FREE Anti-Spam Plu­g­in]

Auteur(s) : Saad Iqbal

Ver­sion actuelle : 2.1.7

Dernière mise à jour : 13 novem­bre 2024

contact-form-7-honeypot.2.1.7.zip

78%Éval­u­a­tions 400 000+Instal­la­tions WP 4.8+Néces­saire

Pas de con­fig­u­ra­tion par­ti­c­ulière pour cette exten­sion qui vous pro­tège effi­cace­ment du spam. Ceci dit, si vous utilisez une autre exten­sion pour éviter le spam et les com­men­taires indésir­ables, elle cou­vre peut être aus­si les for­mu­laires créés via Con­tact Form 7. L’a­van­tage de celle-ci, c’est qu’elle est trans­par­ente pour l’u­til­isa­teur. Pas de CAPTCHA, pas de quiz, aucune action de l’u­til­isa­teur n’est req­uise.

Les autres addons

En fonc­tion de vos besoins : télé­verse­ment de plusieurs images, inscrip­tion à une liste de dif­fu­sion, champs cal­culés pour établir un devis, paiement via Pay­pal ou Stripe, con­nex­ion à Google Sheets, tem­plate design­er pour envoy­er des cour­riels plus accrocheurs, envoi de SMS, vous trou­verez l’ex­ten­sion qu’il vous faut dans le dépôt Word­Press ou en cher­chant sur le web — toutes les exten­sions ne sont pas gra­tu­ites, et cer­taines n’ont pas de ver­sion gra­tu­ite bridée.

Le mot de la fin

Con­tact Form 7 ne va pas vous éblouir par son inter­face user friend­ly, par les types de champs gérés ou par ses options déli­rantes, mais il per­met de créer un for­mu­laire qui répond à vos besoin, via des addons dans cer­tains cas, ou en met­tant les mains dans le cam­bouis à l’oc­ca­sion, mais pour des pos­si­bil­ités qui vont au-delà du sim­ple for­mu­laire de con­tact, et au-delà de ce que vous pro­posent la plu­part de ses con­cur­rents, le tout gra­tu­ite­ment ou pour un coût dérisoire.