Éditeur de modèle

Un modèle est l’e-mail que Frontmail génère et envoie : objet, destinataires, corps HTML et texte, plus un schéma des paramètres que votre formulaire ou votre code renseigne. Cette page passe en revue la liste des modèles et chaque partie de l’éditeur. Pour les concepts sous-jacents, voir Modèles HTML, Handlebars et Paramètres et types.

Créer et modifier des modèles nécessite le rôle Propriétaire, Administrateur ou Développeur. Les lecteurs et les membres Facturation ouvrent les modèles en Lecture seule – ils peuvent tout consulter et utiliser Exporter (.json), mais pas modifier ni envoyer.

La liste des modèles

Ouvrez Modèles dans le menu latéral.

Chaque ligne affiche le Nom (avec la description en dessous), l’ID du modèle (tpl_…, nécessaire dans votre code), la Langue, le nombre de Paramètres et la date de dernière modification (Modifié), avec la version actuelle (p. ex. il y a 2 heures · v3).

Limite de modèles et modèles gelés

Le nombre de modèles dépend de votre forfait – Free 3, Starter 10, Pro et Business illimité. Quand vous atteignez la limite, la liste indique Vous utilisez 3 modèles sur les 3 de votre forfait. et les boutons de création de modèles sont désactivés. Les propriétaires et les membres Facturation y trouvent directement un bouton pour passer à un forfait supérieur.

Après un passage à un forfait inférieur, les modèles au-delà de la nouvelle limite sont Gelés (ceux modifiés le moins récemment). Un modèle gelé conserve son contenu et ses versions, mais l’envoi avec ce modèle échoue jusqu’à ce que vous repassiez à un forfait supérieur. Voir Changements de forfait.

Créer un modèle

Trois boutons se trouvent au-dessus de la liste.

Nouveau modèle (de zéro)

1. Cliquez sur Nouveau modèle.
2. Saisissez un Nom et choisissez la Langue du modèle.
3. Cliquez sur Créer.

Cette langue devient la langue par défaut du modèle. Vous pouvez la changer plus tard pour n’importe quelle autre langue dans Paramètres → Général → Langue par défaut et ajouter d’autres langues dans la barre Langues.

Le nouveau modèle démarre comme un simple e-mail de formulaire de contact : paramètres name, email et message, À réglé sur votre propre adresse et Reply-To sur {{email}}. Le CAPTCHA est exigé si votre organisation a ajouté ses clés Turnstile, sinon il est désactivé au départ. Adaptez-le à vos besoins.

Depuis la galerie

1. Cliquez sur Depuis la galerie.
2. Choisissez la langue en haut à droite et filtrez par Catégorie (Formulaires, Entreprise, Réservations, E-commerce…).
3. Cliquez sur Aperçu pour voir un modèle en taille réelle.
4. Cliquez sur Utiliser ce modèle. Une copie est créée dans votre organisation et s’ouvre dans l’éditeur.

Les modèles de la galerie sont responsive, prennent en charge le mode sombre et sont fournis avec des données d’exemple. Voir Galerie de modèles.

Importer

1. Cliquez sur Importer.
2. Choisissez un Fichier – un fichier .html ou un modèle exporté depuis Frontmail (.json) – ou collez du HTML dans Ou collez du HTML. Les fichiers peuvent peser jusqu’à 2 Mo.
3. Vérifiez le Nom et cliquez sur Importer.

Un export .json apporte le contenu, les paramètres, les variantes linguistiques et la plupart des réglages. Le service, le service de secours et le modèle de réponse automatique ne font pas partie de l’export : redéfinissez-les dans Paramètres. Après l’import de HTML brut, ouvrez Paramètres (le sous-onglet de Contenu) et cliquez sur Détecter depuis le modèle.

L’éditeur en un coup d’œil

L’en-tête affiche le nom du modèle, sa version (p. ex. v3) et des badges : Modifications non enregistrées tant que vous avez des modifications en cours, Gelé et Lecture seule le cas échéant. À droite :

• Envoyer un test – voir E-mails de test,
• Enregistrer – voir Enregistrement,
• Plus d’actions (⋯) – Exporter (.json), Remplacer le HTML et Supprimer.

Sous l’en-tête se trouvent la barre Langues, puis quatre onglets : Contenu, Paramètres, Extraits de code et Versions.

Note

Dans l’interface française, l’onglet des réglages du modèle et le sous-onglet du schéma des paramètres s’appellent tous deux Paramètres. Dans cette page, « onglet Paramètres » désigne les réglages du modèle, et « sous-onglet Paramètres » le schéma des paramètres dans Contenu.

Langues

La barre Langues affiche la langue par défaut du modèle (marquée Par défaut) et une pastille par traduction. Cliquez sur une langue pour la modifier ; tout ce qui se trouve dans les onglets en dessous s’applique alors à cette langue. Une traduction peut porter le badge Obsolète (la langue par défaut a changé depuis son enregistrement) ou Automatique (traduite automatiquement).

• Ajouter une langue – ajoute une traduction : une copie de la langue par défaut, une traduction automatique avec la propre clé API de votre organisation, ou une traduction vide.
• Lorsqu’une traduction est sélectionnée : Traduire à nouveau, Marquer comme à jour (pour une traduction obsolète) et Supprimer la langue.

Seuls l’objet, le HTML, le texte et le nom de l’expéditeur sont traduits – les destinataires, les paramètres et les réglages sont communs à toutes les langues. Voir Traductions des modèles.

Contenu

À gauche vous modifiez, à droite vous voyez l’aperçu en direct et les vérifications. Le champ Objet se trouve en haut ; en dessous figurent cinq sous-onglets.

HTML

Un éditeur de code complet pour le corps HTML, avec coloration syntaxique Handlebars. Tapez {{ pour obtenir des suggestions pour vos paramètres, des helpers comme #if et #each, et des variables système. Voir le guide Handlebars.

Visuel

Un éditeur de texte enrichi simple pour les modèles essentiellement textuels : Gras, Italique, Titre 1, Titre 2, listes, Citation, Lien, Annuler/Rétablir et Insérer un paramètre. Il ne modifie que le contenu de <body> ; l’en-tête et les styles restent inchangés.

Beaucoup de modèles sont trop riches pour lui. Si le HTML utilise des tableaux de mise en page, des styles en ligne, des div ou des images, des blocs Handlebars (#if, #each) ou des classes CSS, vous voyez Ce modèle est trop complexe pour l’éditeur visuel avec les raisons. Vous pouvez :

• Continuer en HTML – revenir à l’éditeur de code (recommandé),
• Modifier quand même (simplifier) – ouvrir l’éditeur visuel ; un enregistrement depuis celui-ci supprime la mise en page et ne conserve qu’une mise en forme simple.

Texte

La version texte brut envoyée avec le HTML. Par défaut, elle est générée automatiquement à partir du HTML (La version texte est générée automatiquement à partir du HTML.). Cliquez sur La rédiger moi-même pour la modifier à la main – le texte généré actuel sert de point de départ. Vous pouvez réactiver la génération automatique dans Paramètres → Message → Générer automatiquement la version texte.

Données d’exemple

Un formulaire généré à partir de vos paramètres. Les valeurs servent à l’aperçu et aux e-mails de test – elles ne sont jamais envoyées avec les vrais e-mails. Les listes disposent de Ajouter un élément, Monter, Descendre et Retirer l’élément. Si une valeur enfreint une règle (trop longue, mauvais type, valeur obligatoire manquante), le champ affiche l’erreur, exactement comme le ferait l’API.

Paramètres

Le schéma des paramètres : le Nom, le Type de chaque paramètre et s’il est Obligatoire.

Détecter les paramètres depuis le modèle

1. Utilisez vos paramètres dans le HTML, l’objet ou les destinataires, p. ex. {{name}}.
2. Cliquez sur Détecter depuis le modèle.

Frontmail ajoute chaque paramètre trouvé et indique combien sont nouveaux (2 nouveaux paramètres trouvés.). Frontmail devine le type de chacun à partir de son nom et de son utilisation (par exemple, un paramètre utilisé dans {{#each}} devient une liste) – vérifiez ensuite les types et les règles.

Ajouter ou modifier un paramètre

1. Cliquez sur Ajouter un paramètre, ou sur le crayon à côté d’un paramètre existant.
2. Renseignez :
   • Nom – lettres, chiffres, _ et -, doit être unique,
   • Type – Texte (une ligne), Texte (plusieurs lignes), E-mail, URL, Nombre, Oui / non, Date, Choix, HTML (nettoyé) ou Liste,
   • Libellé et Description – affichés dans le formulaire des données d’exemple,
   • Obligatoire,
   • les règles propres au type : Longueur min., Longueur max. et Motif (regex) pour les types texte, Minimum/Maximum pour les nombres, Valeurs autorisées pour un choix (séparées par des virgules), Champs de l’élément et Éléments min./Éléments max. pour les listes (p. ex. name:string!, qty:number – ! signifie obligatoire),
   • Valeur par défaut et Valeur d’exemple (JSON pour les listes).
3. Cliquez sur Enregistrer.

Supprimez un paramètre avec l’icône de corbeille. Les types et les règles sont expliqués dans Paramètres et types.

Aperçu en direct

L’aperçu génère le modèle exactement comme l’expéditeur, avec vos données d’exemple, au fil de la saisie. Au-dessus, vous pouvez basculer entre :

• Ordinateur / Mobile – la largeur de l’aperçu,
• Clair / Sombre – simule une application de messagerie en mode sombre (vos styles prefers-color-scheme),
• HTML / Texte – la version HTML ou la version texte brut.

Au-dessus de l’e-mail figurent l’Objet, le champ À et le Reply-To générés. Si le modèle ne peut pas être généré (par exemple un {{#if}} non fermé), vous voyez Impossible de générer le rendu du modèle avec l’erreur. Avec le forfait Free, l’aperçu inclut le pied de page Envoyé via Frontmail, comme les vrais e-mails. Plus d’informations dans Aperçu et envois de test.

Vérifications

Sous l’aperçu, Vérifications liste les problèmes au fil de la saisie – par exemple des paramètres utilisés mais non définis, définis mais inutilisés, du Handlebars invalide, un texte alt manquant ou un e-mail trop volumineux. Chaque élément est une Erreur ou un Avertissement, souvent avec le numéro de ligne. L’onglet Contenu affiche le nombre de problèmes dans un badge. Tout semble en ordre. signifie qu’il n’y a rien à corriger.

Les erreurs bloquent l’enregistrement des modifications du contenu (Corrigez les erreurs signalées dans les vérifications avant d’enregistrer.) ; les avertissements non.

Paramètres du modèle

Général

• Nom et Description – pour vous et votre équipe.
• Langue par défaut – la langue du contenu principal, envoyée lorsque l’expéditeur ne demande aucune langue ou une langue que le modèle n’a pas. Toutes les langues sont possibles. Elle détermine aussi le format des dates et des nombres ainsi que le pied de page du forfait Free des e-mails dans cette langue.

Message

Tous les champs peuvent contenir des paramètres, p. ex. {{name}}.

• Objet (le même champ que dans l’onglet Contenu).
• À – séparez plusieurs adresses par des virgules.
• Nom de l’expéditeur et E-mail de l’expéditeur – l’expéditeur doit être autorisé pour votre service. Laissez E-mail de l’expéditeur vide pour utiliser l’expéditeur par défaut du service.
• Reply-To, CC, BCC.
• Intégrer le CSS en ligne à l’enregistrement – déplace les styles dans des attributs style, car de nombreux clients de messagerie ignorent <style>.
• Générer automatiquement la version texte – recommandé ; la version texte est créée à partir du HTML à chaque enregistrement.

Envoi

• Service – le service d’envoi qui envoie ce modèle. Service par défaut suit le service qui est actuellement défini par défaut.
• Service de secours – utilisé automatiquement lorsque le service principal échoue. Choisissez Aucun pour ne pas avoir de secours. Voir Service de secours.
• Modèle de réponse automatique – un autre modèle envoyé à la personne qui a rempli le formulaire, après l’envoi de cet e-mail. Voir Réponse automatique.

Protection

• Exiger un CAPTCHA (Turnstile) – recommandé pour les formulaires publics ; bloque les bots avant qu’ils ne vous coûtent des crédits. Les nouveaux modèles l’ont activé dès que votre organisation a ajouté ses propres clés Turnstile dans Sécurité → Protection contre les bots (Turnstile). Sans clés, l’interrupteur ne peut pas être activé et une note renvoie vers la page Sécurité. Si Autoriser les applications mobiles est activé, vous pouvez tout de même l’activer – l’éditeur avertit que les applications mobiles fonctionneront (elles utilisent la clé partagée de Frontmail), mais que les requêtes des sites web échoueront avec captcha_not_configured tant que vous n’aurez pas ajouté de clés. Voir Turnstile.
• Autoriser un destinataire dynamique – permet aux paramètres de définir À/CC/BCC. Avec la clé publique, le contenu d’un tel modèle est verrouillé : le CAPTCHA est obligatoire, l’expéditeur, son nom et le Reply-To doivent être fixes, les paramètres HTML ne sont pas acceptés, les textes sont limités à 500 caractères et les liens ne peuvent pointer que vers des domaines autorisés. Sans CAPTCHA, l’éditeur affiche un avertissement avec un lien pour configurer Turnstile – ou envoyez le modèle depuis votre serveur avec une clé privée.
• N’autoriser que les liens vers des domaines autorisés – applique la liste des domaines de liens autorisés à chaque requête, y compris les envois par clé privée. Activé par défaut pour les modèles de la galerie avec un destinataire dynamique.
• Autoriser les pièces jointes du formulaire – accepte les fichiers envoyés avec la requête. La taille maximale dépend de votre forfait.
• Pièces jointes statiques – des fichiers joints à chaque e-mail de ce modèle. Voir Pièces jointes.

Collecte des contacts

Cochez Collecter les contacts de ce modèle pour enregistrer chaque personne qui remplit le formulaire dans Contacts. Choisissez ensuite le Paramètre e-mail, éventuellement le Paramètre nom, et listez les Champs supplémentaires (noms de paramètres, séparés par des virgules) à conserver avec le contact. Voir Collecte des contacts.

Extraits de code

Du code prêt à coller pour HTML / JS, React, Vue, Svelte, React Native, Node.js et cURL, déjà rempli avec votre clé publique, le service et l’ID du modèle et tous ses paramètres.

Quand le modèle exige le CAPTCHA, les extraits web incluent le widget Turnstile avec la clé de site de votre organisation (YOUR_TURNSTILE_SITE_KEY comme espace réservé si vous n’avez pas encore ajouté de clés), et l’extrait React Native utilise <TurnstileWebView> avec la clé mobile partagée de Frontmail – aucune clé de site n’est nécessaire.

Si le modèle a des traductions, choisissez la Langue au-dessus du code pour ajouter l’option locale ; sans elle, les e-mails sont envoyés dans la langue par défaut.

La clé publique peut être utilisée sans risque dans le navigateur. Les extraits Node.js et cURL sont destinés aux serveurs, où vous utilisez plutôt une clé privée – voir Clés publiques et privées.

Envoyer un e-mail de test

1. Cliquez sur Envoyer un test.
2. Saisissez l’adresse dans Envoyer à (votre propre adresse est préremplie).
3. Si le modèle a des traductions, choisissez la Langue (celle ouverte dans l’éditeur est présélectionnée).
4. Choisissez éventuellement un autre Service ; Service du modèle utilise celui défini dans les Paramètres.
5. Cliquez sur Envoyer un test.

Le test utilise le contenu actuel, non enregistré avec vos données d’exemple, vous pouvez donc essayer des modifications avant de les enregistrer. L’objet commence par [Test]. Les e-mails de test sont gratuits : jusqu’à 20 par organisation et par jour (décomptés en UTC), indiqués sous la forme Encore N e-mails de test sur 20 aujourd’hui. Ils apparaissent dans l’Historique avec la mention test.

Versions

Chaque enregistrement du contenu du modèle crée une nouvelle version. L’onglet Versions les liste avec la Version, l’Auteur, l’heure d’enregistrement (Enregistré) et la Note ; la version courante est marquée actuelle.

• Modifications – ce qui a changé par rapport à la version précédente.
• Comparer avec l’actuelle – les différences entre cette version et la version courante.

La comparaison s’ouvre sous la liste. Basculez entre HTML, Texte, Objet, Paramètres et Destinataires pour voir chaque partie.

Restaurer une version antérieure

1. Cliquez sur Restaurer à côté de la version.
2. Confirmez. Si vous avez des modifications non enregistrées, elles sont remplacées.

La restauration crée une nouvelle version avec l’ancien contenu – rien n’est perdu. Les réglages du modèle (service, protection, collecte des contacts) ne sont pas versionnés. Voir Versions, différences et restauration.

Lorsqu’une traduction est sélectionnée dans la barre Langues, l’onglet affiche à la place les versions propres à cette traduction, avec les colonnes Basée sur (la version de la langue par défaut sur laquelle elle a été enregistrée) et Origine (Manuelle ou Automatique).

Enregistrement et versions

• Cliquez sur Enregistrer ou appuyez sur Ctrl + S (⌘ + S sur Mac). Vous voyez Enregistré en version N.
• Les modifications du contenu (objet, HTML, texte, destinataires, paramètres) créent une nouvelle version ; les modifications du nom et des réglages sont enregistrées sans nouvelle version.
• Si vous essayez de quitter l’éditeur avec des modifications non enregistrées, le navigateur vous demande de confirmer.

Quand quelqu’un d’autre a enregistré entre-temps

Si un collègue a enregistré le modèle pendant que vous le modifiiez, Frontmail n’écrase pas son travail en silence. La boîte de dialogue Quelqu’un d’autre a enregistré ce modèle propose :

• Comparer le HTML – afficher son HTML à côté du vôtre,
• Recharger leur version – charger sa version ; vos modifications sont perdues,
• Garder la mienne – enregistrer votre version par-dessus la sienne.

Astuce

Les messages enregistrent toujours la version du modèle avec laquelle ils ont été générés. Les e-mails en attente dans la file d’attente des e-mails retenus sont envoyés avec la version qui était actuelle au moment de leur acceptation.

Remplacer le HTML, exporter et supprimer

Ces trois actions se trouvent dans le menu Plus d’actions (⋯).

• Remplacer le HTML – téléversez un fichier .html ou collez du HTML pour remplacer le corps de ce modèle. Les paramètres ne sont pas modifiés – vérifiez-les (ou utilisez Détecter depuis le modèle) et enregistrez.
• Exporter (.json) – télécharge le modèle, traductions comprises, sous forme de fichier .frontmail.json que vous pouvez importer dans une autre organisation.
• Supprimer – supprime le modèle avec toutes ses versions et traductions. Les e-mails déjà envoyés restent dans l’Historique.