FORM BUILDER für YOOtheme Pro

Der Form Builder ergänzt YOOtheme Pro um zehn Builder-Elemente: das Formular selbst und neun Feldtypen. Jedes Feld liegt als Element im Baum, wird im Customizer eingestellt und erbt die Gestaltung deines Themes. Kein Iframe, kein zweites Backend, keine doppelte Gestaltung.

Felder und Validierung

Das Eingabefeld deckt 13 Typen ab, von Text und E-Mail über Zahl, Telefon und URL bis Datum, Uhrzeit und Farbe. Je Feld stellst du Pflichtangabe mit eigener Fehlermeldung, Min- und Max-Werte, Zeichenlängen, ein RegEx-Muster und die Autovervollständigung ein. Das E-Mail-Feld fordert auf Wunsch eine Wiederholung zur Kontrolle an, der Textbereich wächst mit der Eingabe, der Schieberegler zeigt seinen Wert mit Präfix und Suffix. Auswahl, Radio und Checkbox nehmen ihre Optionen als eigene Unterelemente auf: untereinander, nebeneinander, als Chips oder als Karten mit Icon, Titel und Beschreibung, im Grid mit zwei bis vier Spalten.

Ablauf: Schritte und Modal

Mehrschritt-Formulare entstehen über Schritt-Elemente. Als Fortschrittsanzeige wählst du Tabs, Pills, Schrittzähler oder Fortschrittsbalken, dazu Position, Ausrichtung je Breakpoint und eine Animation für den Wechsel. Vor dem Absenden lässt sich eine Zusammenfassung aller Eingaben einblenden, und eine Auswahl kann direkt zum nächsten Schritt führen. Soll das Formular nicht dauerhaft auf der Seite stehen, öffnet es ein Trigger-Button als Modal: Breite von Dialog bis Vollbild, optionaler Titel, Schließen per Esc und Hintergrundklick einzeln schaltbar, auf Wunsch automatisches Schließen nach erfolgreichem Absenden.

E-Mail-Ausgabe

Empfänger, Betreff, Absender und Reply-To stellst du am Formular ein. Den Mailtext baust du frei auf: {name} setzt den Wert eines Feldes ein, {all} die Tabelle aller Felder, und ein Variablen-Picker zeigt die vorhandenen Feldnamen als klickbare Chips. Je Feld kannst du einen Text davor oder danach ausgeben, normal oder fett, in eigener Zeile oder inline, oder das Feld ganz aus der Tabelle nehmen. Der Absender erhält auf Wunsch eine automatische Antwort mit eigenem Betreff und Inhalt. Nach dem Absenden zeigst du eine Erfolgsmeldung, leitest mit Verzögerung weiter und schickst ein Event an GTM oder Google Analytics.

Spam-Schutz und Datei-Upload

Das Captcha-Element bietet Honeypot, eine Rechenaufgabe mit wählbarer Schreibweise, Rechenart und Maximalergebnis, einen unsichtbaren Proof-of-Work mit einstellbarer Schwierigkeit sowie das Joomla-Captcha. Dazu kommen eine Mindest-Ausfüllzeit mit eigener Fehlermeldung und eine Interaktionsprüfung. Beim Datei-Upload gibst du die erlaubten Kategorien frei, also Bilder, PDF, Dokumente, Text und Archive, dazu Maximalgröße je Datei und Anzahl. Geprüft werden Endung und Dateiinhalt; die Datei geht an die E-Mail und wird nicht auf dem Server abgelegt.

Darstellung

Labels stehen klassisch über oder unter dem Feld oder schweben animiert im Feld. Dazu kommen gestapeltes oder horizontales Layout, drei Feldgrößen, ein rahmenloser Stil und der Absende-Button in Text, Stil, Größe und Breite. Die Datenschutz-Checkbox trägt ihren eigenen Text samt Link. Mehrere Formulare auf einer Seite stören sich nicht: Feldnamen und IDs bleiben seitenweit eindeutig.

Barrierefreiheit

Die Felder sind echte HTML-Formularelemente mit verknüpften Labels, per Tastatur bedienbar und mit Screenreader lesbar. Auswahl-Karten zeigen ihren Zustand nicht allein über die Farbe, der Fokus bleibt sichtbar, das Modal setzt ihn beim Öffnen und gibt ihn beim Schließen an den Button zurück. Springt eine Auswahl automatisch zum nächsten Schritt, steht der Hinweis darüber, wie es WCAG 3.2.2 verlangt, und die Bedienung per Pfeiltaste löst den Sprung bewusst nicht aus. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz; die neuen Funktionen sind von vornherein nach WCAG 2.1 AA gebaut.