YOOtheme Form Builder für Joomla und WordPress

Der YOOtheme Form Builder von Tonino Gerns 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. Seit Version 1.6.0 liegen auch alle Plugin-Einstellungen im YOOtheme-Customizer unter Einstellungen, Panel [TG] Form Builder: Captcha-Schlüssel, Datei-Sperrliste, Debug-Protokoll und die Verwaltung der Einsendungen. Denselben Funktionsumfang gibt es für Joomla und WordPress.

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

Jedes Feld lässt sich abhängig vom Wert eines anderen Feldes ein- oder ausblenden. Das Quellfeld wählst du per Dropdown, dazu einen von fünf Operatoren. Ausgeblendete Felder werden nicht validiert, nicht übermittelt und erscheinen weder in der E-Mail noch in der Zusammenfassung.

Nach dem Absenden: Erfolgsmeldung, Weiterleitung, Tracking

Die Erfolgsmeldung erscheint über dem Formular, darunter oder an beiden Stellen, bei langen Formularen scrollt der Browser auf Wunsch sanft zur Meldung. Sie lässt sich in vier Stilen anzeigen, mit Schließen-Symbol versehen und kann das Formular nach dem Absenden ausblenden. Alternativ leitest du mit Verzögerung weiter und schickst ein Event an den Google Tag Manager oder Google Analytics. Mit Rechen- oder unsichtbarem Captcha lässt sich ein Formular im selben Seitenaufruf mehrfach abschicken, weil der Server jedes Mal eine neue Aufgabe liefert.

E-Mail und Einsendungen

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. Empfänger-Mail und automatische Antwort an den Absender gehen wahlweise als HTML oder als reiner Text, etwa für Ticketsysteme.

Zusätzlich lassen sich Einsendungen in einer eigenen Datenbanktabelle ablegen, je Formular einzeln aktivierbar. Tabelle anlegen, Zähler je Formular, CSV-Export und Löschen erledigst du im Customizer-Panel [TG] Form Builder. Der CSV-Export entsteht erst beim Klick und wird direkt heruntergeladen - auf dem Server liegt keine abrufbare Datei. Wurde ein Formular zwischenzeitlich umgebaut, vereint der Export alle je vorhandenen Felder als Spalten.

Spam-Schutz und Datei-Upload

Das Captcha-Element bietet Honeypot, eine Rechenaufgabe mit wählbarer Schreibweise, Rechenart und Maximalergebnis sowie einen unsichtbaren Proof-of-Work mit einstellbarer Schwierigkeit. Alle drei laufen vollständig auf deinem Server, ohne Drittanbieter und ohne Einwilligungsbanner. Wer mag, schaltet stattdessen das Joomla-Captcha oder Google reCAPTCHA in drei Varianten frei; reCAPTCHA kontaktiert Google auf Wunsch erst nach ausdrücklicher Zustimmung. Dazu kommen eine Mindest-Ausfüllzeit mit eigener Fehlermeldung und eine Interaktionsprüfung.

Beim Datei-Upload trägst du die erlaubten Dateiendungen je Feld ein; bleibt das Feld leer, gelten die im Medien-Manager von Joomla beziehungsweise die in WordPress hinterlegten Typen. Geprüft werden Endung und Dateiinhalt, eine umbenannte Datei kommt nicht durch. Ausführbare, skriptfähige und makrofähige Formate wie PHP, HTML, SVG, JavaScript oder DOCM sperrt eine Sperrliste unabhängig von der Feldkonfiguration. Anhänge bekommen einen zufälligen Dateinamen, der Originalname steht im Feldwert der Mail. Maximalgröße je Datei und Anzahl stellst du ein; die Datei geht an die E-Mail und wird nicht auf dem Server abgelegt.

Darstellung und Barrierefreiheit

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. Mehrere Formulare auf einer Seite stören sich nicht: Feldnamen und IDs bleiben seitenweit eindeutig. Die Felder sind echte HTML-Formularelemente mit verknüpften Labels, per Tastatur bedienbar und mit Screenreader lesbar. Erfolgs- und Fehlermeldungen sind Live-Regionen mit Fokus, ein Validierungsfehler springt zum ersten ungültigen Feld, Schrittwechsel werden angesagt, und das Modal gibt den Fokus beim Schließen an den Button zurück. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz; die Elemente sind von vornherein nach WCAG 2.1 AA gebaut.

Kurzanleitung: In drei Schritten zum Formular

1. Element Form Builder aus der Gruppe Tonino Gerns einfügen. Darunter legst du die Feldelemente ab - Eingabe, Auswahl, Textbereich und was du sonst brauchst.
2. Unter Einstellungen die Empfängeradresse eintragen. Ohne sie bleibt der Button auf Demo-Modus und es wird nichts verschickt.
3. Als Absender ein Postfach deiner eigenen Domain eintragen und als Antwortadresse das E-Mail-Feld des Formulars wählen. So kommt die Mail an, und du antwortest trotzdem direkt dem Absender.

Kurzanleitung: Mehrschritt und bedingte Felder

1. Schritt-Element zwischen die Felder setzen - jedes markiert den Beginn eines neuen Schritts.
2. Am Formular die Fortschrittsanzeige wählen und bei Bedarf die Zusammenfassung vor dem Absenden einschalten.
3. Für ein bedingtes Feld dessen Gruppe Bedingung öffnen, das Quellfeld aus dem Dropdown wählen, Operator und Wert setzen.

Hängt ein Feld an einem selbst versteckten Feld, verschwindet es mit - die Kaskade musst du nicht von Hand pflegen.

Kurzanleitung: Einsendungen speichern

1. Einmalig im YOOtheme-Customizer unter Einstellungen, [TG] Form Builder die Datenbanktabelle per Knopfdruck anlegen. Automatisch passiert das nie.
2. Am Formular unter Submissions das Speichern aktivieren und einen Formularnamen vergeben.
3. Export und Löschen laufen über dasselbe Panel im Customizer.

Die Deinstallation des Plugins lässt gespeicherte Einsendungen unangetastet; entfernt werden sie nur über den Löschen-Knopf.

Wenn etwas nicht funktioniert

• Der Button zeigt Demo-Modus: Am Formular fehlt die Empfängeradresse.
• Es kommt keine Mail an: Zuerst prüfen, ob dein System überhaupt Mails verschickt, etwa über ein Passwort-Zurücksetzen. Ein Absender, zu dem es kein echtes Postfach gibt, wird von Empfängerservern regelmäßig verworfen.
• Ein Platzhalter bleibt im Mailtext stehen: Der Feldname stimmt nicht. Der Variablen-Picker zeigt die vorhandenen Namen als klickbare Chips.
• reCAPTCHA meldet einen Fehler: Jede Variante braucht eigene Schlüssel. Ein Schlüssel für v2 funktioniert nicht mit v3.
• Eine Datei wird abgelehnt: Die Endung fehlt in der Feldliste oder steht auf der Sperrliste. Die Sperrliste lässt sich im Panel [TG] Form Builder abschalten; das Risiko trägt dann der Mail-Empfänger.
• Eine Einsendung wird abgewiesen und du weißt nicht warum: Das Debug-Protokoll im Panel [TG] Form Builder einschalten. Es hält den Grund fest, ohne Formularwerte oder IP-Adressen zu speichern.

Unter WordPress

Gleiche Elemente, gleiche Einstellungen, gleicher Aufbau im Builder. Drei Unterschiede solltest du kennen:

• Spam-Schutz: Honeypot, Rechenaufgabe und unsichtbarer Proof-of-Work sind identisch. An die Stelle von Joomla-Captcha und Google reCAPTCHA tritt Friendly Captcha, ein Anbieter aus der EU ohne Cookies und ohne Fingerprinting.
• Wo die Einstellungen liegen: wie unter Joomla im YOOtheme-Customizer unter Einstellungen, [TG] Form Builder. Die WordPress-Einstellungsseite enthält nur noch den Download-Schlüssel, ohne den WordPress keine Updates für das Plugin anbietet.
• Das Debug-Protokoll gibt es bisher nur unter Joomla.

Dein Lizenzschlüssel gilt für beide Plattformen.

Voraussetzungen

• Joomla 5 oder 6, PHP 8.1 oder neuer, YOOtheme Pro 5 (Formular-Elemente auch unter YOOtheme Pro 4.x, das Einstellungs-Panel ab Pro 5)
• WordPress 6.5 oder neuer, PHP 8.2 oder neuer, YOOtheme Pro 5, PHP-Erweiterung mbstring
• Für die Verschlüsselung der Formularkonfiguration wird OpenSSL genutzt. Fehlt die Erweiterung, bleibt das Formular funktionsfähig und die Konfiguration weiterhin manipulationsgeschützt.