Eleventy

Eleventy gibt statisches HTML aus, daher sendet das Formular ohne jegliches Client-JavaScript. Ein Shortcode hält das Markup an einer Stelle und funktioniert in Nunjucks-, Liquid- und Markdown-Dateien gleich.

Einrichten

1. Füge den Shortcode hinzu

   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"),
     );
   }

   • Die Zeilen sind absichtlich ohne Leerzeilen verbunden. In Markdown beendet eine Leerzeile einen HTML-Block, und der Rest des Formulars würde als Text behandelt.
   • Hier wird ES-Modul-Syntax verwendet. Wenn deine package.json kein "type": "module" enthält, nenne die Datei eleventy.config.mjs.

2. Lege die Formular-ID in globalen Daten ab

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

   Globale Daten sind in jedem Template als ikiform verfügbar. Die Danke-URL muss absolut und https: sein, weil Ikiform andere Weiterleitungen ignoriert.

3. Verwenden

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

   Markdown-Dateien werden standardmäßig mit Liquid verarbeitet, daher funktioniert der Tag dort wie geschrieben. Setze ihn in eine eigene Zeile und rücke ihn nicht um vier Leerzeichen ein, sonst rendert Markdown ihn als Codeblock. Derselbe Tag funktioniert in .njk- und .liquid-Dateien.

_redirect wird nur befolgt, wenn das Formular erlaubte Domains hat, zu denen deine Site gehört. Siehe Regeln für _redirect.

Erlaubte Domains

Liste die Produktion und jeden Preview-Host auf. Eleventy-Sites werden häufig auf Netlify oder Cloudflare Pages deployt, die Previews unterschiedlich handhaben.

• Füge niemals netlify.app oder pages.dev allein hinzu. Jede Site auf diesem Host würde passen, auch die von anderen Leuten.

Test-Checkliste

1. Starte den Dev-Server und sieh dir den Seitenquelltext an. Das Formular sollte einfaches HTML sein, nicht in einem <pre><code>-Block.
2. Sende lokal mit localhost in den erlaubten Domains ab und prüfe, dass die Einsendung in Ikiform aufgelistet ist.
3. Deploye eine Preview und sende erneut vom Preview-Host ab.
4. Sende in der Produktion ab und prüfe, dass du auf deiner Dankesseite landest.

Fehlerbehebung

Verwandte Themen

• HugoEin Partial und ein Shortcode für Inhaltsdateien.
• JekyllEin Include und die Einrichtung für GitHub Pages.
• HTML-FormulareWeiterleitungen, reservierte Felder und der Honeypot.
• Erlaubte DomainsWie Origins abgeglichen werden und was eine Abweichung bewirkt.