# WordPress

> Füge ein Ikiform-Formular mit dem Custom-HTML-Block zu WordPress hinzu oder registriere einen Shortcode, damit jeder Autor dasselbe Formular überall platzieren kann.

Formular-Plugins verarbeiten Einsendungen innerhalb von WordPress: Ihre Formulare senden an deine eigene Site zurück, und das Plugin speichert das Ergebnis und verschickt es per E-Mail. Ein einfaches HTML-Formular, das auf Ikiform zeigt, umgeht Plugin, Datenbank und Mail-Setup und funktioniert auch auf gecachten Seiten, weil es keine WordPress-Nonce enthält.

## Wer ein Formular einfügen kann

WordPress filtert das HTML in Beiträgen und Seiten. Bei allen ohne die Berechtigung `unfiltered_html` entfernt es `<form>` und `<input>` beim Speichern des Inhalts.

| Site | Wer ein Formular in einem Custom-HTML-Block speichern kann |
| --- | --- |
| Selbst gehostet, einzelne Site | Administratoren und Redakteure |
| Selbst gehostete Multisite | Nur Super-Admins |
| `DISALLOW_UNFILTERED_HTML` auf `true` gesetzt in `wp-config.php` | Niemand. Nutze den [Shortcode](#shortcode). |
| WordPress.com | Alle, die bearbeiten dürfen, aber nur mit einem kostenpflichtigen Tarif und aktivierten Hosting-Funktionen. Die Hosting-Funktionen werden aktiviert, wenn du ein Plugin installierst. Bei anderen Tarifen werden die Tags entfernt. |

## Custom-HTML-Block

### Schritt 1: Block hinzufügen

Tippe im Block-Editor `/html` und wähle **Custom HTML**. Um das Formular auf jeder Seite anzuzeigen, füge den Block stattdessen im Site Editor einem Template-Teil wie dem Footer hinzu.

### Schritt 2: Formular einfügen

`Custom HTML`:

```html
<form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <p><label>Name <input name="name" autocomplete="name" required></label></p>
  <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
  <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
  <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <p><button type="submit" class="wp-element-button">Send</button></p>
</form>
```

`wp-element-button` gibt dem Button in Block-Themes den Button-Stil deines Themes. Das Formular übernimmt die Schriften und Input-Styles deines Themes und braucht daher meist kein CSS.

### Schritt 3: Vorschau ansehen, dann aktualisieren

Nutze den Tab **Preview** des Blocks und speichere dann. Lade den Editor neu und öffne den Block erneut: Wenn die Tags `<form>` und `<input>` verschwunden sind, kann dein Konto sie nicht speichern. Nutze dann den Shortcode unten.

`_redirect` funktioniert nur, wenn das Formular erlaubte Domains hat, die deine Site enthalten; sonst sehen Besucher die Danke-Seite von Ikiform. Du kannst auch **Redirect after submit** in den Einstellungen des Formulars setzen und das versteckte Input weglassen.

## Ein Shortcode

Ein Shortcode hält das HTML in PHP, wo der Inhaltsfilter es nicht anfasst, sodass auch Autoren und Mitarbeiter das Formular platzieren können. Speichere das als Must-Use-Plugin, das WordPress automatisch lädt:

`wp-content/mu-plugins/ikiform.php`:

```php
<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});
```

Füge dann einen **Shortcode**-Block hinzu oder tippe den Shortcode in einen beliebigen Inhalt:

`Shortcode-Block`:

```text
[ikiform redirect="https://example.com/thank-you/"]
```

- Übergib `id`, um ein anderes Formular zu verwenden: `[ikiform id="frm_..."]`.
- Passe die Felder im PHP an dein Formular an. Jedes Input mit einem `name` wird gespeichert.
- Füge im klassischen Editor rohes HTML nur im Tab **Text** ein. Der visuelle Editor fügt `<p>`- und `<br>`-Tags in das Formular ein. Der Shortcode vermeidet das.

## Erlaubte Domains

Liste jede Adresse auf, unter der die Site erreichbar ist. WordPress-Sites haben während des Aufbaus oft mehrere.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| Deine Live-Domain | `example.com`, was auch `www.example.com` abdeckt |
| WordPress.com-Adresse | `your-site.wordpress.com` oder `your-site.wpcomstaging.com` für Staging-Sites |
| Die Staging-Site deines Hosters | Der Staging-Host aus dem Dashboard deines Hosters |
| Lokale Entwicklung | `localhost` oder der lokale Hostname, den dein Tool dir gibt, etwa `my-site.local` |

- Füge niemals `wordpress.com` oder `wpcomstaging.com` allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.

## Test-Checkliste

1. Melde dich ab oder öffne ein privates Fenster. Angemeldete Admins umgehen einige Caches und sehen eine leicht andere Seite.
2. Sende das Formular ab und prüfe, dass die Einsendung in Ikiform unter Empfangen statt unter Spam steht.
3. Prüfe, dass du auf deiner Danke-Seite landest. Siehst du die Seite von Ikiform, fehlt die Site in den erlaubten Domains oder die `_redirect`-URL ist nicht `https:`.
4. Bearbeite die Seite als Nutzer ohne Admin-Rechte und prüfe, dass das Formular ein Speichern übersteht, oder nutze den Shortcode.

## Fehlerbehebung

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| Die Formularfelder verschwinden nach dem Speichern, nur die Labels bleiben | Deinem Konto fehlt `unfiltered_html`, oder der WordPress.com-Tarif filtert `form` und `input` | Nutze den Shortcode oder lass einen Administrator den Block einfügen. |
| Überzählige `<p>`- und `<br>`-Tags zerstören das Layout | Der visuelle Modus des klassischen Editors hat das HTML umformatiert | Nutze einen Custom-HTML-Block oder den Shortcode. |
| Die Browserkonsole meldet, dass die Formulardaten wegen der Direktive `form-action` abgelehnt wurden | Ein Sicherheits-Plugin oder dein Hoster sendet einen `Content-Security-Policy`-Header | Füge `https://ikiform.com` zu `form-action` hinzu und zu `connect-src`, wenn du mit `fetch` sendest. |
| 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`. |
| `422 validation_failed` mit einem Unknown field | Das Formular hat definierte Felder, und ein Input-Name gehört nicht dazu | Benenne das Input in die Feld-ID um oder lass es mit `_` beginnen, wenn es nur eine Markierung für dich ist. |

## Verwandte Themen

- [HTML-Formulare](https://ikiform.com/de/docs/html.md): Weiterleitungen, reservierte Felder und der Honeypot.
- [Website-Baukästen](https://ikiform.com/de/docs/guides/site-builders.md): Das Embed, das in jedem Builder funktioniert.
- [Spamschutz](https://ikiform.com/de/docs/spam.md): Honeypot, Scoring und die Menschlichkeitsprüfung.
- [Fehlerbehebung](https://ikiform.com/de/docs/troubleshooting.md): CORS, Origin-Abweichungen und 429er.