Eleventy

Eleventy produit du HTML statique, donc le formulaire envoie sans aucun JavaScript côté client. Un shortcode garde le markup à un seul endroit et fonctionne de la même façon dans les fichiers Nunjucks, Liquid et Markdown.

Mise en place

1. Ajoutez le shortcode

   const escape = (value) => String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
   
   export default function (eleventyConfig) {
     eleventyConfig.addShortcode("ikiform", (formId, thanks = "", subject = "") =>
       [
         `<form class="ikiform" action="https://ikiform.com/f/${encodeURIComponent(formId)}" method="post">`,
         '<label>Email <input name="email" type="email" autocomplete="email" required></label>',
         '<label>Message <textarea name="message" rows="5"></textarea></label>',
         thanks && `<input type="hidden" name="_redirect" value="${escape(thanks)}">`,
         subject && `<input type="hidden" name="_subject" value="${escape(subject)}">`,
         '<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>',
         '<button type="submit">Send</button>',
         "</form>",
       ]
         .filter(Boolean)
         .join("\n"),
     );
   }

   • Les lignes sont jointes sans ligne vide, et c'est voulu. En Markdown, une ligne vide termine un bloc HTML, et le reste du formulaire serait traité comme du texte.
   • Ceci utilise la syntaxe des modules ES. Si votre package.json n'a pas "type": "module", nommez le fichier eleventy.config.mjs.

2. Gardez l'id du formulaire dans les données globales

   export default {
     formId: process.env.IKIFORM_FORM_ID ?? "frm_xxxxxxxxxxxxxxxx",
     thanks: "https://example.com/thanks/",
   };

   Les données globales sont disponibles dans chaque template sous le nom ikiform. L'URL de remerciement doit être absolue et en https:, car Ikiform ignore les autres redirections.

3. Utilisez-le

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}

   Les fichiers Markdown sont traités avec Liquid par défaut, donc la balise y fonctionne telle quelle. Gardez-la seule sur sa ligne et ne l'indentez pas de quatre espaces, sinon Markdown l'affiche comme un bloc de code. La même balise fonctionne dans les fichiers .njk et .liquid.

_redirect n'est suivi que si le formulaire a des domaines autorisés qui incluent votre site. Voir Règles pour _redirect.

Domaines autorisés

Listez la production et chaque hôte de prévisualisation. Les sites Eleventy sont souvent déployés sur Netlify ou Cloudflare Pages, qui gèrent les prévisualisations différemment.

• N'ajoutez jamais netlify.app ou pages.dev seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Lancez le serveur de développement et affichez le code source de la page. Le formulaire doit être du HTML simple, pas à l'intérieur d'un bloc <pre><code>.
2. Envoyez en local avec localhost dans les domaines autorisés et vérifiez que la soumission apparaît dans Ikiform.
3. Déployez une prévisualisation et envoyez à nouveau depuis l'hôte de prévisualisation.
4. Envoyez en production et vérifiez que vous arrivez sur votre page de remerciement.

Dépannage

Voir aussi

• HugoUn partial et un shortcode pour les fichiers de contenu.
• JekyllUn include, et la configuration GitHub Pages.
• Formulaires HTMLRedirections, champs réservés et honeypot.
• Domaines autorisésComment les origines sont comparées, et ce qui se passe en cas de non-correspondance.