Cinq méthodes qui fonctionnent pour recevoir les envois de formulaire de votre site dans votre boîte mail : mailto, un service d'endpoint de formulaire, Netlify Forms, une fonction serverless avec une API d'e-mail, et Google Apps Script. Avec le code JavaScript d'envoi et la protection anti-spam.
Une page web ne peut pas envoyer d'e-mail toute seule. Le formulaire doit transmettre ses données à quelque chose qui le peut : un service d'endpoint de formulaire, la fonction formulaires de votre hébergeur, une fonction serverless qui appelle une API d'e-mail, un Google Apps Script ou votre propre serveur. Choisissez selon le niveau de contrôle voulu, puis envoyez en JavaScript pour que les visiteurs restent sur la page.
Les cinq méthodes comparées
Chaque méthode ci-dessous est accompagnée de son code complet. Commencez par le formulaire et le gestionnaire d'envoi JavaScript, qui fonctionnent avec toutes les méthodes, puis choisissez un backend.
Seulement avec une action mailto:, qui ouvre l'application de messagerie du visiteur avec les informations préremplies. Cela échoue pour toute personne sans application de messagerie configurée, ce qui inclut beaucoup de gens sur des ordinateurs partagés ou professionnels, et vous ne pouvez ni mettre en forme ni valider le résultat. Utilisez une autre méthode pour tout ce qui compte.
Généralement parce que le message prétend venir de l'adresse du visiteur, ou parce que votre domaine n'a pas d'enregistrements SPF, DKIM et DMARC pour le service qui l'envoie. Envoyez depuis une adresse de votre propre domaine, mettez le visiteur en reply-to et ajoutez les enregistrements DNS fournis par votre prestataire d'e-mail.
Un champ caché aux humains mais visible pour les robots simples. Les humains le laissent vide ; les robots le remplissent. Votre backend rejette tout envoi où il contient une valeur. Il bloque beaucoup de spam basique sans gêner les vrais visiteurs.
Pas au début. Commencez par un honeypot et des vérifications côté serveur, comme le rejet des messages remplis de liens. N'ajoutez un test que si le spam continue, et préférez-en un qui ne demande pas de résoudre des énigmes.
Ce front-end fonctionne avec toutes les méthodes. Le script envoie le formulaire avec fetch, affiche un message d'état et conserve le texte si l'envoi échoue.
Les labels englobent leurs champs, le navigateur vérifie les champs obligatoires et le format de l'e-mail, et la ligne d'état est annoncée aux lecteurs d'écran.
Fonctionne avec tout endpoint qui accepte un envoi de formulaire normal. Si l'endpoint attend du JSON, envoyez plutôt JSON.stringify(Object.fromEntries(data)) avec un content type JSON.
Ouvre l'application de messagerie du visiteur avec les champs dans le corps du message. Aucun serveur nécessaire, mais rien n'est envoyé s'il n'a pas d'application de messagerie.
Des services comme Formspree, Basin, Getform et Web3Forms vous donnent une URL où envoyer les données et transfèrent chaque envoi dans votre boîte mail. Inscrivez-vous, créez un formulaire, collez son URL dans l'attribut action du formulaire ci-dessus et gardez le script fetch. Vérifiez les limites gratuites actuelles de chaque service et l'endroit où il stocke les données.
Netlify détecte le formulaire au déploiement quand il porte l'attribut data-netlify. Activez les notifications par e-mail dans les réglages de formulaires du site. Pour les formulaires générés en JavaScript, gardez aussi une copie en HTML simple dans vos fichiers buildés pour que Netlify la trouve.
La fonction reçoit le formulaire, le vérifie et appelle une API d'e-mail avec une clé secrète conservée sur le serveur. Cet exemple utilise l'API REST de Resend ; SendGrid, Postmark et Amazon SES fonctionnent de la même façon avec leurs propres endpoints.
Fonctionne sur les plateformes qui utilisent les objets web Request et Response. Définissez RESEND_API_KEY dans les variables d'environnement de votre hébergeur et vérifiez d'abord votre domaine d'envoi auprès du prestataire d'e-mail.
Un court script, déployé comme web app depuis un compte Google, envoie chaque soumission par e-mail et peut l'enregistrer dans une feuille Sheets. Des quotas quotidiens d'e-mails s'appliquent, il convient donc aux formulaires à faible volume.
Dans un nouveau projet Apps Script, collez ce code, puis déployez-le comme web app qui s'exécute sous votre compte et accessible à tous. Utilisez l'URL de la web app comme action du formulaire.
Les hébergements mutualisés font souvent tourner PHP. La fonction intégrée mail() fonctionne chez beaucoup d'hébergeurs, mais la délivrabilité est meilleure avec une bibliothèque SMTP comme PHPMailer et une vraie boîte mail sur votre domaine.
Rejette les requêtes autres que POST, nettoie les entrées, refuse les retours à la ligne dans l'adresse de réponse (qui permettraient à des attaquants d'ajouter des en-têtes) et redirige vers une page de remerciement.
Commencer gratuitement · Sans carte bancaire