Dynamische Formulare und Eingabemasken in WordPress: Tipps & Umsetzung mit HTML

Dynamische Formulare sind zentral für Interaktion, Leads und Prozessautomatisierung. In WordPress lassen sie sich als Custom-Code, mit Form-Plugins oder als Hybrid (Plugin + Custom-JS) umsetzen. Unten findest du ein sauberes HTML-Grundgerüst mit Fokus auf Barrierefreiheit, Validierung und WordPress-Konformität.

1) HTML-Grundlage für WordPress-Formulare

Statt eine eigene formularverarbeitung.php aufzurufen, empfiehlt sich in WordPress die Nutzung von admin-post.php (inkl. Nonce) – so bleibt es update-sicher und kompatibel mit Plugins/Caching.

<form action="/wp-admin/admin-post.php" method="post" novalidate aria-describedby="formHinweis">
  <p id="formHinweis">Alle mit * gekennzeichneten Felder sind Pflichtfelder.</p>

  <input type="hidden" name="action" value="kontakt_absenden">
  <input type="hidden" name="kontakt_nonce" value="<?php echo wp_create_nonce('kontakt_nonce'); ?>">

  <label for="name">Name *</label>
  <input id="name" name="name" type="text" required autocomplete="name">

  <label for="email">E-Mail *</label>
  <input id="email" name="email" type="email" required inputmode="email" autocomplete="email">

  <label for="nachricht">Nachricht *</label>
  <textarea id="nachricht" name="nachricht" required rows="6"></textarea>

  <!-- Honeypot gegen Spam -->
  <div class="hp" aria-hidden="true">
    <label for="website">Website</label>
    <input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
  </div>

  <button type="submit">Absenden</button>
</form>

Serverseitige Verarbeitung (Beispiel im Theme/Plugin)

<?php
// functions.php (oder eigenes Mini-Plugin)
add_action('admin_post_nopriv_kontakt_absenden', 'handle_kontakt_form');
add_action('admin_post_kontakt_absenden', 'handle_kontakt_form');

function handle_kontakt_form() {
  if ( empty($_POST['kontakt_nonce']) || ! wp_verify_nonce($_POST['kontakt_nonce'], 'kontakt_nonce') ) {
    wp_die('Sicherheitsprüfung fehlgeschlagen', 403);
  }
  // Honeypot
  if ( ! empty($_POST['website']) ) {
    wp_safe_redirect(home_url('/danke/?spam=true')); exit;
  }
  $name = sanitize_text_field($_POST['name'] ?? '');
  $email = sanitize_email($_POST['email'] ?? '');
  $msg = wp_kses_post($_POST['nachricht'] ?? '');

  if ( empty($name) || empty($email) || empty($msg) || ! is_email($email) ) {
    wp_safe_redirect(home_url('/kontakt/?error=1')); exit;
  }

  wp_mail(get_option('admin_email'), 'Neue Kontaktanfrage', "Von: $name <$email>\n\n$msg");

  // Optional: in DB speichern oder an API senden
  // wp_remote_post( 'https://api.example.com/leads', [ 'body' => [ 'name' => $name, 'email' => $email, 'message' => $msg ] ] );

  wp_safe_redirect(home_url('/danke/')); exit;
}

2) Styling & Interaktion (barrierearm & performant)

Nutze semantische Labels, klare Fokuszustände und sichtbare Fehlermeldungen. CSS nach Möglichkeit in eine Datei auslagern; hier ein kompaktes Beispiel:

<style>
  form { max-width: 640px; }
  label { display:block; margin:.5rem 0 .25rem; }
  input, textarea, button { width:100%; padding:.75rem; border:1px solid #ccc; border-radius:.5rem; }
  input:focus, textarea:focus { outline:2px solid; outline-offset:2px; }
  .error { margin-top:.25rem; font-size:.875rem; }
  .hp { position:absolute; left:-9999px; }
</style>

Clientseitige Validierung (progressive Enhancement)

<script>
  (function(){
    const form = document.querySelector('form[action*="admin-post.php"]');
    if(!form) return;
    form.addEventListener('submit', function(e){
      const email = document.getElementById('email');
      if(email && !email.value.includes('@')){
        e.preventDefault();
        alert('Bitte gib eine gültige E-Mail-Adresse ein.');
        email.focus();
      }
    });
  })();
</script>

3) Dynamik: Bedingte Felder, Masken & Live-Checks

Bedingte Felder: Zeige Zusatzeingaben erst, wenn eine Auswahl getroffen wurde (z. B. Firma/Privat).
Eingabemasken (Input Masks): Für Tel.-Nummern oder Postleitzahlen via JS (z. B. pattern im HTML, oder eine kleine Masking-Lib).
Live-Validierung: input/change-Listener für unmittelbares Feedback; Server-Checks via wp_ajax_* möglich.

4) Integration in WordPress

HTML kann direkt im Block-Editor (Custom-HTML-Block) oder als Shortcode/Mini-Plugin eingebunden werden. Für komplexe Use-Cases sind Form-Plugins ideal (z. B. Contact Form 7, Gravity Forms, Ninja Forms, Fluent Forms). Vorteile: Drag-&-Drop-Felder, Spam-Schutz, Webhooks, Zapier/Make-Anbindung, Datei-Uploads.

5) Sicherheit & Performance

Nonce & Sanitizing: Immer Nonce prüfen und Eingaben säubern.
Spam-Schutz: Honeypot + Zeitstempel; optional reCAPTCHA/Turnstile.
Caching: Form-Endpoints vom Full-Page-Cache ausschließen.
DSGVO: Zweck, Speicherort, Aufbewahrungsdauer nennen; Einwilligung (Checkbox) protokollieren.

Fazit

Mit sauberem HTML, barrierebewusstem UI, solider Validierung und WP-konformer Verarbeitung implementierst du dynamische, skalierbare Formulare – als Custom-Lösung oder per Plugin-Hybrid.

Allgemein

Dynamische Formulare und Eingabemasken in WordPress umsetzen