TUTORIEL PAS À PAS · ARCHITECTURE MODERNE

Créer un formulaire de contact sans serveur SMTP — Guide complet | Lugatu

Découvrez comment recueillir les demandes de vos visiteurs en toute sécurité sans gérer d’identifiants SMTP, sans configurer de serveur mail ni subir de problèmes de délivrabilité.

Obtenir un point de terminaison gratuit → Voir l’exemple React

1. Les limites des formulaires SMTP traditionnels

Les connexions SMTP sur les ports 25 ou 587 sont fréquemment bloquées sur les plateformes Jamstack et serverless. De plus, les identifiants expirés et les filtres antispam causent des pertes de messages silencieuses.

warning

Ne stockez jamais de mots de passe SMTP dans un dépôt Git ou du code client. Utilisez des points de terminaison d’ingestion HTTPS sécurisés.

2. Étape 1 : Le formulaire HTML avec protection honeypot

Construisez un formulaire HTML sémantique. Ajoutez un champ honeypot masqué que les visiteurs humains laissent vide mais que les robots automatisés remplissent.

contact-form.html html

<!-- Vanilla HTML Form with Lugatu Form Endpoint -->
<form id="inquiry-form">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Work Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Project Details</label>
  <textarea id="message" name="message" rows="4" required></textarea>

  <!-- Built-in Honeypot Bot Trap -->
  <input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

  <button type="submit">Send Inquiry</button>
</form>

<script>
document.getElementById('inquiry-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const data = new FormData(form);

  const payload = {
    fields: {
      name: data.get('name'),
      email: data.get('email'),
      message: data.get('message')
    },
    honeypot: data.get('_gotcha') || ''
  };

  const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body: JSON.stringify(payload)
  });

  if (res.ok) {
    alert('Inquiry sent successfully!');
    form.reset();
  }
});
</script>

3. Étape 2 : Envoi sécurisé via l’API Fetch

Interceptez la soumission avec JavaScript et transmettez les champs au format JSON à l’API Lugatu pour obtenir un retour instantané.

4. Modes de notification flexibles et conservation durable

Même si les quotas d'e-mails sortants sont atteints, toutes les soumissions restent conservées dans la boîte de réception de votre espace de travail. Vous pouvez choisir des alertes instantanées, des résumés quotidiens ou des résumés hebdomadaires par formulaire.

Invariant de sécurité et d'authentification

Règle antispam : associez toujours vos points de terminaison publics à des champs honeypot. Ne divulguez jamais de clés API privées dans le code client.

Dépannage et erreurs d’ingestion courantes

Erreur CORS lors de l’envoi depuis le navigateur

Lugatu autorise les requêtes JSON depuis tous les domaines vers /api/v1/public/forms/.... Vérifiez l’exactitude de l’URL ciblée.

Foire aux questions

Cette méthode fonctionne-t-elle sur GitHub Pages ?

Oui, absolument. Lugatu prenant en charge l’ensemble du traitement backend, le formulaire fonctionne de manière identique sur GitHub Pages, Vercel ou Netlify.

Prêt à créer votre point de terminaison de formulaire ?

Commencez gratuitement en quelques secondes. Aucune carte de crédit requise.

Commencez gratuitement →