IllusionForms im Deep Dive

Formulare sind der Teil einer Website, an dem es ernst wird: Hier tippen Besucher Namen, E-Mail-Adressen, Budgets und manchmal noch viel mehr ein. Trotzdem landen diese Daten meistens bei einem Dienst irgendwo in der Cloud – weil es bequem ist und weil ein selbst gebautes Formular schnell an seine Grenzen kommt, sobald es mehrere Schritte, Bedingungen oder eine Anbindung ans CRM braucht.

IllusionCMS hat dafür bewusst keinen Baukasten. Formulare liefen bisher per Workflow-Hook. Für Funnels mit zehn Schritten ist das zu wenig, deshalb habe ich IllusionForms gebaut: ein eigenes, freies Programm für Formulare und Funnels, das neben dem CMS läuft – oder neben jeder anderen Website. Jede Einsendung bleibt in der eigenen Instanz. Dieser Artikel zeigt, was die erste Version (v0.1.0) kann. Alle Bilder stammen aus einer Demo-Instanz.

Der Editor ist das Formular

Die wichtigste Entscheidung vorweg: Es gibt keine Feldliste. Gebaut wird direkt am fertig dargestellten Formular. Felder kommen per Klick oder Ziehen aus der Palette, Beschriftungen, Hilfetexte und Optionen ändere ich dort, wo sie stehen. Rechts zeigt der Inspector, was zum markierten Element gehört, oben schalte ich zwischen Desktop, Tablet und Smartphone um.

Der visuelle Editor: links die Feldtypen, in der Mitte das Formular mit seinem Theme, rechts die Einstellungen des Formulars.

Dabei gibt es alle üblichen Feldtypen: Text, E-Mail, Telefon, Zahl, Auswahl als Liste, Einfach- oder Mehrfachauswahl (auf Wunsch als Kacheln mit Bildern), Ja/Nein, Datum, Bewertung, Datei-Upload, HTML-Blöcke und versteckte Felder für Kampagnen-Werte. Ein Formular hat einen Entwurf und veröffentlichte Versionen: Ich arbeite in Ruhe weiter, Besucher sehen die letzte veröffentlichte Fassung. Schritte lassen sich für den Editor benennen, ohne dass Besucher den Namen sehen.

Logik: Bedingungen und Sprünge

Funnels leben davon, nur das zu fragen, was zur bisherigen Antwort passt. Jedes Feld und jeder Schritt kann eine Bedingung bekommen („nur zeigen, wenn You are … ist a company“). Nach jedem Schritt kann ein Sprung an einen späteren Schritt oder direkt ans Ende führen – etwa wenn das Budget zu klein ist, um weiter zu fragen.

Das Feld „Company name“ erscheint nur, wenn vorher „a company“ gewählt wurde.

Nach dem ersten Schritt springt das Formular bei einem Budget unter 1000 direkt zum Absenden.

Regeln beziehen sich nur auf frühere Antworten, Sprünge gehen nur nach vorn – Schleifen gibt es nicht. Und ganz wichtig: Die Logik läuft zweimal, im Browser und noch einmal auf dem Server. Wer das Formular per Hand an der Oberfläche vorbei abschickt, kommt um ein Pflichtfeld nicht herum; Antworten für ausgeblendete Felder fallen weg.

Die Daten, die ankommen

In der Vorschau fülle ich das Formular aus wie ein Besucher. Daneben steht live der Payload – genau die Daten, die eine Einsendung später an Workflows, Webhooks, die API und den CSV-Export liefert. Jedes Feld hat einen festen Schlüssel, Punkte im Schlüssel ergeben verschachtelte Objekte (adresse.plz), versteckte Felder und UTM-Werte stehen unter meta.

Die Vorschau zeigt neben dem Formular den Payload, den eine Einsendung liefert.

Posteingang

Einsendungen landen im Posteingang, der auch die Startseite des Admins ist. Neue bleiben markiert, bis jemand sie öffnet – und zwar für jede Person einzeln, damit niemandem eine durchrutscht. Ein Zähler im Menü zeigt, wie viele noch offen sind. Filtern nach Formular, Status und Zeitraum, Suche in den Antworten, CSV-Export und Löschen gibt es dort ebenfalls.

Der Posteingang mit geöffneter Einsendung: Antworten mit Beschriftung und Schlüssel, die hochgeladene Datei und die versteckten Felder.

Dazu kommen ein paar Dinge, die man bei einem Formular-Dienst oft vermisst:

• Teil-Einsendungen: Auf Wunsch speichert ein Formular die Antworten nach jedem Schritt. So sehe ich, wer wo abgebrochen hat.
• Statistik je Formular und Tag: Aufrufe, Starts, Teil-Einsendungen, Einsendungen und die Abschlussquote – nur Tageszahlen, ohne Cookies und IP-Adressen.
• Spam-Schutz ohne Captcha: Honeypot, Mindest-Ausfüllzeit und Rate-Limits. Kein Rätsel für Besucher, kein fremder Dienst.
• Aufbewahrungsfristen je Formular löschen alte Einsendungen samt Dateien automatisch. Ein Löschprotokoll hält fest, was entfernt wurde – ohne den Inhalt.

Workflows – auch während des Ausfüllens

Für alles, was nach einer Einsendung passieren soll, steckt in IllusionForms dieselbe Flow-Engine wie in IllusionCMS. Ich habe sie dafür in ein eigenes Go-Modul herausgelöst, den Editor ins gemeinsame Designsystem. Wer Workflows im CMS kennt, findet sich sofort zurecht.

Gestartet wird bei einer Einsendung, bei einem gespeicherten Schritt, bei einem abgebrochenen Formular (Nachfassen nach einer Wartezeit) – oder während des Ausfüllens. Dieser letzte Start ist mein Lieblingsteil: Nach einem Schritt oder bei der Änderung eines Feldes läuft ein Workflow, und der Node Formular beantworten schickt das Ergebnis zurück ins Formular. So ergänzt das Formular den Ort aus der Postleitzahl, lehnt eine Freemail-Adresse ab oder springt zu einem passenden Schritt – bevor der Besucher absendet.

Der Workflow „ZIP lookup“: Start beim Ändern eines Feldes, eine Function sucht den Ort, „Formular beantworten“ trägt ihn ins Feld „City“ ein.

Außerdem gibt es Nodes für E-Mail (eigener SMTP-Server), HTTP-Anfragen, JavaScript und Weichen sowie zwei Nodes für die Familie: IllusionCMS legt Collection-Einträge an (hochgeladene Dateien landen in der Dateiverwaltung des CMS), IllusionDB schreibt Datensätze samt Anhängen. Geht dabei etwas schief, räumt der Workflow halb Angelegtes wieder weg. Echte Läufe gehen durch eine Warteschlange mit Wiederholungen; was endgültig scheitert, steht unter Fehlgeschlagen und lässt sich erneut anstoßen. Testläufe nehmen auf Wunsch eine bestimmte, schon eingegangene Einsendung.

Wiederkehrende Logik packe ich in eigene Nodes – ein Stück JavaScript mit Parametern und benannten Ausgängen, das in jedem Workflow wie ein eingebauter Node erscheint. Der Editor dafür ist derselbe wie im CMS, inklusive Testlauf.

Der eigene Node „Lead score“ bewertet eine Anfrage und schickt sie an den Ausgang „hot“ oder „cold“.

Themes und Schriften

Das Aussehen gehört nicht ins Formular, sondern in ein Theme: Farben, Schrift und Schriftgrößen, Ecken, Abstände, Buttons, Übergänge zwischen den Schritten und zur Not eigenes CSS. Ein Theme gilt für beliebig viele Formulare, die Vorschau zeigt jede Änderung sofort an einem echten Formular. Schriften lade ich selbst hoch (WOFF2, WOFF, TTF, OTF); IllusionForms liefert sie aus, von Google oder anderswo wird nichts geladen.

Der Theme-Editor mit Farben, hochgeladener Schrift und der Vorschau an einem echten Formular.

Die Texte, die Besucher sehen – Buttons, Fehlermeldungen, Danke-Seite – formuliere ich selbst, je Formular, Schritt oder Feld. Beim Anlegen eines Formulars wähle ich die Sprache der Website, dann beginnen sie auf Englisch, Deutsch, Französisch, Italienisch oder Spanisch.

Einbinden

Ein Formular kommt auf drei Wegen auf die Website:

• Skript-Tag: ein Platzhalter und einmal embed.js der Instanz. Das Formular rendert im Shadow DOM, ist gegen das CSS der Seite gekapselt und braucht kein iframe. Versteckte Felder und UTM-Werte kommen aus der Seitenadresse oder aus Attributen, Ereignisse wie illusionforms:submitted lassen sich fürs Tracking abgreifen.
• Eigene Formularseite unter /f/<key> – für Links in E-Mails, Anzeigen oder QR-Codes.
• IllusionCMS ab v0.8.0: Einmal verbunden (mit einem Token, der nur Formulare auflisten kann), gibt es den Feldtyp Formular. Redakteure wählen ein veröffentlichtes Formular aus einer Liste, das Template bindet es mit {{ illusionforms(formular) }} ein.

Der Dialog „Einbetten“ liefert den Code für die eigene Website und die Adresse der Formularseite.

Personenbezogene Daten

Weil Formulare personenbezogene Daten sammeln, habe ich IllusionForms vor dem ersten Release einem eigenen Sicherheitsaudit unterzogen. Was dabei herausgekommen ist, steckt jetzt in den Grundeinstellungen:

• Keine fremden Skripte, Schriften oder Captcha-Dienste – Besucher sprechen nur mit der eigenen Instanz.
• Strenge Sicherheits-Header, eine Content Security Policy und Rate-Limits an jedem öffentlichen Endpunkt; Uploads werden begrenzt, bevor sie angenommen werden.
• Werte von Besuchern werden in Workflows passend zur Stelle eingesetzt (in URLs kodiert, in HTML-Mails escaped), damit niemand über ein Formularfeld eine Anfrage umbiegt.
• Tokens und SMTP-Passwörter liegen verschlüsselt vor und funktionieren nur für ihr Ziel.
• Hochgeladene Dateien gibt es nur nach Anmeldung, immer als Download.
• Wer Kopien anlegt – Protokolle, Warteschlange, Sicherungen –, räumt sie auch wieder weg: Mit einer Einsendung verschwinden ihre Dateien, Workflow-Daten und automatische Sicherungen nach 30 Tagen.

Betrieb

IllusionForms ist wie das CMS ein einzelnes Go-Programm mit SQLite und eingebetteter Oberfläche, ohne externe Dienste. Es läuft als Binary für Linux, Windows und macOS oder als Docker-Container hinter einem Reverse-Proxy. Die erste Anmeldung schützt ein Einrichtungscode aus dem Log, damit niemand eine frische Instanz übernimmt.

• Konten und API-Tokens mit Zugriffsstufen: lesen, schreiben, nur Formularliste (fürs CMS) oder Fernverwaltung.
• Sicherung und Wiederherstellung als eine Datei – mit oder ohne Einsendungen, also auch zum Umziehen der Einrichtung auf eine andere Instanz.
• Remote-Modus wie im CMS: Ich arbeite im lokalen Admin direkt an der Instanz auf dem Server und kann deren Admin danach ganz abschalten.
• Oberfläche und Handbuch in fünf Sprachen; im Deutschen wird geduzt wie im CMS.

Für wen ist das?

Für alle, die auf ihrer Website mehr brauchen als ein Kontaktformular – Lead-Funnels, Anfragen mit mehreren Schritten, Bewerbungen mit Dateien – und die Daten trotzdem nicht aus der Hand geben wollen. IllusionForms ist frei, ohne Grenzen bei Formularen, Einsendungen oder Konten.

Die aktuelle Version ist v0.1.1. Einen Rundgang mit Screenshots und den Download gibt es auf illusioncms.com/forms. Für Fragen oder Ideen bitte Kontakt aufnehmen.