Tutoriel : un formulaire de contact en 15 minutes

Dans ce tutoriel, vous ajoutez un formulaire de contact à votre site web. Quand un visiteur l’envoie :

1. vous recevez le message dans votre boîte de réception, et un clic sur Répondre répond directement au visiteur,
2. le visiteur reçoit un court e-mail du type « merci, nous avons bien reçu votre message »,
3. les bots sont arrêtés avant de vous coûter quoi que ce soit.

Aucun serveur à écrire ni à héberger. Le formulaire communique avec Frontmail directement depuis le navigateur grâce à votre clé publique ; Frontmail vérifie d’où vient la requête, génère votre modèle et envoie l’e-mail via votre propre compte de messagerie ou fournisseur.

Envie de voir d’abord le résultat ?

La démo en ligne fait tourner le même type de formulaire en React, Svelte et Vue, avec le code juste à côté.

Ce qu’il vous faut

• Un compte Frontmail. Créez-le sur app.frontmail.dev – le forfait Free suffit. Confirmez votre adresse e-mail, sinon vous pourrez explorer, mais pas envoyer.
• Un compte e-mail depuis lequel envoyer. N’importe quelle boîte SMTP (Seznam, Zoho, votre hébergeur web…), un compte Gmail ou Outlook, ou un fournisseur par API comme Resend ou Postmark.
• Un site web dont vous pouvez modifier le HTML. Une page statique convient. Pour tester en local, un serveur de développement sur localhost fonctionne aussi.
• Environ 15 minutes.

Vous avez déjà suivi « Premiers pas » ?

Après la création de votre organisation, le tableau de bord propose un court assistant de configuration. Il couvre les mêmes points que les étapes 1, 2, 4 et 6 de ce tutoriel. Si vous l’avez terminé, parcourez rapidement ces étapes et concentrez-vous sur la réponse automatique et le formulaire lui-même.

Les étapes

Chaque étape est courte et se termine par un lien vers la suivante.

1. Connecter un service d’envoiIndiquez à Frontmail quel compte ou fournisseur envoie vos e-mails.

2. Créer le modèle de contactPartez de la galerie, vérifiez le destinataire et prévisualisez avec des données d’exemple.

3. Ajouter une réponse automatiqueUn second modèle qui remercie le visiteur, associé au premier.

4. Autoriser votre site webLimitez votre clé publique à votre domaine et activez le CAPTCHA.

5. Créer le formulaireDu HTML simple plus le SDK navigateur depuis le CDN.

6. Tester et suivre la distributionEnvoyez un test gratuit, soumettez le vrai formulaire et suivez-le dans l’Historique.

Pressé ? Le Démarrage rapide présente le même parcours sur une seule page, sans les explications.