Comment ajouter un formulaire de contact à votre site web sans backend

Vous allez créer un formulaire HTML ordinaire qui envoie chaque soumission dans votre boîte de réception. L’e-mail est envoyé par Frontmail via la boîte mail que vous utilisez déjà (Gmail, Outlook, n’importe quel serveur SMTP ou un fournisseur transactionnel) : vous n’avez aucun serveur à faire tourner.

Il vous faut : un compte Frontmail gratuit et une dizaine de minutes.

1. Connectez votre boîte mail

1. Dans le tableau de bord, ouvrez Services d’envoi et cliquez sur Ajouter un service.
2. Choisissez votre fournisseur. Gmail et Outlook se connectent avec votre compte (aucun mot de passe n’est stocké) ; SMTP, Resend, Postmark, Mailgun et les autres demandent une clé API ou des identifiants.
3. Cochez Définir par défaut et cliquez sur Vérifier et enregistrer. Frontmail vérifie les identifiants sans rien envoyer.

2. Créez le modèle depuis la galerie

1. Ouvrez Modèles → Depuis la galerie et choisissez Formulaire de contact (catégorie Formulaires).
2. Cliquez sur Utiliser ce modèle. To est votre propre adresse et Reply-To celle du visiteur : un simple clic sur Répondre lui répond directement.

Le modèle attend ces paramètres – ils deviennent les attributs name des champs de votre formulaire :

Paramètre	Obligatoire	Description
name	oui	Le nom du visiteur
email	oui	L’adresse du visiteur (validée)
phone	non	Numéro de téléphone
topic	non	Sujet, repris dans l’objet de l’e-mail
message	oui	Le message

3. Autorisez votre site web

Votre clé publique figure dans le code source de la page, et c’est normal – mais seul votre site doit pouvoir l’utiliser.

1. Ouvrez Sécurité et ajoutez votre domaine sous Sites autorisés (par exemple example.com et www.example.com ; ajoutez localhost pendant le développement). Cliquez sur Enregistrer.
2. Recommandé : créez un widget Cloudflare Turnstile gratuit pour vos noms d’hôte, collez sa site key et sa secret key dans Sécurité → Protection contre les bots et cliquez sur Activer le CAPTCHA pour tous les modèles. Les bots ne peuvent alors plus utiliser votre formulaire, et la vérification reste le plus souvent invisible pour les humains.

4. Ajoutez le formulaire à votre page

Copiez la clé publique (Sécurité) et l’ID du modèle (onglet Extraits de code du modèle), puis collez ce code à l’endroit où le formulaire doit apparaître :

<form id="contact">
  <label>Name <input name="name" required maxlength="200" /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Turnstile adds a hidden cf-turnstile-response field; leave it out if you skipped the CAPTCHA -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</button>
  <p id="form-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('contact');
  const status = document.getElementById('form-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      // null = your default service
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thank you! We’ll get back to you soon.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset(); // a Turnstile token works only once
    }
  });
</script>

sendForm() lit les champs d’après leur name : le formulaire et le modèle restent synchronisés sans code de correspondance. Les erreurs réseau et les incidents serveur sont relancés automatiquement avec la même clé d’idempotence – un visiteur ne vous enverra jamais deux fois le même message.

5. Testez

Ouvrez la page, remplissez le formulaire et envoyez-le. L’e-mail arrive dans votre boîte de réception en quelques secondes, et l’Historique du tableau de bord affiche le message avec sa chronologie complète.

Si quelque chose ne fonctionne pas, l’erreur vous en indique la raison :

• origin_not_allowed – le domaine de la page ne figure pas dans Sites autorisés (vérifiez le www et le port).
• captcha_required – le modèle exige Turnstile, mais le widget manque dans le formulaire.
• invalid_template_params – un champ obligatoire est vide ou une valeur ne correspond pas au paramètre.

Plus de crédits pendant une semaine chargée ? Le message n’est pas perdu : il est accepté avec le statut held et part automatiquement dès que vous rechargez vos crédits.

Étapes suivantes

• Envoyez une confirmation au visiteur : ajoutez le modèle Réponse automatique : merci pour votre message depuis la galerie et sélectionnez-le dans Paramètres → Envoi du modèle de contact.
• Vous utilisez React, Vue ou Svelte ? Les paquets pour ces frameworks incluent un composant FrontmailForm prêt à l’emploi avec le widget Turnstile intégré – consultez la documentation du SDK.