Comment ajouter un formulaire de contact à votre site web (qui vous parvient vraiment)

Pour ajouter un formulaire de contact qui fonctionne, créez un formulaire court (nom, e-mail, message), envoyez-le à une route serveur qui valide les données, enregistrez le message dans une base de données, puis envoyez-vous une notification par e-mail via un fournisseur d'e-mails utilisant une clé d'API secrète. Ajoutez un champ piège caché et une limitation du nombre de requêtes pour bloquer la plupart des spams, affichez un message de succès clair, et testez le tout de bout en bout sur le site publié. Enregistrer avant d'envoyer l'e-mail est l'élément essentiel : si l'envoi échoue, vous avez quand même la demande.

Vos options

Si votre site dispose déjà d'un backend et d'une base de données — ce qui est souvent le cas des applications créées avec des créateurs d'applications par IA —, la dernière option est la plus fiable et garde les demandes là où vous pouvez les voir.

Ce que comprend un bon formulaire de contact

• Le moins de champs possible. Nom, e-mail, message. Ajoutez une liste déroulante pour l'objet (« Ventes », « Assistance », « Autre ») seulement si vous l'utilisez pour orienter les messages.
• Des libellés clairs au-dessus de chaque champ, et pas seulement un texte indicatif qui disparaît.
• Une validation utile : « Saisissez une adresse e-mail valide », affichée à côté du champ.
• Un message de succès qui indique la suite : « Merci, nous répondons sous un jour ouvré. »
• Une mention de confidentialité expliquant l'usage des informations, avec un lien vers votre politique de confidentialité.
• Une solution de secours comme votre adresse e-mail ou votre numéro de téléphone, pour ceux qui les préfèrent.

Exemples de consignes

Le formulaire de base :

Ajoute un formulaire de contact sur la page Contact avec nom, e-mail et message (tous obligatoires, message limité à 2 000 caractères). Envoie-le à une route serveur qui valide les données, les enregistre dans une table contact_messages avec l'heure de réception, et affiche un message de succès : « Merci, nous vous répondrons sous un jour ouvré. » Affiche les erreurs de champ en ligne. Assure-toi que cela fonctionne bien sur téléphone.

Notifications par e-mail :

Quand un message de contact est enregistré, envoie-moi une notification à hello@example.com via Resend, avec la clé stockée dans RESEND_API_KEY. Définis reply-to sur l'adresse de l'expéditeur pour que je puisse répondre directement. Si l'envoi échoue, conserve le message enregistré et journalise l'erreur sans exposer la clé.

Protection anti-spam :

Ajoute une protection anti-spam au formulaire de contact : un champ piège caché qui doit rester vide, une limite de 5 envois par adresse IP et par heure côté serveur, et rejette les messages contenant plus de 3 liens. Ignore silencieusement les envois avec le champ piège, mais affiche quand même le succès.

Une boîte de réception :

Ajoute une page d'administration protégée par mot de passe qui liste les messages de contact du plus récent au plus ancien, avec une case « traité » et un filtre pour les messages non traités.

Étape par étape

1. Décidez où vont les messages : qui reçoit les notifications et qui répond.
2. Construisez le formulaire avec les champs ci-dessus, des libellés accessibles et des champs adaptés au mobile (utilisez le type de champ e-mail pour que les téléphones affichent le bon clavier).
3. Créez la route serveur. Elle vérifie les champs obligatoires, le format de l'e-mail et les limites de longueur. Ne faites jamais confiance à une validation uniquement côté navigateur.
4. Enregistrez d'abord dans la base de données. Voir comment ajouter une base de données à votre application.
5. Configurez un fournisseur d'e-mails. Créez un compte, vérifiez votre domaine d'envoi et stockez la clé d'API comme secret. Comment envoyer des e-mails depuis votre application détaille la configuration du domaine (SPF, DKIM).
6. Envoyez la notification depuis le serveur après l'enregistrement. Utilisez votre domaine vérifié comme expéditeur et l'adresse du visiteur comme reply-to — n'envoyez pas « depuis » l'adresse du visiteur, sinon elle sera probablement rejetée comme usurpation.
7. Ajoutez facultativement une réponse automatique au visiteur, mais gardez-la courte ; les réponses automatiques envoyées à des adresses de spam peuvent nuire à la réputation de votre expéditeur.
8. Ajoutez la protection anti-spam : champ piège, limitation du nombre de requêtes, puis une vérification de type CAPTCHA si nécessaire.
9. Testez sur le site publié : envoyez un message, vérifiez la base de données, votre boîte de réception et les spams, cliquez sur répondre.

Bloquer le spam

Les formulaires de contact attirent les robots dans les jours qui suivent leur mise en ligne. Superposez les défenses, de la moins intrusive à la plus contraignante :

1. Champ piège (honeypot). Un champ caché pour les humains ; les robots le remplissent. Il ne coûte rien aux vrais visiteurs.
2. Limitation du nombre de requêtes côté serveur. Plafonne le nombre de messages qu'une même adresse peut envoyer sur une période donnée.
3. Règles sur le contenu. Rejeter les messages bourrés de liens, ou dont le champ message est vide ou démesurément long.
4. Une vérification de type CAPTCHA, comme Cloudflare Turnstile ou Google reCAPTCHA. Le jeton doit être vérifié sur votre serveur ; une vérification qui ne s'exécute que dans le navigateur peut être contournée.

Erreurs courantes

• Afficher « Envoyé ! » alors que rien n'a été envoyé. L'interface annonce le succès avant la réponse du serveur, ou indépendamment de celle-ci. Attendez toujours la réponse du serveur.
• Des e-mails seulement, sans base de données. Une seule clé mal configurée et les demandes disparaissent pendant des semaines sans que personne ne le remarque.
• Clé d'API dans le code front-end. N'importe qui peut s'en servir pour envoyer des e-mails en votre nom.
• Domaine d'envoi non vérifié. Les notifications finissent dans les spams ou n'arrivent jamais.
• Envoyer « depuis » l'adresse du visiteur. Utilisez reply-to à la place.
• Aucune limite de longueur. Les robots collent d'énormes blocs de texte.
• Ne jamais tester le site en ligne. Les clés et les domaines diffèrent souvent entre l'aperçu et la production.

Liste de contrôle

• Formulaire court, avec libellés visibles et erreurs claires
• Validation côté serveur et limites de longueur
• Chaque message enregistré dans la base de données
• Notification envoyée depuis un domaine vérifié, avec reply-to défini
• Clé d'API e-mail stockée uniquement dans les secrets côté serveur
• Champ piège et limitation du nombre de requêtes en place
• Message de succès affiché seulement après confirmation du serveur
• La mention de confidentialité renvoie à votre politique de confidentialité
• Testé de bout en bout sur le site publié, y compris le dossier des spams

Les formulaires de contact dans Mythex

Dans Mythex, vous pouvez construire tout cela depuis le chat. Demandez le formulaire et une base de données dans la même consigne (ou tapez /database) pour que les envois soient conservés. Mythex ne propose pas de service d'envoi d'e-mails intégré : pour les notifications, vous utilisez donc un fournisseur comme Resend, SendGrid ou Postmark, ajoutez sa clé avec /secrets ou dans les paramètres du projet, et demandez à l'agent d'envoyer depuis le serveur — voir Envoyer des e-mails depuis votre application. Avant de vous y fier, lancez le test de l'application (/test) sur le formulaire dans l'aperçu, puis publiez et testez sur l'URL en ligne.

Un formulaire de contact est un élément clé de la plupart des sites web de petites entreprises et des pages de destination. Consultez la liste de contrôle de sécurité avant le lancement.

Questions