WordPress

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.

Custom-HTML-Block

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.

2. Formular einfügen

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

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:

<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        '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['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?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:

[ikiform subject="New enquiry" 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.

• 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

Verwandte Themen

• HTML-FormulareWeiterleitungen, reservierte Felder und der Honeypot.
• Website-BaukästenDas Embed, das in jedem Builder funktioniert.
• SpamschutzHoneypot, Scoring und die Menschlichkeitsprüfung.
• FehlerbehebungCORS, Origin-Abweichungen und 429er.