# Eleventy

> Ein Eleventy-Shortcode, der ein Ikiform-Formular in Nunjucks-, Liquid- und Markdown-Templates rendert, mit der Formular-ID in globalen Daten.

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

### Schritt 1: Füge den Shortcode hinzu

`eleventy.config.js`:

```js
const escape = (value) => String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);

export default function (eleventyConfig) {
  eleventyConfig.addShortcode("ikiform", (formId, thanks = "") =>
    [
      `<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)}">`,
      '<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`.

### Schritt 2: Lege die Formular-ID in globalen Daten ab

`_data/ikiform.js`:

```js
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.

### Schritt 3: Verwenden

`contact.md`:

```text
---
title: Contact
---

Questions about pricing? Write to us.

{% ikiform ikiform.formId, ikiform.thanks %}
```

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](https://ikiform.com/de/docs/html.md#redirect-rules).

## 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.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| `npx @11ty/eleventy --serve` | `localhost`. Passt auf `http://localhost:8080`: Ikiform vergleicht nur den Hostnamen, nie den Port. |
| Deine Domain | `example.com`, was auch `www.example.com` abdeckt |
| Netlify | `your-site.netlify.app`. Deploy Previews (`deploy-preview-12--your-site.netlify.app`) und Branch Deploys (`branch--your-site.netlify.app`) sind keine Subdomains davon, füge also den exakten Preview-Host hinzu, während du eine testest. |
| Cloudflare Pages | `your-project.pages.dev`. Preview-URLs wie `abc123.your-project.pages.dev` sind Subdomains davon und passen daher bereits. |

- 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

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| Das Formular wird auf der Seite als Code angezeigt | Der Shortcode ist in einer Markdown-Datei um vier Leerzeichen eingerückt | Verschiebe den Tag an den Anfang seiner Zeile. |
| Die Hälfte des Formulars wird als Absätze gerendert | Die Ausgabe des Shortcodes enthält eine Leerzeile, die den HTML-Block von Markdown beendet | Verbinde die Zeilen ohne Leerzeilen, wie in der Konfiguration oben. |
| `SyntaxError: Unexpected token 'export'` beim Start von Eleventy | Die Konfiguration nutzt ES-Modul-Syntax in einem CommonJS-Projekt | Benenne sie in `eleventy.config.mjs` um oder füge `"type": "module"` zu `package.json` hinzu. |
| Nunjucks oder Liquid findet den `ikiform`-Tag nicht | Eleventy hat die Konfigurationsdatei nicht geladen | Prüfe, dass die Datei im Projektstamm liegt und `eleventy.config.js` oder `.mjs` heißt. |
| Einsendungen landen im Spamfilter mit `origin_mismatch` | Die sendende Seite steht nicht in den erlaubten Domains des Formulars | Füge den Host aus der Tabelle oben hinzu. Mit **Reject** bekommen dieselben Requests stattdessen `403 origin_not_allowed`. |

## Verwandte Themen

- [Hugo](https://ikiform.com/de/docs/guides/hugo.md): Ein Partial und ein Shortcode für Inhaltsdateien.
- [Jekyll](https://ikiform.com/de/docs/guides/jekyll.md): Ein Include und die Einrichtung für GitHub Pages.
- [HTML-Formulare](https://ikiform.com/de/docs/html.md): Weiterleitungen, reservierte Felder und der Honeypot.
- [Erlaubte Domains](https://ikiform.com/de/docs/spam.md#allowed-domains): Wie Origins abgeglichen werden und was eine Abweichung bewirkt.