# Hugo

> Ein Hugo-Partial und -Shortcode, die ein Ikiform-Formular aus Site-Params rendern, in Layouts und in Markdown-Inhalten.

Hugo erzeugt einfaches HTML, und ein einfacher Formular-POST ist alles, was Ikiform braucht, also musst du kein JavaScript hinzufügen. Der einzige Hugo-spezifische Haken ist Markdown: Hugos Renderer entfernt rohes HTML aus Inhaltsdateien, solange du `markup.goldmark.renderer.unsafe` nicht einschaltest, und ein eingefügtes Formular wird zu `<!-- raw HTML omitted -->`. Ein Shortcode hält das HTML stattdessen in einem Template.

## Einrichten

### Schritt 1: Formular-ID zu deiner Config hinzufügen

`hugo.toml`:

```toml
baseURL = "https://example.com/"

[params.ikiform]
formId = "frm_xxxxxxxxxxxxxxxx"
thanks = "/thanks/"
```

`baseURL` muss deine echte `https:`-Adresse sein. Das Partial macht damit aus `thanks` eine absolute URL, und Ikiform folgt nur `https:`-Weiterleitungen.

### Schritt 2: Partial erstellen

`layouts/_partials/ikiform-form.html`:

```html
{{ $id := .id | default site.Params.ikiform.formId }}
{{ $thanks := .thanks | default site.Params.ikiform.thanks }}
<form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ .button | default "Send" }}</button>
</form>
```

Ruf es immer mit einem `dict` auf, auch wenn es leer ist. Jeder Schlüssel ist optional und fällt auf die Site-Params zurück.

### Schritt 3: In einen Shortcode packen

`layouts/_shortcodes/ikiform.html`:

```html
{{ partial "ikiform-form.html" (dict "id" (.Get "id") "button" (.Get "button")) }}
```

Hugo 0.146 hat Templates nach `layouts/_partials` und `layouts/_shortcodes` verschoben. Nutze bei älteren Versionen `layouts/partials` und `layouts/shortcodes`.

### Schritt 4: Verwenden

In einer beliebigen Inhaltsdatei:

`content/contact.md`:

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

Questions about pricing? Write to us.

{{< ikiform >}}
```

Oder in einem Layout, für ein Formular auf jeder Seite:

`layouts/_partials/footer.html`:

```html
<footer>
  {{ partial "ikiform-form.html" (dict "button" "Send us a note") }}
</footer>
```

Füge für die Weiterleitung eine Seite `content/thanks.md` hinzu. Ikiform folgt `_redirect` nur, wenn das Formular erlaubte Domains hat, die deine Site enthalten; ohne sie sehen Besucher die Danke-Seite von Ikiform. Siehe [Regeln für _redirect](https://ikiform.com/de/docs/html.md#redirect-rules).

## Erlaubte Domains

Liste deine Produktionsdomain auf und jeden Ort, an dem du eine Vorschau der gebauten Site ansiehst.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| `hugo server` | `localhost`. Das passt auf `http://localhost:1313`: 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. |
| GitHub Pages | `username.github.io`. Projekt-Sites unter `username.github.io/repo` nutzen denselben Host, ein Eintrag deckt also alle ab. |

- Füge niemals `netlify.app`, `pages.dev` oder `github.io` allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.

## Test-Checkliste

1. Führe `hugo server` aus, öffne die Seite und sieh dir den Quelltext an. Du solltest das `<form>` sehen, nicht `<!-- raw HTML omitted -->`.
2. Sende lokal mit `localhost` in den erlaubten Domains ab. Du landest auf der Danke-Seite von Ikiform, weil `absURL` eine `http://localhost`-Adresse liefert und nur `https:`-Weiterleitungen befolgt werden.
3. Deploye eine Preview, sende von dort ab und prüfe, dass die Einsendung in Ikiform gelistet und nicht als Spam markiert ist.
4. Sende auf deiner Produktionsdomain ab und prüfe, dass du auf `/thanks/` landest.

## Fehlerbehebung

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| `<!-- raw HTML omitted -->` an der Stelle des Formulars | Das Formular wurde direkt in Markdown eingefügt | Nutze den Shortcode. |
| Hugo schlägt fehl mit `template for shortcode "ikiform" not found` | Die Shortcode-Datei liegt in einem Ordner, den deine Hugo-Version nicht liest | Nutze `layouts/_shortcodes` ab 0.146 und `layouts/shortcodes` davor. |
| Die Danke-Seite von Ikiform statt `/thanks/` in Produktion | Keine erlaubten Domains, oder `baseURL` ist `http:` | Füge deine Domain hinzu und setze `baseURL` auf deine `https:`-Adresse. |
| `404 not_found` nach dem Absenden | `params.ikiform.formId` fehlt, daher endet die Action auf `/f/` | Setze die Formular-ID in `hugo.toml`. |
| 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

- [Jekyll](https://ikiform.com/de/docs/guides/jekyll.md): Ein Include und die Einrichtung für GitHub Pages.
- [Eleventy](https://ikiform.com/de/docs/guides/eleventy.md): Ein Shortcode für Nunjucks, Liquid und Markdown.
- [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.