Formulaires

Le principe en 30 secondes

Dans Le Labo du Yeti, tu ne crées pas un formulaire dans une interface compliquée. Tu poses simplement un <form data-cms-form="contact"> dans ton HTML (layout, page, article, cocon — peu importe), et le CMS le détecte automatiquement. Il apparaît alors dans la section Formulaires de la sidebar, prêt à être configuré.

Cette approche a un gros avantage : tu peux refondre ton design quand tu veux, déplacer un formulaire d'une page à une autre, ou changer ses champs — la configuration reste attachée à l'identifiant du formulaire, pas à un endroit précis du site.

Workflow complet

1. Pose un formulaire dans ton HTML. Que ce soit dans le layout global (formulaire footer), dans une page (contact dédié), dans un article ou dans un template cocon, ajoute simplement data-cms-form="contact" (ou un autre identifiant de ton choix) à la balise <form>.
2. Ouvre la section Formulaires. Dans la sidebar à gauche, clique sur Formulaires. Le CMS scanne tous les templates et liste les formulaires détectés.
3. Repère son statut. Chaque formulaire affiche un badge coloré qui indique où il en est (voir tableau plus bas).
4. Clique sur Configurer (ou Éditer). Renseigne l'email de réception, le sujet du mail, le message de succès, et — si tu le souhaites — une URL de redirection après envoi.
5. Teste le formulaire. Le bouton Tester envoie un email de test à l'adresse renseignée. Si l'email arrive, le SMTP est bon et le formulaire est prêt.
6. Active le runtime JavaScript. Pour que le formulaire s'envoie sans recharger la page (AJAX) et bénéficie de la protection anti-spam, inclus le runtime dans ton layout (voir section dédiée).
7. Surveille les soumissions. Chaque envoi est loggé. L'UI affiche pour chaque formulaire le nombre total de soumissions, celles validées, celles bloquées comme spam, et celles qui n'ont pas pu partir.

Les trois statuts d'un formulaire

Le CMS classe chaque formulaire détecté dans une de ces trois catégories. La couleur du badge te dit en un coup d'œil ce qu'il reste à faire.

Configurer un formulaire en détail

Quand tu cliques sur Configurer à côté d'un formulaire détecté, un panneau s'ouvre avec quatre champs simples.

Email de réception

L'adresse à laquelle seront envoyées les soumissions. Tu peux mettre une seule adresse, ou plusieurs séparées par des virgules (par exemple contact@monsite.com, commercial@monsite.com). C'est le seul champ obligatoire.

Sujet de l'email (optionnel)

Le sujet du mail qui arrive dans ta boîte. Si tu laisses vide, le CMS utilise par défaut Formulaire <id> — par exemple Formulaire contact ou Formulaire devis. Très pratique pour distinguer rapidement les types de demandes dans ta boîte.

Message de succès

Le texte que verra le visiteur après avoir cliqué sur Envoyer. Reste sobre et rassurant, par exemple : « Merci, ton message a bien été envoyé. Nous te répondrons sous 24 heures. »

URL de redirection (optionnel)

Si tu préfères rediriger l'utilisateur vers une page de remerciement dédiée (utile pour le tracking conversion Google Ads / Meta), renseigne ici l'URL relative, par exemple /merci.html. Si tu laisses vide, c'est le message de succès qui s'affichera à la place.

Tester le formulaire avant la mise en ligne

Une fois la configuration enregistrée, un bouton Tester apparaît à côté du formulaire. En cliquant dessus, le CMS envoie immédiatement un email de test à l'adresse de réception configurée, avec un contenu fictif.

C'est le moment de vérité : si l'email arrive bien dans ta boîte (ou dans les spams — pense à vérifier les deux), c'est que ton SMTP est bien configuré et que le formulaire est prêt à recevoir de vraies soumissions. Si rien n'arrive, l'erreur s'affiche directement dans l'UI (en général un problème d'authentification SMTP, ou un mot de passe d'application manquant pour Gmail).

Activer le runtime AJAX et l'anti-spam

Par défaut, un <form> HTML se soumet en rechargeant la page entière. Pour offrir une meilleure expérience (envoi en arrière-plan, message de succès affiché sans recharger) et activer le honeypot anti-spam, il faut inclure un petit script JavaScript dans ton layout global.

Dans ton layout.html, juste avant la fermeture </body>, ajoute cette ligne :

<script src="/api/forms/runtime.js"></script>

Ce script est servi directement par le CMS, il n'y a rien d'autre à installer. Une fois en place, il :

• Intercepte la soumission de tous les <form data-cms-form> de la page
• Envoie les données en AJAX vers l'API du CMS
• Affiche le message de succès ou redirige vers l'URL configurée
• Insère automatiquement un champ honeypot invisible pour piéger les robots spammeurs
• Affiche les erreurs de validation côté client

Configurer le SMTP (étape préalable)

Sans serveur SMTP configuré, les formulaires ne pourront pas envoyer d'email. C'est la première chose à régler avant même de configurer ton premier formulaire.

1. Dans la sidebar, va dans Réglages puis dans la section Général.
2. Descends jusqu'au bloc SMTP.
3. Renseigne les paramètres fournis par ton hébergeur ou ton service de messagerie : host (ex : smtp.gmail.com), port (587 ou 465 selon le mode), secure (coché pour le port 465, décoché pour 587), user (l'identifiant complet), pass (le mot de passe, ou un mot de passe d'application si tu utilises Gmail/Outlook).
4. Renseigne aussi from : l'adresse qui apparaîtra comme expéditeur. Idéalement, mets ici une adresse du même domaine que ton site (par exemple contact@monsite.com) pour éviter que les emails atterrissent en spam.
5. Enregistre.

Suivre les soumissions

Chaque envoi de formulaire est enregistré dans les logs du CMS, avec un type form_submission et un statut qui te dit immédiatement ce qui s'est passé :

Dans l'UI Formulaires, chaque formulaire affiche un mini-tableau de bord avec : nombre total de soumissions, nombre de succès, nombre de spams bloqués, nombre d'échecs SMTP, et date de la dernière soumission. C'est ton thermomètre — un pic soudain de mail_failed signifie qu'il faut aller vérifier le SMTP, et un volume anormalement élevé de soumissions sent peut indiquer une vague de spam qui passe à travers le honeypot (rare, mais possible).

Bonnes pratiques

• Utilise des identifiants explicites. Préfère data-cms-form="contact" à data-cms-form="form1". Quand tu auras 5 ou 10 formulaires différents, tu remercieras ton toi du passé.
• Un formulaire = un usage. Ne mélange pas contact, devis et rappel dans le même formulaire avec un sélecteur. Crée trois formulaires distincts, chacun avec son propre identifiant et sa propre adresse de réception si besoin.
• Teste après chaque déploiement. Une mise à jour, un changement de mot de passe SMTP, un changement d'hébergeur — autant d'occasions de casser silencieusement l'envoi d'emails. Un test rapide après chaque déploiement t'évite de découvrir trois mois plus tard que personne ne reçoit tes demandes de devis.
• Surveille les logs régulièrement. Un coup d'œil hebdomadaire sur le compteur des soumissions et leur statut te permet de détecter très vite un problème — bien avant qu'un client ne te dise « je vous ai envoyé un message la semaine dernière, sans réponse ».
• Page de remerciement dédiée. Sauf cas spécifique, prévois une vraie page /merci.html avec un message chaleureux, un délai de réponse annoncé, et éventuellement des liens vers d'autres contenus de ton site. C'est meilleur pour l'expérience utilisateur, et indispensable si tu fais de la publicité payante.

Dépannage rapide

Pour aller plus loin

Si tu veux comprendre comment le CMS détecte les formulaires, comment l'API gère les soumissions, et comment ajouter ta propre logique (webhook vers un CRM, validation custom, captcha externe), consulte la documentation technique des formulaires. Tu y trouveras la liste complète des endpoints, le format JSON des payloads, et la structure du runtime JavaScript.

Pour personnaliser le rendu visuel de tes formulaires (champs, boutons, messages d'erreur), garde en tête que tu travailles avec du HTML standard : les CSS de ton layout s'appliquent directement. Aucune classe magique imposée par le CMS — c'est ton terrain de jeu.