HiveGrid-Wireframes/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bauplan.md

kind, project, ticket, package, status, stand

kind	project	ticket	package	status	stand
subframe-build-plan	HiveGrid Screen Project	D-FORM	WF-D-FORM Form Builder	Bauplan / umgesetzt als Review-ready Subframe Draft	2026-07-09

Subframe Bauplan - D-FORM

Ziel: D-FORM so in Subframe bauen, dass der Unterschied sofort klar wird:

• S02 Einfacher Fragen Editor = internes Werkzeug fuer Mitarbeiter.
• S04 Oeffentliches Formular = fertiges Formular fuer Kunden/Submitter.
• Preview in S02 = Vorschau auf S04, kein PDF.
• Logic = steuert, welche Felder im Kundenformular sichtbar werden.
• Actions = passiert nach dem Absenden, z. B. Email, Lead, Kontakt, Projekt, Task.

1. Verstaendnisanker

Mitarbeiter baut in S02:
"Welche Fragen sollen Kunden beantworten?"

Kunde sieht S04:
"Ich fuelle schnell ein Formular aus und sende es ab."

Nach Submit:
Submission wird gespeichert und Actions koennen laufen.

Der Kunde sieht nie den Builder. Der Kunde sieht nur die public Formularseite.

2. Review-Reihenfolge

Empfehlung fuer Review und Weiterarbeit: zuerst den aktuellen Hauptfluss pruefen. Spaetere Varianten und Advanced-Zustaende stehen bewusst hinten.

Reihenfolge	Frame	Warum zuerst / danach?
1	S00 Formulare verwalten	Einstieg in den Arbeitsbereich: vorhandene Formulare, Mehrfachfilter, Status, Aktionen.
2	E01 S00 Keine Formulare	Wichtiger Empty State der Formular-Zentrale.
3	E02 S00 Keine Treffer	Wichtiger Filter-/Suchzustand der Formular-Zentrale.
4	S01 Formularart auswaehlen	Nutzer entscheidet, welche Art Formular gebaut wird.
5	S02 Einfacher Fragen Editor	Aktueller Haupt-Editor fuer alle Formulararten.
6	S02L Lead Felder zuweisen	Lead-Zustand im gleichen S02-Look: Formularfragen Lead-Feldern zuweisen.
7	E05 S02 Lead Zuweisung pruefen	Optionaler Fehlerzustand, wenn eine Zuweisung fehlt oder nicht moeglich ist.
8	S03 Formular Design	Design-Tab: Logo, Farben, Public Preview.
9	S04 Oeffentliches Formular	Zielbild: So sieht das fertige Formular fuer Kunden aus.
10	V01 Public Erfolg oder Redirect	Zeigt, was nach Absenden passiert.
11	V02 Public Formular nicht verfuegbar	Zeigt Public-Blocker ohne App-Kontext.
12	V03 Public Captcha oder Submit Fehler	Zeigt Public-Fehler, Werte bleiben erhalten.
13	S05 Antworten Tabelle	Antworten-Tab als Excel-/Tabellenansicht.
14	E03 S05 Keine Antworten	Wichtiger Empty State im Antworten-Tab.
15	E04 S05 Export Fehler	Wichtiger Fehlerzustand beim Export.
81	S01C Website Formular Editor	Spaetere Beispiel-/Referenzseite fuer Website-/externes Formular.
82	S01D Umfrage Editor	Spaetere Beispiel-/Referenzseite fuer Fragebogen/Umfrage.
83	S01E Internes Formular Editor	Spaetere Beispiel-/Referenzseite fuer internes Mitarbeiterformular.

M01/M02/M03/M04 und D10 bleiben dokumentiert und muessen nicht als erste Subframe-Frames gebaut werden.

Stand 2026-07-09: Die einfachen Builder-Screens sind gebaut. S02L und E05 wurden nach Davids Lead-Feedback ergaenzt. S01B und die alten Advanced-Screens wurden aus dem Obsidian-Handoff entfernt. Die Links stehen im Subframe Bau Log. Fuer die weitergebbare Version siehe 00 Start hier - David und D-FORM David Uebergabe 2026-07-09.

Nutzerfluss fuer die Simple-Builder-Richtung

S00 Formulare verwalten
-> Neues Formular
-> S01 Formularart auswaehlen
-> je Auswahl:
   Website / Extern -> S02 mit Website-/Extern-Vorlage
   Lead -> S02 mit aktiver Lead-Verknuepfung -> S02L Felder zuweisen
   Fragebogen / Umfrage -> S02 mit Umfrage-Startfragen
   Intern -> S02 mit interner Formularvorlage
-> Design anpassen -> S03
-> Public Zielbild pruefen -> S04/V01/V02/V03
-> Antworten ansehen/exportieren -> S05

Die Subframe-Seitenliste selbst ist nicht zwingend die Review-Reihenfolge. Fachlich gilt die Reihenfolge oben.

Noch relevante Error-/Empty-Zustaende

Bereich	Zustand	Eigener Screen noetig?	Notiz
S00 Verwaltung	Keine Formulare vorhanden	ja	E01 ist gebaut, weil die erste leere Nutzung fachlich wichtig ist.
S00 Verwaltung	Suche/Filter ohne Treffer	ja	E02 ist gebaut, weil Mehrfachfilter sonst schnell verwirren.
S01 Auswahl	Keine Formularart gewaehlt	nein	Weiter disabled oder Lead als Default vorausgewaehlt.
S02	Frage ohne Label/Optionen	nein	Inline markieren; Publish-Blocker als Banner/Popover im selben Screen.
S02L Lead	Pflichtzuweisung fehlt	ja, optional E05	Name, Kontaktweg und Beschreibung muessen zuweisbar sein.
S02L Lead	Feld passt nicht zum Lead-Feld	ja, optional E05	Dropdown-Option disabled oder Zeile mit Fehler markieren.
S03 Design	Logo/Datei-Upload fehlschlaegt	nein	Inline am Upload oder Toast.
S05 Antworten	Keine Antworten	ja	E03 ist gebaut, weil neue Formulare anfangs leer sind.
S05 Antworten	Suche/Filter ohne Treffer	nein	Kleiner Empty State im Tabellenbereich reicht.
S05 Antworten	Export fehlgeschlagen	ja	E04 ist gebaut, weil Export fuer Arbeit/Weitergabe wichtig ist.
Public	Formular nicht verfuegbar	ja	V02 ist gebaut.
Public	Captcha/Submit-Fehler	ja	V03 ist gebaut.
Public	Submit erfolgreich	ja	V01 ist gebaut.

3. Exakte Subframe-Namen

Flow-Name:

• (MCP) WF-D-FORM Form Builder

Frames / Designs:

ID	Subframe-Name	Typ
S00	S00 Formulare verwalten	Formular-Zentrale
S01	S01 Formularart auswaehlen	Einstieg / Auswahl
S02	S02 Einfacher Fragen Editor	Simple Builder
S02L	S02L Lead Felder zuweisen	S02-Zustand / Lead Editor
E05	E05 S02 Lead Zuweisung pruefen	Lead Mapping Error State
S03	S03 Formular Design	Builder Tab
S04	S04 Oeffentliches Formular	Public Form
V01	V01 Public Erfolg oder Redirect	Public Feedback
V02	V02 Public Formular nicht verfuegbar	Public Blocker
V03	V03 Public Captcha oder Submit Fehler	Public Error
S05	S05 Antworten Tabelle	Builder Tab
E01	E01 S00 Keine Formulare	Hauptfluss / Empty State
E02	E02 S00 Keine Treffer	Hauptfluss / Empty State
E03	E03 S05 Keine Antworten	Hauptfluss / Empty State
E04	E04 S05 Export Fehler	Hauptfluss / Error State
S01C	S01C Website Formular Editor	Spaeter / Referenz
S01D	S01D Umfrage Editor	Spaeter / Referenz
S01E	S01E Internes Formular Editor	Spaeter / Referenz

Hinweis: In der Subframe-Seitenliste tragen S01C, S01D, S01E, S03, S04 und S05 aktuell noch das Suffix Layout. Zielnamen fuer Review/Handoff sind die oben stehenden Namen ohne Layout.

Nicht als erste Frames bauen:

• D01 Sharing Panel URL QR iFrame
• D02 Post-Submit Actions
• D03 Conditional Logic Editor
• D06 Feldkarten Menue
• D10 Builder Interaktionsfaelle
• M01 Feld loeschen Confirm
• M02 Unpublish Confirm
• M03 Archive Confirm
• M04 Unsaved Changes Confirm

4. Komponenten aus deinen Subframe Standards

Diese vorhandenen Komponenten/Patterns sollen genutzt werden.

Bereich	Komponente	Einsatz in D-FORM
Layout	Default Page Layout	S00/S01/S02/S03/S05/E01-E04 als interne Hauptseiten im vorhandenen Subframe Page Layout. S01C-E bleiben spaetere interne Referenzseiten. S04/V01/V02/V03 bleiben public ohne App-Shell.
Navigation	Breadcrumb	S02 oben: Formulare / SHK Anfrageformular.
Navigation	Page Header with Back	S02 Header mit Zurueck, Formname, Status, Save, Preview, Share, Publish.
Navigation	Tabs	S02 Tabs: Fragen, Design, Antworten.
Actions	Button	Save, Publish, Add Field, Add Action, Submit.
Actions	Icon Button	Feldkarten-Menue, More-Menue, Close/Archive-Trigger.
Form Inputs	Text Input	Name, Slug, Field Key, Email, Telefon.
Form Inputs	Textarea	Beschreibung, Success Message, langer Hilfetext.
Form Inputs	Select	Bereich, Operator, Zielfeld, Action-Typ, Pipeline.
Form Inputs	Multiselect / Checkbox Group	Multi-Select-Felder und Public Auswahlgruppen.
Form Inputs	Checkbox	Public Captcha/Consent, Boolean-Felder.
Form Inputs	Switch	Required, Logic aktiv, Action aktiv.
Form Inputs	File Upload	Public Datei-/Foto-Upload.
Feedback	Banner Alert	Publish Blocker, Public Submit Error, Draft Sharing Hinweis.
Feedback	Toast	Gespeichert, kopiert, published.
Data Display	Badge Feedback / Tag Label	Draft/Published, Pflicht, Fehler, Feldtyp, aktiv/inaktiv.
Data Display	Empty State	Leerer Canvas, keine Actions, keine Logic-Regeln.
Overlays	Dropdown Menu / Context Menu	Feldkarten-Menue, More-Menue.
Overlays	Confirm Dialog	M01/M02/M03/M04, nur dokumentiert oder spaeter kleine Frames.
Layout	Separator Divider	Inspector-Sektionen, Public Form-Abgrenzungen.
Utility	Tooltip	Disabled Actions, Rechte-Hinweise, Copy/Share-Hilfe.

5. Namens- und Variantenregeln

Aus den Subframe UI Standards:

• Size-Default heisst Medium, nicht Default.
• States: default, hover, active, focus, disabled, loading, error, selected.
• Varianten: primary, secondary, tertiary, ghost, destructive, neutral, success, warning, information.
• Form Field Anatomy:
  • label
  • helpText
  • Control
  • message
• Unterer Field-Text heisst immer message, nicht Helper, Label oder Help.
• Textnahe Controls nutzen Radius Small.
• File Upload hat die Boolean-Prop fullwith. Wenn ein Upload-Feld in einem Formularbereich die ganze verfuegbare Breite nutzen soll, immer fullwith={true} setzen. Das gilt besonders fuer Public Forms und Upload-Fehlerzustaende.

5a. Modal-Regel

Die gebauten Public-Screens S02, V01, V02 und V03 sind keine Modal-Screens. Sie sind Public Page States und duerfen mit einem zentrierten Container oder einer Card arbeiten.

Fuer alle echten D-FORM-Modals gilt:

• M01 Feld loeschen Confirm
• M02 Unpublish Confirm
• M03 Archive Confirm
• M04 Unsaved Changes Confirm

Wenn einer dieser M-Zustaende spaeter in Subframe gebaut wird, muss die vorhandene Komponente Dialog verwendet werden. Nicht als normale Card bauen, nicht als Drawer bauen und nicht als eigener Public/Page-State.

Abgrenzung:

• Public V01/V02 duerfen zwar card-artig zentriert aussehen, sind aber trotzdem volle Public-Zustaende und keine Dialoge.
• D-/M-Detailnotizen sind Markdown-Anforderungen und nicht Teil der aktuellen Subframe-Review-Reihenfolge.

6. S04: fertiges Kundenformular

S04 ist die einfache Seite, die der Kunde sieht. S02 bleibt der interne Fragen-Editor fuer Mitarbeiter.

Komponentenregel Public Form Panel

Das eigentliche Formularpanel in S04 und der Fehlerzustand in V03 sollen die vorhandene Card-Komponente verwenden. Weil Card standardmaessig eher kompakt ist, bekommt die Instanz ein Breiten-Sondermass ueber className, z. B. w-full, min-w-[0px] und den max-width-Container der Seite.

Wichtig: Dafuer keine globale Card-Variante nur fuer D-FORM anlegen und die globale Card nicht verbreitern. Das Sondermass gehoert an die konkrete Public-Form-Card.

S04 und V03 sollen gleich aufgebaut sein:

• gleicher Public-Container
• gleiche maximale Breite max-w-[760px]
• gleiche Card-Breite
• gleiche einspaltige Feldreihenfolge
• kein zweispaltiges Name/E-Mail-Layout, damit lange Namen und lange E-Mail-Adressen mehr Platz bekommen
• V03 ist derselbe Formularaufbau plus Fehlerbanner, erhaltene Werte und Inline-Fehler

Layout

Public Container
  Public Header
    Tenant Logo / Fallback
    Anbietername
  Formular Intro
    Titel
    Beschreibung
  Form Body
    Fields in Reihenfolge
  Captcha / Schutz
  Absende-Bereich
  Footer

Beispielinhalt

Element	Inhalt
Tenant	SHK Demo GmbH
Titel	SHK Anfrageformular
Beschreibung	Beschreiben Sie kurz Ihr Anliegen. Wir melden uns mit den naechsten Schritten.
Felder	Name, Email, Telefon, Bereich, Beschreibung, Fotos/Dokumente
Schutz	mCaptcha oder Sicherheitspruefung
Submit	Anfrage senden

Wichtige Regel

Keine App-Shell, keine Sidebar, keine internen Begriffe. Keine Woerter wie Submission, Action, Lead, Mapping, Webhook.

7. S01 danach bauen: interne Werkstatt

S01 ist nicht fuer Kunden. S01 ist fuer Mitarbeiter, die Formulare bauen.

Layout

Default Page Layout
  vorhandene App-Shell des Layouts
  vorhandene Header Navigation
  Page Content
  Header
    Breadcrumb
    Formname
    Status Badge
    Save
    Preview
    Share
    Publish
    More
  Body
    Left: Field Palette
    Center: Canvas
    Right: Inspector
  Mode Tabs
    Builder
    Logic
    Actions
    Sharing
    Preview
    Settings

Drei-Zonen-Builder

Zone	Aufgabe	Wichtig fuer Subframe
Linke Palette	Feldtypen hinzufuegen	12 Feldtypen klar gruppieren.
Canvas Mitte	Formularstruktur bauen	Feldkarten, Dropzones, Fehler, Selected State.
Rechter Inspector	Feld konfigurieren	label, helpText, required, validation, options, message.

Layout-Regel fuer interne Builder-Screens

S00, S01, S02, S03, S05 und E01-E04 muessen in Subframe das vorhandene Default Page Layout verwenden. S01C-E sind spaetere interne Referenzseiten und verwenden ebenfalls keine eigene Sidebar. Wichtig: Das Layout selbst bringt App-Shell/Navigation mit. In den Screens keine eigene Sidebar oder Header-Navigation nachbauen.

Nicht verwenden fuer den Builder: Blank, public/zentrierte Form-Seiten oder Default Page Layout with inner Sidebar. Die innere Sidebar ist eher fuer Settings geeignet; der Builder hat bereits eigene Innenbereiche wie Feld-Palette, Canvas, Logic-Liste, Action-Liste und Inspector.

Public-Screens S04, V01, V02 und V03 bleiben bewusst ohne App-Shell und ohne Sidebar.

Tabs

S02 nutzt nur die Review-relevanten Tabs: Fragen, Design und Antworten. Logic, Actions und Publish bleiben in S02 bewusst einfach und inline.

8. Entfernte Advanced-Detailframes

S01B, ADV-S01, ADV-S01-2 und die Detailframes D07/D08/D09 wurden aus dem Obsidian-Handoff entfernt. Die fachlichen Detailnotizen zu Sharing, Actions, Logic, Feldmenue, Interaktionsfaellen und Confirm-Dialogen bleiben als Markdown-Anforderungen liegen, sind aber keine Review-Screens.

11. Was NICHT passieren soll

• Builder nicht wie Kundenformular bauen.
• Public Form nicht wie interne App bauen.
• Preview nicht als PDF verstehen.
• Logic nicht als PDF-/Dokumentgenerator verstehen.
• Actions nicht als kompletter Automation-Editor bauen.
• Confirm-Dialoge nicht vor dem S02-Hauptfluss priorisieren.
• Keine neuen globalen Subframe Standards aus D-FORM ableiten.

12. Umsetzungsstand in Subframe

Subframe-Flow:

https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad

Gebaut und verlinkt:

1. S00 Formulare verwalten
2. E01 S00 Keine Formulare
3. E02 S00 Keine Treffer
4. S01 Formularart auswaehlen
5. S02 Einfacher Fragen Editor
6. S02L Lead Felder zuweisen
7. E05 S02 Lead Zuweisung pruefen
8. S03 Formular Design
9. S04 Oeffentliches Formular
10. V01 Public Erfolg oder Redirect
11. V02 Public Formular nicht verfuegbar
12. V03 Public Captcha oder Submit Fehler
13. S05 Antworten Tabelle
14. E03 S05 Keine Antworten
15. E04 S05 Export Fehler
16. S01C Website Formular Editor
17. S01D Umfrage Editor
18. S01E Internes Formular Editor

Gebaut nach Davids Lead-Feedback:

• 05b. S02L Lead Felder zuweisen: https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit
• 05c. E05 S02 Lead Zuweisung pruefen: https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit

Naechster Schritt: Review in Subframe mit Fokus auf S00 bis S05 plus S02L/E05. Die Seiten 80-93 bleiben spaeter/Referenz und werden nur bei Bedarf geprueft.