Formulaire de contact avec réponse automatique

Le guide complet – un formulaire de contact qui vous envoie un e-mail et remercie le visiteur – se trouve désormais dans le Tutoriel. Les étapes les plus importantes pour cette recette :

Créer le modèle de contactÉtape 2 du tutoriel : le modèle Formulaire de contact de la galerie.

Ajouter une réponse automatiqueÉtape 3 du tutoriel : un e-mail de remerciement associé dans Paramètres → Envoi.

Créer le formulaireÉtape 5 du tutoriel : du HTML simple avec sendForm() et Turnstile.

Une fois que tout fonctionne, ces compléments valent le détour.

Enregistrer les expéditeurs comme contacts

Le modèle de galerie Formulaire de contact a déjà la Collecte des contacts activée (onglet Paramètres du modèle → Collecte des contacts, Collecter les contacts de ce modèle) avec Paramètre e-mail email et Paramètre nom name. Chaque message envoyé avec succès crée ou met à jour une entrée dans Contacts. Ajoutez d’autres paramètres sous Champs supplémentaires, séparés par des virgules, pour les conserver aussi avec le contact. Voir Collecte des contacts.

Demander plus qu’un message

Ajoutez des champs au modèle dans l’onglet Paramètres, puis ajoutez à votre formulaire des champs avec le même name. Les valeurs du formulaire arrivent sous forme de texte et Frontmail les convertit dans le type déclaré, par exemple :

Paramètre	Type	Champ du formulaire
`topic`	`enum` avec Valeurs autorisées `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Valeur par défaut `false`	`<input type="checkbox" name="newsletter">` – coché devient `true`, non coché utilise la valeur par défaut

{{#if newsletter}}<p>Souhaite recevoir la newsletter.</p>{{/if}}

Détails : conversion des données de formulaire.

Afficher les erreurs de validation à côté des champs

Quand une valeur enfreint une règle de paramètre (e-mail invalide, champ obligatoire manquant, message trop court), la requête échoue avec invalid_template_params et rien n’est envoyé. L’erreur liste chaque problème, vous pouvez donc l’afficher au bon champ :

try {
  await frontmail.sendForm(null, 'tpl_…', form);
} catch (err) {
  form.querySelectorAll('.field-error').forEach((el) => (el.textContent = ''));
  for (const issue of err.details?.issues ?? []) {
    // p. ex. <small class="field-error" data-for="email"></small> sous chaque champ
    const el = form.querySelector(`.field-error[data-for="${issue.param}"]`);
    if (el) el.textContent = issue.message;
  }
}

Voir Gestion des erreurs.

Le protéger contre le spam

Les sites autorisés et le CAPTCHA Turnstile (étape 4 du tutoriel) bloquent la plupart des abus. Pour un formulaire public très fréquenté, vous pouvez aussi :

activer Bloquer les navigateurs headless dans Sécurité → Protection contre les abus,
abaisser la Rate limit par IP,
remplir une Liste de blocage avec les adresses ou domaines dont vous ne voulez jamais recevoir de messages,
ajouter un Service de secours au modèle (Paramètres → Envoi) pour qu’une panne du fournisseur ne retarde pas vos messages.

Voir Protection contre les bots.