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

Pour ajouter un formulaire de contact qui fonctionne, créez un formulaire court (nom, courriel, message) et envoyez-le à une route serveur qui valide les données, enregistre le message dans une base de données, puis vous envoie une notification par un fournisseur de courriel à l'aide d'une clé d'API secrète. Ajoutez un champ caché de type piège (honeypot) et une limitation du nombre de requêtes pour arrêter la plupart des pourriels, affichez un message de réussite clair, et testez le tout de bout en bout sur le site publié. Enregistrer avant d'envoyer le courriel est l'élément essentiel : si le courriel échoue, vous avez quand même la demande.

Vos options

Si votre site dispose déjà d'un serveur et d'une base de données — ce que les applications créées avec les créateurs par IA ont souvent —, 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

• Aussi peu de champs que possible. Nom, courriel, message. Ajoutez une liste déroulante pour le sujet (« Ventes », « Soutien », « Autre ») seulement si vous allez acheminer les messages selon ce choix.
• Des étiquettes claires au-dessus de chaque champ, et non seulement un texte indicatif qui disparaît.
• Une validation utile : « Entrez une adresse courriel valide », affichée à côté du champ.
• Un état de réussite qui indique ce qui se passe ensuite : « Merci — nous répondons dans un délai d'un jour ouvrable. »
• Une note sur la confidentialité qui explique comment vous utiliserez les renseignements, avec un lien vers votre politique de confidentialité.
• Une solution de rechange comme votre adresse courriel ou votre numéro de téléphone pour les personnes qui préfèrent ce mode.

Exemples d'invites

Le formulaire de base :

Ajoute un formulaire de contact sur la page Contact avec nom, courriel et message (tous obligatoires, message d'au plus 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 le message de réussite : « Merci, nous répondrons dans un délai d'un jour ouvrable. » Affiche les erreurs de champ en ligne. Assure-toi que cela fonctionne bien sur téléphone.

Notifications par courriel :

Lorsqu'un message de contact est enregistré, envoie-moi une notification à hello@example.com avec Resend, en utilisant la clé dans RESEND_API_KEY. Règle l'adresse de réponse sur le courriel 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 contre le pourriel :

Ajoute une protection contre le pourriel au formulaire de contact : un champ caché de type piège qui doit rester vide, une limite de 5 envois par adresse IP par heure sur le serveur, et rejette les messages contenant plus de 3 liens. Ignore silencieusement les envois avec piège, mais affiche quand même le message de réussite.

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 étiquettes accessibles et des champs adaptés aux téléphones (utilisez le type courriel pour que les téléphones affichent le bon clavier).
3. Créez la route serveur. Elle vérifie les champs obligatoires, le format du courriel et les limites de longueur. Ne faites jamais confiance à une validation uniquement dans le 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 de courriel. Créez un compte, vérifiez votre domaine d'envoi et conservez la clé d'API comme secret. Comment envoyer des courriels depuis votre application explique en détail 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 adresse de réponse — n'envoyez pas « de la part de » l'adresse du visiteur, sinon le message sera probablement rejeté comme usurpation.
7. Ajoutez éventuellement une réponse automatique au visiteur, mais gardez-la courte; les réponses automatiques envoyées à des adresses de pourriel peuvent nuire à votre réputation d'expéditeur.
8. Ajoutez la protection contre le pourriel : 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, vérifiez votre boîte de réception et le dossier pourriel, cliquez sur répondre.

Arrêter le pourriel

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

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 côté serveur. Plafonne le nombre de messages qu'une adresse peut envoyer pendant une période donnée.
3. Règles sur le contenu. Rejetez les messages bourrés de liens, ou dont le champ message est vide ou absurdement long.
4. Une vérification de type CAPTCHA, comme Cloudflare Turnstile ou Google reCAPTCHA. Le jeton doit être validé 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 affiche la réussite avant ou sans tenir compte de la réponse du serveur. Attendez toujours la réponse du serveur.
• Courriel seulement, sans base de données. Une seule clé mal configurée et les demandes disparaissent pendant des semaines sans que personne ne s'en aperçoive.
• Clé d'API dans le code de l'interface. N'importe qui peut s'en servir pour envoyer des courriels en votre nom.
• Domaine d'envoi non vérifié. Les notifications aboutissent dans le pourriel ou n'arrivent jamais.
• Envoyer « de la part de » l'adresse du visiteur. Utilisez plutôt l'adresse de réponse.
• Aucune limite de longueur. Les robots collent d'énormes blocs de texte.
• Ne jamais tester le site en production. Les clés et les domaines diffèrent souvent entre l'aperçu et la production.

Liste de vérification

• Formulaire court, avec des étiquettes visibles et des 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 adresse de réponse définie
• Clé d'API du courriel conservée uniquement dans les secrets côté serveur
• Champ piège et limitation du nombre de requêtes en place
• Message de réussite affiché seulement après confirmation du serveur
• La note de confidentialité renvoie à votre politique de confidentialité
• Testé de bout en bout sur le site publié, y compris le dossier pourriel

Formulaires de contact dans Mythex

Dans Mythex, vous pouvez construire l'ensemble depuis le clavardage. Demandez le formulaire et une base de données dans la même invite (ou tapez /database) pour que les envois soient conservés. Mythex n'a pas de produit d'envoi de courriel intégré; pour les notifications, apportez 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 un courriel depuis votre application. Avant de vous y fier, lancez les tests d'application (/test) sur le formulaire dans l'aperçu, puis publiez et testez l'URL en direct.

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

Questions