# Jekyll

> Ein Jekyll-Include, das ein Ikiform-Formular aus _config.yml rendert, mit Weiterleitungen, die auf GitHub Pages und eigenen Domains funktionieren.

Jekyll-Sites sind statisch, was gut zu einem einfachen Formular-Post passt. Lege das Formular in ein Include, damit jede Seite dasselbe Markup nutzt und die Formular-ID an einer Stelle liegt.

## Einrichten

### Schritt 1: Füge die Einstellungen zu _config.yml hinzu

`_config.yml`:

```yaml
url: "https://example.com"
ikiform:
  form_id: frm_xxxxxxxxxxxxxxxx
  thanks: /thanks/
```

Das Include baut die Weiterleitung mit `absolute_url`, und das braucht `url`. Ohne diese Angabe ist die Weiterleitung nur ein Pfad, und Ikiform ignoriert alles, was keine vollständige `https:`-URL ist. Setze auf einer GitHub-Pages-Projektseite außerdem `baseurl: /repo`; `absolute_url` hängt es für dich an.

### Schritt 2: Erstelle das Include

`_includes/ikiform-form.html`:

```liquid
{%- assign form_id = include.form_id | default: site.ikiform.form_id -%}
{%- assign thanks = include.thanks | default: site.ikiform.thanks -%}
<form class="ikiform" action="https://ikiform.com/f/{{ form_id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {%- if thanks %}
  <input type="hidden" name="_redirect" value="{{ thanks | absolute_url }}">
  {%- endif %}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ include.button | default: "Send" }}</button>
</form>
```

### Schritt 3: Verwenden

`contact.md`:

```liquid
---
layout: page
title: Contact
---

Questions about pricing? Write to us.

{% include ikiform-form.html %}
```

Das Include funktioniert in Seiten, Posts und Layouts. Übergib `form_id` für ein anderes Formular, `thanks` für eine andere Weiterleitung und `button` für den Button-Text.

### Schritt 4: Füge die Dankesseite hinzu

`thanks.md`:

```liquid
---
layout: page
title: Thanks
permalink: /thanks/
---

Thanks, we got your message.
```

`_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

GitHub Pages ist der übliche Host für Jekyll, daher brauchst du oft zwei Einträge: den `github.io`-Host und deine eigene Domain.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| `bundle exec jekyll serve` | `localhost`. Passt auf `http://localhost:4000`: Ikiform vergleicht nur den Hostnamen, nie den Port. |
| GitHub Pages | `username.github.io`. Projekt-Sites unter `username.github.io/repo` nutzen denselben Host, ein Eintrag deckt also alle ab. |
| Eigene Domain auf GitHub Pages | `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. |

- Füge niemals `github.io` allein hinzu. Jede Site auf diesem Host würde passen, auch die von anderen Leuten.

## Test-Checkliste

1. Starte `bundle exec jekyll serve` und sieh dir den Seitenquelltext an. Die `action` sollte mit deiner Formular-ID enden.
2. Sende lokal ab. Du landest auf der Dankesseite von Ikiform: `jekyll serve` setzt `url` auf `http://localhost:4000`, und `http:`-Weiterleitungen werden nicht befolgt.
3. Pushe, warte auf den Pages-Build und sende von `username.github.io` ab. Prüfe, dass die Einsendung nicht als Spam markiert ist.
4. Sende auf deiner eigenen Domain ab und prüfe, dass du auf `/thanks/` landest.

## Fehlerbehebung

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| `Could not locate the included file 'ikiform-form.html'` | Die Datei liegt nicht in `_includes`, oder der Name weicht ab | Verschiebe sie nach `_includes/ikiform-form.html`. |
| Dankesseite von Ikiform statt `/thanks/` auf der Live-Site | `url` fehlt in `_config.yml`, oder das Formular hat keine erlaubten Domains | Setze `url` auf deine `https:`-Adresse und füge deine Domain hinzu. |
| `404 not_found` nach dem Absenden | `site.ikiform.form_id` ist leer, daher endet die action auf `/f/` | Prüfe die Einrückung unter `ikiform:` in `_config.yml`. |
| 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.
- [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.