Mailto ou formulaire de contact – telle est souvent la question
Dois-je proposer un formulaire de contact élégant sur la page de contact de ma page d’accueil ou simplement une adresse e-mail sur laquelle le visiteur peut cliquer pour ouvrir le programme de messagerie installé localement ? Pour répondre à cette question, mets-toi à la place du visiteur : qu’est-ce que tu préfères ? Quelles expériences as-tu eues jusqu’à présent ?
Mailto – Web 1.0
<a href="mailto:mail@domain.tld">Mailadresse</a> qui indique au navigateur d’ouvrir le client de messagerie par défaut et de pré-remplir le champ To: avec l’adresse spécifiée. Il est même possible de prédéfinir d’autres champs, comme la ligne d’objet ou même le texte du contenu de l’e-mail.Exemple :
<a href="mailto:mail@domain.tld?subject=Dies%20ist%20der%20Betreff&body=Mailinhalt">Mailadresse mit vorausgefüllten Felder</a>. Comme les espaces et autres caractères spéciaux ne sont pas autorisés dans la zone href, ils doivent être remplacés par des codes HEX (%20).Ce que l’on peut faire semble génial, mais il y a aussi des critiques et des problèmes :
- Si aucun programme de messagerie n’est installé sur l’appareil, rien ne se passe (le navigateur peut s’ouvrir si tu es, par exemple, un utilisateur de Gmail). Au moins, tu peux noter l’adresse et envoyer un message plus tard.
- Les robots malveillants scannent toutes les pages des sites web à la recherche d’adresses e-mail et les utilisent ensuite pour envoyer du spam (à l’adresse, ou en tant qu’expéditeur). C’est vrai, mais souvent seule l’adresse e-mail info@ est indiquée, et cette adresse est de toute façon utilisée par les spammeurs, car elle existe dans la plupart des cas.
- Si tu souhaites obtenir des informations spécifiques de la part de personnes, par exemple pour un contact ultérieur ou pour t’assurer que la personne est un client, le lien mailto ne te mènera pas très loin.
Formulaire de contact 1.0
Les formulaires de contact ne datent pas d’hier. Cependant, la qualité des formulaires s’est considérablement améliorée en moyenne, probablement parce que de plus en plus d’opérateurs de sites web utilisent un CMS (la plupart WordPress) et des extensions qui ne maîtrisent qu’une seule fonction, mais très bien.
Message : ici, il est possible d’insérer les champs remplis comme fonction. Pour ce faire, clique sur l’icône à droite de l’éditeur visuel. Tu peux bien sûr également inclure une salutation personnelle ou ajouter d’autres textes.
Créer des formulaires de contact conviviaux avec Gravity Forms
Pour WordPress, il existe de nombreux plugins de formulaire, y compris des gratuits comme Contact Form 7. Contact Form 7 est très populaire (en 2026 : plus de 10 millions d’installations actives) et fiable.
Nous allons cependant créer l’exemple de formulaire de contact avec Gravity Forms, un plugin de formulaire particulièrement ergonomique, mais payant (en 2026 : à partir de 59 dollars US par an pour un site web). Je mentionne ici que Gravity Forms est inclus gratuitement dans le forfait Premium de l’hébergement WordPress géré de SaaS Web.
Ce que les formulaires modernes peuvent faire…
.. ou ce qu’ils devraient pouvoir faire.
D’abord pour l’utilisateur :
- Mise en page réactive, le formulaire doit être utilisable sur tous les appareils
- Champs clairement étiquetés, indiquant s’il s’agit d’un champ obligatoire ou facultatif
- Sauvegarde des données déjà saisies lors de la validation, éventuellement validation dynamique sans possibilité d’envoyer le formulaire avant que tous les champs requis n’aient été correctement remplis
Pour l’accessibilité, on pourrait souhaiter que :
- Les champs de formulaire individuels soient accessibles dans le bon ordre via la touche Tab
- Les champs soient décrits avec les attributs importants que les lecteurs d’écran, par exemple, évaluent
Maintenant du côté de l’opérateur :
- Création facile du formulaire, par exemple :
- Champs avec des fonctions prédéfinies à choisir (texte, e-mail, téléphone, sélection multiple…) et validation correspondante
- Personnaliser la validation individuellement, par exemple, champ obligatoire oui/non
- Logique conditionnelle : afficher un champ spécifique si un autre est rempli/coché
- Composer les champs par glisser-déposer
- Envoyer les données du formulaire à l’opérateur ou à d’autres personnes
- Informer l’expéditeur de l’envoi réussi des données après l’envoi, éventuellement le rediriger vers une page spécifique
- Donner à l’expéditeur la possibilité de recevoir une copie des données saisies
- Mention de la politique de confidentialité directement sur le formulaire et une durée de stockage définie pour les entrées (RGPD)
Très pratique pour les designers et les administrateurs :
- Les champs de formulaire peuvent être étendus avec des classes CSS auto-définies
- Fonction optionnelle Honeypot ou Captcha (pour les services Captcha externes comme Google reCAPTCHA, faites attention à la protection des données – un Honeypot fonctionne sans tiers)
Créer la structure de base du formulaire
Après l’installation de Gravity Forms, tu peux créer un premier formulaire – il suffit de lui donner un nom. Ensuite, tu peux définir les champs.
- Étape 1 : nous créons une case à cocher que l’utilisateur peut cocher s’il souhaite recevoir la copie par e-mail
- Étape 2 : nous créons la notification, y compris la logique selon laquelle elle n’est envoyée que si le champ a été coché
Intégrer une option pour que l’expéditeur reçoive une copie des données
- Nom : c’est un champ obligatoire, mais en fait sans importance
- Envoyer à défini : « Sélectionner un champ » > « E-mail » sélectionné dans le champ déroulant ; si tu as nommé le champ E-mail différemment, un autre nom apparaîtra naturellement dans la liste de sélection. Note que le champ E-mail est également un champ obligatoire, sinon cela ne fonctionnera évidemment pas…
- Nom de l’expéditeur : c’est ce que l’utilisateur du formulaire voit comme expéditeur de l’e-mail
- E-mail de l’expéditeur : peut être modifié ; je l’ai laissé tel quel. En 2026 : Utilise impérativement une adresse de ton propre domaine ici, sinon les e-mails finiront rapidement dans les spams à cause de SPF, DKIM et DMARC.
- Objet : c’est la ligne d’objet de l’e-mail
- Message : tu as ici la possibilité d’insérer les champs remplis en tant que fonction. Pour ce faire, clique sur l’icône à droite de l’éditeur visuel. Tu peux bien entendu aussi intégrer une salutation personnelle ou ajouter d’autres textes.
- Logique conditionnelle : cochez pour activer la logique. Ensuite, sélectionnez le champ qui doit servir de condition et l’état qui doit être rempli
C’est aussi simple que ça avec Gravity Forms
En principe, on pourrait aussi se passer de l’option d’envoi des données saisies à l’expéditeur et toujours envoyer un e-mail… mais les personnes qui ont eu de mauvaises expériences par le passé pourraient ainsi être informées que cela va se produire.
Pour conclure la discussion entamée tout en haut : pourquoi ne pas proposer les deux ? Afficher l’adresse e-mail et un formulaire… alors un visiteur peut décider lui-même et utilisera ce qui lui convient le mieux.
Besoin d’aide avec ton site WordPress ? Nous maintenons WordPress à jour et sécurisé et aidons en cas de problème. En savoir plus sur le support WordPress