Ajouter un formulaire de contact à un site créé avec Claude (sans casse-tête)

Pour qu'un visiteur puisse vous écrire sans que votre adresse email soit visible, deux voies fonctionnent bien. Un formulaire Tally intégré dans la page : rapide, aucun code. Ou une route d'API Next.js qui envoie le message via Resend : plus de contrôle sur le design. Dans les deux cas, vous recevez le message dans votre boîte mail. Ce guide vous aide à choisir, donne le prompt à confier à Claude, et liste les vérifications avant publication. Si vous débutez, commencez par le guide pour apprendre Claude.

En bref :

• Tally relie un formulaire à votre boîte mail sans écrire de code.
• Pour envoyer depuis votre propre domaine via Resend, il faut vérifier le domaine avec des enregistrements DNS : Claude Code ne peut pas le faire à votre place.
• La clé API Resend reste dans une variable d'environnement côté serveur, jamais dans le code envoyé au navigateur.
• Un champ honeypot invisible bloque une bonne part du spam automatisé sans gêner les visiteurs.

Tally ou Resend : quelle option choisir pour votre formulaire de contact ?

Choisissez Tally si vous voulez publier aujourd'hui sans toucher au code. Choisissez Resend si le formulaire doit épouser le design de votre site ou déclencher une logique métier (tri des demandes, écriture dans une base). Le lien mailto: est à éviter : ce n'est pas un vrai formulaire, et votre adresse est lisible par les robots qui parcourent le web.

Pour un site vitrine qui reçoit quelques messages par semaine, c'est souvent suffisant. La route maison devient utile quand vous voulez garder la maîtrise du rendu ou brancher d'autres actions derrière l'envoi. Si votre site n'existe pas encore, voyez d'abord comment créer un site web avec Claude.

Comment intégrer un formulaire Tally dans un site créé avec Claude ?

Créez le formulaire sur Tally, activez la notification par email, copiez le code d'intégration, puis demandez à Claude Code de l'insérer dans votre page /contact. Le formulaire s'affiche dans un iframe et ses changements de contenu se répercutent automatiquement sur le site, sans republier.

1. Sur Tally, créez un formulaire avec trois champs : nom, email, message.
2. Dans les réglages du formulaire, activez la notification par email vers votre adresse.
3. Dans l'onglet Partager, choisissez « Standard » puis « Get the code » pour copier le code d'intégration.
4. Collez le code dans un prompt à Claude Code, avec la consigne ci-dessous.

Ajoute une page /contact à mon site Next.js.
Elle contient un titre, une phrase d'introduction de deux lignes,
puis le formulaire Tally intégré avec ce code :

[colle ici le code d'intégration Tally]

Sous le formulaire, ajoute une mention d'information :
les données servent uniquement à répondre à la demande,
sont conservées [durée à définir], avec un lien vers /confidentialite.
Garde le design cohérent avec le reste du site.

Ce prompt fait deux choses utiles : il fixe la mise en page, et il force l'ajout de la mention RGPD, que Tally ne place pas à votre place. Limite à connaître : changer un style d'intégration (titre masqué, fond transparent) oblige à recopier le code, et le CSS ou les scripts personnalisés demandent un domaine personnalisé, fonction du plan Tally Pro.

Si vous demandez ce genre de modification à l'agent en ligne de commande, demander à Claude Code reste le plus direct : il lit votre dossier, modifie la page et vous montre le diff.

Comment recevoir les messages par email avec une route d'API et Resend ?

Créez un compte Resend, vérifiez votre domaine d'envoi , stockez la clé API dans les variables d'environnement de Vercel, puis faites générer la route d'API et le composant formulaire par Claude Code. Le seul point que Claude ne peut pas faire pour vous : ajouter les enregistrements DNS chez le gestionnaire de votre domaine.

Ce que vous faites vous-même

1. Créez un compte sur Resend, puis ajoutez votre domaine dans resend.com/domains.
2. Resend affiche des enregistrements DNS à ajouter. Copiez-les chez votre registrar ou votre hébergeur DNS, puis attendez la validation.
3. Générez une clé API et placez-la dans .env.local sous le nom RESEND_API_KEY.
4. Sur Vercel, ajoutez la même variable dans les réglages d'environnement du projet. Selon la documentation officielle de Vercel, ces variables se configurent dans les réglages du projet et restent côté serveur, hors du code envoyé au navigateur.

Ce que vous confiez à Claude Code

Sur mon site Next.js (App Router), ajoute un formulaire de contact.

1. Crée app/api/contact/route.ts : installe le paquet resend,
   lis RESEND_API_KEY depuis les variables d'environnement,
   valide côté serveur les champs nom, email et message,
   puis appelle resend.emails.send avec :
   from: "Site "
   to: mon adresse personnelle
   replyTo: l'email du visiteur
   subject: "Nouveau message de [nom]"
   Renvoie une erreur 500 si Resend retourne une error.
2. Échappe tout texte du visiteur avant de le mettre dans le HTML de l'email.
3. Crée le composant formulaire (nom, email, message, bouton)
   avec états : envoi en cours, succès, erreur.
4. Ne mets jamais la clé API dans du code client.

Le détail qui compte : replyTo pointe vers l'email du visiteur, donc un clic sur « Répondre » dans votre boîte mail lui écrit directement. Pour les tests, l'adresse onboarding@resend.dev sert d'expéditeur tant que le domaine n'est pas vérifié ; en production, utilisez une adresse de votre propre domaine. Avant de vous engager, relisez la page tarifaire de Resend : les conditions évoluent.

Le principe d'envoi par code est le même que dans l'article sur Resend avec Claude : une route serveur, une clé secrète, un domaine vérifié.

Comment éviter le spam et les messages perdus ?

Trois protections suffisent à la plupart des sites : un champ piège invisible (honeypot), une limite d'envois par visiteur, et en dernier recours un captcha léger (plusieurs services existent). Côté réception, les messages de votre propre formulaire échappent aux indésirables si l'expéditeur est authentifié : domaine vérifié et adresse du type contact@votredomaine.

Contre le spam

• Honeypot : un champ caché par CSS que les humains ne voient pas et que les robots remplissent. Si le champ contient quelque chose, la route d'API répond « ok » sans envoyer l'email.
• Limitation : par exemple 5 envois par heure et par adresse IP, pour couper les rafales.
• Captcha : à ajouter seulement si les deux premières protections ne suffisent pas, car un captcha visible peut faire fuir de vrais visiteurs.

Ajoute à ma route d'API de contact :
- un champ honeypot nommé "website" (caché par CSS, tabindex -1,
  autocomplete off) : s'il est rempli, réponds 200 sans envoyer d'email
- une limite de 5 envois par heure par adresse IP
- un message d'erreur clair en français côté formulaire

Contre les messages perdus

C'est le problème inverse : vos propres tests finissent en indésirables. Les causes habituelles sont un domaine non vérifié chez Resend, des enregistrements DNS absents, ou une adresse Gmail utilisée comme expéditeur depuis un autre serveur. Envoyez toujours depuis une adresse de votre domaine, vérifiée, et le problème disparaît dans la plupart des cas. Avec Tally, ce souci ne se pose pas : c'est Tally qui envoie la notification.

Que vérifier avant de publier votre formulaire ?

Envoyez un vrai message depuis la version en ligne (pas seulement en local) et suivez-le jusqu'à votre boîte de réception. Un formulaire qui marche sur votre ordinateur peut échouer en production si une variable d'environnement manque dans l'hébergeur.

• Envoyez un message depuis votre téléphone, en 4G, sur l'adresse publique du site.
• Vérifiez l'arrivée dans la boîte principale, puis dans les courriers indésirables.
• Testez un champ vide et un email mal formé : le formulaire doit refuser proprement.
• Confirmez que la clé API n'apparaît nulle part dans le code côté navigateur (ouvrez les outils de développement, onglet Sources, et cherchez le début de la clé).
• Vérifiez que RESEND_API_KEY est bien définie dans les réglages Vercel du projet de production.
• Contrôlez la mention d'information RGPD sous le formulaire.

Sur ce dernier point, la CNIL demande d'informer les personnes sur la finalité, le destinataire et la durée de conservation des données collectées par un formulaire. Pensez à informer les visiteurs : ajoutez un lien vers votre politique de confidentialité.

Questions fréquentes

Et après : comment suivre les demandes reçues ?

Un formulaire qui envoie des emails ne fait que la moitié du travail : encore faut-il répondre vite. Trois réglages simples suffisent au départ. Une réponse automatique de confirmation (« j'ai bien reçu votre message, je réponds sous 24 heures ») rassure le visiteur. Un transfert de chaque message vers un tableur ou un CRM léger évite de fouiller la boîte mail. Une règle personnelle de relance sous 24 heures évite que les demandes s'enlisent. Avec Tally, ses intégrations (à vérifier dans sa liste) peuvent couvrir le deuxième point sans code ; avec Resend, demandez à Claude Code d'ajouter l'écriture dans votre base après l'envoi.

Pour la suite du déploiement (nom de domaine, mise en ligne, Vercel), le guide sur la création de site avec Claude prend le relais, et déployer sur Vercel avec Next.js détaille la partie hébergement. Si vous voulez aller plus loin dans la configuration de votre environnement de travail, voyez configurer Claude au quotidien. Et pour apprendre à confier ce type de tâche à Claude de façon fiable, travailler avec Claude au quotidien en cohorte vous fait construire vos propres projets, dont un site en ligne, avec un accompagnement en direct.