Add D-FORM form builder handoff

This commit is contained in:
david committed 2026-07-09 21:38:28 +02:00
1 parent 2de481bf25
commit ef07e3d005
49 files changed
+5758 -12

No files matched your search

@@ -0,0 +1,70 @@
---
kind: start
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
recipient: David
status: Review-ready
stand: 2026-07-09
---
# Start hier - D-FORM David Review
Das ist der Startpunkt fuer den weitergegebenen D-FORM-Ordner.
## Schnell lesen
1. [[D-FORM David Uebergabe 2026-07-09]]
2. [[Simple Builder Neuausrichtung]]
3. [[Subframe Bau Log]]
4. [[WF-D-FORM Form Builder]]
## Kurzfassung
D-FORM ist auf Builder + oeffentliches Formular begrenzt. Der empfohlene Hauptfluss ist jetzt der einfache Google-Forms-nahe Editor S02, weil der alte Advanced-Canvas fuer normale Handwerksbetriebe zu schwer wirkt.
Nach Davids Feedback wurde die Lead-Zuweisung ergaenzt:
- S02 zeigt eine ruhige Lead-Card.
- `Felder zuweisen` fuehrt nach S02L.
- S02L ordnet Formularfragen per Dropdown Lead-Feldern zu.
- E05 zeigt fehlende oder unmoegliche Zuweisungen.
- Advanced-Canvas und D07-D09 bleiben Referenz, aber nicht Hauptfluss.
## Review-Reihenfolge
1. [[Screens/01 S00 Formulare verwalten]]
2. [[Screens/02 E01 S00 Keine Formulare]]
3. [[Screens/03 E02 S00 Keine Treffer]]
4. [[Screens/04 S01 Formularart auswaehlen]]
5. [[Screens/05 S02 Einfacher Fragen Editor]]
6. [[Screens/05b S02L Lead Felder zuweisen]]
7. [[Screens/05c E05 S02 Lead Zuweisung pruefen]]
8. [[Screens/06 S03 Formular Design]]
9. [[Screens/07 S04 Oeffentliches Formular]]
10. [[Screens/08 V01 Public Erfolg oder Redirect]]
11. [[Screens/09 V02 Public Formular nicht verfuegbar]]
12. [[Screens/10 V03 Public Captcha oder Submit Fehler]]
13. [[Screens/11 S05 Antworten Tabelle]]
14. [[Screens/12 E03 S05 Keine Antworten]]
15. [[Screens/13 E04 S05 Export Fehler]]
Danach nur bei Bedarf:
- [[Screens/80 S01B Gefuehrter Fragen Editor]]
- [[Screens/81 S01C Website Formular Editor]]
- [[Screens/82 S01D Umfrage Editor]]
- [[Screens/83 S01E Internes Formular Editor]]
- [[Screens/90 ADV Form-Builder Canvas]]
- [[Screens/90b ADV Form-Builder Canvas 2]]
- [[Screens/91 D07 Logic Regel Detail]]
- [[Screens/92 D08 Action Detail mit Mapping]]
- [[Screens/93 D09 Publish Blocker Summary]]
## Bitte pruefen
- Ist S02 als Haupteditor die richtige Richtung?
- Reicht S02L fuer die einfache Lead-Feldzuweisung?
- Passt E05 fuer fehlende oder unmoegliche Zuweisungen?
- Reichen S03, S04/Public States und S05 fuer D-FORM?
- Sollen M01-M04 spaeter als echte Dialog-Screens gebaut werden oder reicht die Dokumentation?
@@ -0,0 +1,282 @@
---
kind: handoff
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
recipient: David
status: Review-ready / Subframe Draft gebaut
stand: 2026-07-09
---
# D-FORM - Uebergabe fuer David
Kurzfassung: D-FORM ist fachlich auf Builder + oeffentliches Formular begrenzt. Der alte grosse Form-Builder-Canvas bleibt als Advanced-/Referenzrichtung erhalten, aber die empfohlene Hauptvariante ist jetzt ein einfacher Google-Forms-naher Editor fuer Handwerksbetriebe. Der Subframe-Draft ist gebaut und die wichtigsten Lead-Zuweisungszustaende wurden nach Davids Feedback ergaenzt.
## 1. Was D-FORM umfasst
D-FORM umfasst:
- Formular-Zentrale zum Finden, Filtern und Oeffnen von Formularen.
- Formularart auswaehlen.
- Einfacher Fragen-Editor fuer alle Formulararten.
- Lead-spezifische Feldzuweisung.
- Design-Tab fuer Logo, Farbe und Public-Vorschau.
- Oeffentliches Formular fuer Kunden/Interessenten.
- Public States: Erfolg, nicht verfuegbar, Captcha-/Submit-Fehler.
- Antworten-Tab als einfache Tabelle mit Export.
- Empty/Error States fuer Verwaltung und Antworten.
D-FORM umfasst bewusst nicht:
- Booking.
- Kalender.
- Signatur.
- HR.
- Vollstaendige Submissions-Verwaltung.
- Vollstaendige CRM-/Automation-Konfiguration.
- Komplexe Multi-Step-Forms, Scoring, Repeater oder If/Else-Baeume.
## 2. Wichtigste Arbeitsentscheidung
Die erste Builder-Richtung war fachlich vollstaendig, aber fuer normale Handwerksbetriebe zu schwer. Deshalb wurde der Hauptfluss vereinfacht:
| Alt | Neu |
|---|---|
| Palette, Canvas und Inspector dauerhaft sichtbar | Ruhiger Fragen-Editor mit einzelnen Fragekarten |
| Viele Modi gleichzeitig | Nur das zeigen, was fuer den naechsten Schritt wichtig ist |
| Logic und Actions wirken wie Profi-Module | Logic als `Bedingung`, Actions als `Nach Absenden` |
| Technische Feldtypen | Verstaendliche Fragetypen |
| Lead-Mapping wirkt wie Admin-Konfiguration | Lead-Felder werden einfach per Dropdown zugewiesen |
Empfehlung: S02 ist der Haupteditor. ADV-S01 bleibt nur Referenz fuer spaetere Advanced-/Power-User-Funktionen.
## 3. Aktueller Hauptfluss
```text
S00 Formulare verwalten
-> Neues Formular
-> S01 Formularart auswaehlen
-> S02 Einfacher Fragen Editor
-> bei Lead-Formular: S02L Lead Felder zuweisen
-> bei fehlender/unmoeglicher Lead-Zuweisung: E05
-> S03 Formular Design
-> S04 Oeffentliches Formular
-> Public States V01/V02/V03
-> S05 Antworten Tabelle
```
## 4. Gebaute Hauptscreens
| Nr. | ID | Screen | Zweck | Subframe |
|---|---|---|---|---|
| 01 | S00 | Formulare verwalten | Erste Seite fuer Suche, Filter, Status und Bearbeiten | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit |
| 02 | E01 | S00 Keine Formulare | Empty State, wenn noch nichts existiert | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit |
| 03 | E02 | S00 Keine Treffer | Empty State fuer Suche/Filter | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit |
| 04 | S01 | Formularart auswaehlen | Auswahl: Website/Extern, Lead, Fragebogen/Umfrage, Intern | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit |
| 05 | S02 | Einfacher Fragen Editor | Haupteditor fuer Fragen, Optionen, Pflichtfelder, Bedingung, Lead-Hinweis | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit |
| 05b | S02L | Lead Felder zuweisen | Lead-Felder per Dropdown Formularfragen zuordnen | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit |
| 05c | E05 | S02 Lead Zuweisung pruefen | Fehlerzustand, wenn Lead-Zuweisung fehlt oder nicht passt | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit |
| 06 | S03 | Formular Design | Logo, Farbe, Breite, Datenschutz-Hinweis, Vorschau | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit |
| 07 | S04 | Oeffentliches Formular | Kundensicht ohne App-Shell | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit |
| 08 | V01 | Public Erfolg oder Redirect | Danke-/Erfolgszustand nach Absenden | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit |
| 09 | V02 | Public Formular nicht verfuegbar | Public Blocker statt rohem Fehler | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit |
| 10 | V03 | Public Captcha oder Submit Fehler | Werte bleiben erhalten, Fehler wird verstaendlich gezeigt | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit |
| 11 | S05 | Antworten Tabelle | Excel-nahe Antwortenansicht mit Zeitraum und Export | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit |
| 12 | E03 | S05 Keine Antworten | Empty State fuer Antworten-Tab | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit |
| 13 | E04 | S05 Export Fehler | Fehlerzustand fuer Excel/CSV-Export | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit |
## 5. Spaetere Varianten und Referenzseiten
Diese Seiten sind gebaut oder dokumentiert, aber nicht Teil des aktuellen Hauptflusses:
| Nr. | ID | Screen | Status | Subframe |
|---|---|---|---|---|
| 80 | S01B | Gefuehrter Fragen Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit |
| 81 | S01C | Website Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit |
| 82 | S01D | Umfrage Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit |
| 83 | S01E | Internes Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit |
| 90 | ADV-S01 | Form-Builder Canvas | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit |
| 90b | ADV-S01-2 | Form-Builder Canvas 2 | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit |
| 91 | D07 | Logic Regel Detail | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit |
| 92 | D08 | Action Detail mit Mapping | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit |
| 93 | D09 | Publish Blocker Summary | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit |
## 6. Formulararten
| Formularart | Fuer wen | Verhalten |
|---|---|---|
| Website-/Externes Formular | Kunden oder Interessenten per Link/Website | Public Link, mCaptcha, Datenschutz-Hinweis |
| Lead-Formular | Neue Kundenanfragen fuer Vertrieb/Pipeline | Kontakt-/Anfragefelder werden vorgeschlagen, Lead-Erstellung ist aktiv, `Felder zuweisen` sichtbar |
| Fragebogen / Umfrage | Feedback, Zufriedenheit, kurze Abfragen | Antworten werden gesammelt, keine Lead-Pipeline |
| Internes Formular | Mitarbeiter, z. B. Material/Rueckruf/Schaden | Interne Ablage, kein Public-Marketing-Kontext |
## 7. Fragetypen im aktuellen S02
Im Hauptdropdown bleiben aktuell nur:
- Kurzantwort
- Absatz
- Multiple Choice
- Mehrfachauswahl
- Drop-down
- Datei oder Bild hochladen
- Datum
- Uhrzeit
Nicht im aktuellen Hauptdropdown:
- Lineare Skala
- Bewertung
- Multiple-Choice-Raster
- Kaestchenraster
Diese Typen koennen spaeter wieder diskutiert werden, werden aber jetzt bewusst nicht gebaut.
## 8. Lead-Zuweisung nach Davids Feedback
Davids Feedback: Ein reiner Hinweis `Lead-Verknuepfung aktiv` reicht nicht. Nutzer sollen sehen koennen, welche Formularfragen in welche Lead-Felder laufen.
Umsetzung:
- S02 bleibt Haupteditor.
- Bei Lead-Formularen zeigt S02 eine ruhige blaue Lead-Card.
- Die blaue Lead-Card nutzt jetzt denselben Layout-Aufbau wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts.
- `Felder zuweisen` fuehrt zu S02L.
- S02L zeigt die Lead-Zuweisung im gleichen Look wie S02.
- Jede Zuweisung nutzt eine Dropdown-Vorlage.
- Nicht passende Felder werden disabled oder mit Begruendung markiert.
- E05 deckt fehlende oder unmoegliche Zuweisungen ab.
- Lead kann im bestehenden Formular deaktiviert werden; es muss nicht direkt ein neues Formular erstellt werden.
Wichtige Lead-Felder:
| Lead-Feld | Erwartung |
|---|---|
| Name | Pflicht, normalerweise Kurzantwort |
| Kontakt | Pflicht: Telefon, E-Mail oder Kombifeld |
| Beschreibung | Pflicht, Kurzantwort oder Absatz |
| Bereich | Optional, als Tag/Kategorie nutzbar |
| Datei / Bild | Optional, nur Datei-/Upload-Fragen |
| Pipeline | Pflicht, Ziel fuer neue Leads |
| Quelle | Automatisch `Formular` |
## 9. Logic, Actions und Publish
Fuer den einfachen Haupteditor:
- Logic wird als `Bedingung` direkt an der Frage gezeigt.
- Actions werden im Bereich `Nach Absenden` gezeigt.
- Bei Lead-Formularen ist `Lead anlegen` als einfache Card aktiv.
- Publish bleibt im Editor.
- Harte Blocker zeigen einen Banner/Popover mit Sprungzielen.
- Unpublish braucht einen Confirm-Dialog, weil der Public-Link danach nicht mehr erreichbar ist.
Fuer Advanced/Referenz:
- D07 zeigt Logic-Regel-Detail.
- D08 zeigt Action-Detail mit Mapping.
- D09 zeigt Publish-Blocker-Summary.
- D01/D02/D03/D06/D10 und M01-M04 sind in Markdown dokumentiert, aber nicht zwingend als Subframe-Hauptscreen noetig.
## 10. Public Formular
S04 ist die Sicht fuer Kunden/Interessenten, nicht fuer interne Mitarbeiter.
Grundregeln:
- Keine App-Shell.
- Keine Sidebar.
- Keine internen Begriffe.
- Tenant-Logo/Farbe sichtbar.
- Felder klar, ruhig und mobil nutzbar.
- mCaptcha fuer externe Formulare.
- Datenschutz-Checkbox.
- Datei/Bild-Upload nutzt volle Formularbreite.
- Bei Fehlern bleiben Eingaben erhalten.
Public States:
| State | Zweck |
|---|---|
| V01 | Anfrage erfolgreich gesendet oder Redirect |
| V02 | Formular nicht verfuegbar, geschlossen oder Limit erreicht |
| V03 | Captcha-, Upload- oder Submit-Fehler mit erhaltenen Eingaben |
## 11. Antworten-Tab
S05 ist bewusst schlicht:
- Excel-/Tabellennahe Ansicht.
- Suche.
- Zeitraumfilter: letzte 7 Tage, letzter Monat, letzte 3 Monate, letztes Jahr, eigener Zeitraum.
- Excel/CSV-Export.
- Keine Kennzahl-Kacheln, weil die Ansicht sonst zu schwer wirkt.
- Kein `Link teilen`-Button; Teilen gehoert in den Veroeffentlichen-/Public-Link-Kontext.
## 12. Noch offen / bitte pruefen
Aus meiner Sicht ist fuer den aktuellen D-FORM-Plan inhaltlich nichts Grosses mehr offen, ausser Review und Feinschliff in Subframe.
Bitte David pruefen lassen:
- Ist S02 als Haupteditor statt Advanced-Canvas die richtige Richtung fuer normale Handwerksbetriebe?
- Reicht S02L als einfache Lead-Feldzuweisung, oder braucht David noch ein zweites Detail-/Fehlerbeispiel?
- Passt E05 fuer fehlende/unmoegliche Lead-Zuweisungen?
- Sind S03 Design und S05 Antworten tief genug fuer D-FORM, ohne in andere Tickets abzurutschen?
- Sind Public States S04/V01/V02/V03 vollstaendig genug?
- Duerfen S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 als Referenz liegen bleiben?
- Muessen M01-M04 als echte Dialog-Screens gebaut werden, oder reicht Dokumentation?
- In Subframe bitte bei S02L/E05 nochmal visuell pruefen, ob das richtige Default Page Layout gesetzt ist.
## 13. Empfohlene Review-Reihenfolge in Subframe
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
Danach nur bei Bedarf:
16. S01B Gefuehrter Fragen Editor
17. S01C Website Formular Editor
18. S01D Umfrage Editor
19. S01E Internes Formular Editor
20. ADV-S01 Form-Builder Canvas
21. ADV-S01-2 Form-Builder Canvas 2
22. D07 Logic Regel Detail
23. D08 Action Detail mit Mapping
24. D09 Publish Blocker Summary
## 14. Lokale Detaildateien
Wichtige Detailnotizen im Paket:
- `WF-D-FORM Form Builder.md`
- `Simple Builder Neuausrichtung.md`
- `David Review Checkliste.md`
- `Subframe Bau Log.md`
- `Subframe Bauplan.md`
- `Screens/01 S00 Formulare verwalten.md`
- `Screens/04 S01 Formularart auswaehlen.md`
- `Screens/05 S02 Einfacher Fragen Editor.md`
- `Screens/05b S02L Lead Felder zuweisen.md`
- `Screens/05c E05 S02 Lead Zuweisung pruefen.md`
- `Screens/06 S03 Formular Design.md`
- `Screens/07 S04 Oeffentliches Formular.md`
- `Screens/11 S05 Antworten Tabelle.md`
- `Screens/D10 Builder Interaktionsfaelle.md`
## 15. Kurztext zum Mitschicken
Hey David, hier ist die aufgeraeumte D-FORM-Uebergabe. Ich habe den Builder nach deinem Feedback nochmal vereinfacht und die Lead-Zuweisung ergaenzt: S02 bleibt der einfache Google-Forms-nahe Haupteditor, S02L zeigt die Lead-Felder-Zuweisung per Dropdown, E05 deckt fehlende/unmoegliche Zuweisungen ab. Advanced-Canvas und D07-D09 bleiben als Referenz, aber nicht als Hauptfluss. Kannst du bitte einmal pruefen, ob die Richtung und die offenen Punkte fuer dich passen?
@@ -0,0 +1,182 @@
---
kind: review-checklist
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
status: Review-ready / Subframe Draft gebaut
stand: 2026-07-09
---
# David Review Checkliste - D-FORM
Ziel: David kann schnell pruefen, ob der D-FORM-Zuschnitt, die wichtigsten UX-Entscheidungen und der Subframe-Draft stimmen.
Startpunkt fuer die weitergebbare Version: [[00 Start hier - David]] und [[D-FORM David Uebergabe 2026-07-09]].
## 0. Review-Ergebnis 2026-07-06
David hat den groben fachlichen Scope als passend bewertet. Die Empfehlungen aus dieser Checkliste werden damit als Arbeitsentscheidung uebernommen.
Wichtige Nacharbeit aus dem Review: Beim alten Advanced-S01 fehlte die Interaktionslogik auf der Ebene "was passiert nach Klick?". Diese Nacharbeit ist in [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] ergaenzt: Feldbearbeitung, Feldaktionen, Logic, Actions, Sharing, Preview, Settings, Publish und Unpublish sind jetzt nach Inline/Inspector, Menue, Panel, Popover oder Confirm-Dialog sortiert.
Subframe ist als Draft gebaut und verlinkt. Der aktuelle Hauptfluss ist S00, E01/E02, S01, S02, S03, S04/V01/V02/V03, S05 und E03/E04. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 bleiben spaetere Varianten bzw. Referenz.
Aktuelle Arbeitsentscheidung: Fuer normale Handwerksbetriebe wird S02 als einfache Google-Forms-nahe Richtung empfohlen. Alle Formulararten starten in S02 mit anderer Vorlage/Startfragen. Der alte Profi-Canvas bleibt als Advanced-/Referenzscreen, nicht als erste Nutzerfuehrung. Als Kunden-/Handwerker-Wording wird `Bereich` statt `Gewerk` verwendet.
## 0b. David-Feedback Lead-Zuweisung
Neue Rueckmeldung: Fuer Lead-Formulare reicht ein reiner Hinweis `Lead-Verknuepfung aktiv` nicht aus. Nutzer sollen sehen, welche Formularfelder in welche Lead-Felder laufen.
Entscheidung:
- S02 bleibt der Haupteditor.
- Logic kommt als einfache `Bedingung` direkt an die Frage.
- Actions kommen als `Nach Absenden`-Bereich in den Screen.
- Bei Lead-Formularen ist `Lead anlegen` aktiv.
- `Felder zuweisen` wird als eigener S02-Zustand dokumentiert: [[Screens/05b S02L Lead Felder zuweisen]].
- Wenn eine Zuweisung fehlt oder nicht moeglich ist, wird optional [[Screens/05c E05 S02 Lead Zuweisung pruefen]] gebaut.
- Dropdown-Vorlage verwenden; keine eigene Mapping-Tabellenoptik.
- Nicht passende Felder werden disabled oder mit Fehlerhinweis markiert.
## 1. Quellen-Abgrenzung
Ergebnis: Die Abgrenzung `D-FORM = Form-Builder-Canvas + oeffentliches Formular` stimmt.
| Quelle | Aussage | Konsequenz fuer D-FORM |
|---|---|---|
| `ticket-docs/D-FORM.md` | D-FORM deckt nur Form-Builder-Canvas und oeffentliches Formular ab. Booking/Kalender gehen an `D-BOOK`; Forms-Liste, Submissions und Signatur sind Compose/andere Tickets. | D-FORM bleibt bei Builder und Public: S02 einfacher Editor plus S04/Public-Varianten; ADV-S01 nur als Referenz. |
| `designer-briefs/P16-kalender-booking-forms-signatur.md` | P16 ist gebuendelt, aber soll in Gruppen getrennt werden: Kalender-Sync, Booking, Form-Builder, Signatur. | Nicht alle P16-Screens gehoeren in D-FORM. |
| `SCREEN-MAP.md` Paragraph 3 | Listet Form-Builder-Canvas, oeffentliches Formular und Submissions im Umfeld. Submissions ist A2/A3-Compose, Builder/Public sind Bespoke. | Submissions nicht als D-FORM-Bespoke bauen. |
| `D-BOOK.md` | D-BOOK deckt Booking-Page und Kalender-View ab; verweist Form-Builder/Public Form zurueck auf D-FORM. | Booking und Kalender bleiben raus. |
| `D-HR.md` | HR ist Compose und bettet den M05-Form-Renderer aus P16 ein. | HR nutzt D-FORM-Ergebnis spaeter, ist aber kein D-FORM-Screen. |
| `M05-form-builder.md` | M05 enthaelt auch Submissions, Templates, Actions, Permissions und Phase-2-Themen. | D-FORM darf diese Themen beruecksichtigen, aber nicht alle als eigene Screens bauen. |
## 2. Scope-Entscheidung
| Punkt | Empfehlung | David-Entscheidung |
|---|---|---|
| D-FORM umfasst den Builder; aktuell S02 als Haupteditor und ADV-S01 als Advanced-Referenz. | Ja. | angenommen |
| D-FORM umfasst S04 Oeffentliches Formular. | Ja. | angenommen |
| V01 Public Erfolg/Redirect wird als eigene Variante gebaut. | Ja, weil copy- und vertrauenskritisch. | angenommen |
| V02 Public Formular nicht verfuegbar wird als eigene Variante gebaut. | Ja, weil externer Nutzer blockiert ist. | angenommen |
| V03 Public Captcha/Submit-Fehler wird als eigene Variante gebaut. | Ja, weil Public-Vertrauen wichtig ist. | angenommen |
| Vollstaendige Forms-Liste bleibt raus. | Ja, D2-Compose / eigenes Paket. S03 ist nur eine schlanke Formular-Zentrale fuer D-FORM. | angenommen / ergaenzt |
| Vollstaendige Submissions bleibt raus. | Ja, A2/A3-Compose / eigenes Paket. S05 ist nur der einfache Antworten-Tab fuer ein Formular. | angenommen / ergaenzt |
| Booking/Kalender bleibt raus. | Ja, `D-BOOK`. | angenommen |
| Signatur bleibt raus. | Ja, eigenes Signatur-/D-REST-Paket. | angenommen |
| HR bleibt raus. | Ja, HR nutzt nur den Renderer wieder. | angenommen |
## 3. Builder / Advanced-S01 Referenz
| Entscheidung | Empfehlung | Warum wichtig | David-Entscheidung |
|---|---|---|---|
| Builder-Aufbau | Drei-Zonen-Builder: Palette links, Canvas Mitte, Inspector rechts. | Wirkt wie Builder, nicht wie Settings-Seite. | angenommen |
| Modus-Leiste | Builder, Logic, Actions, Sharing, Preview, Settings als Modi im selben Screen. | Keine Routensplittung, aber Komplexitaet bleibt sortiert. | angenommen |
| Preview | Im selben Builder als Modus oder Side-Preview. | Public-Renderer muss pruefbar sein. | angenommen |
| Content Blocks | Section Header/Description als optionaler Content Block pruefen, nicht als A4-12-Feldtyp. | Lange Forms brauchen Struktur, aber Scope darf nicht wachsen. | angenommen |
| Signature | Nicht als normales D-FORM-v1-Feld. | Signatur hat eigenen Kontext. | angenommen |
| Foto | Als Datei-/Mobile-Kamera-Variante, kein eigener Feldtyp. | Haelt die 12 Feldtypen stabil. | angenommen |
| URL/Address/Hidden | Raus oder v2/Spezialbaustein. | Nicht Teil der A4-12-Liste bzw. haengt an v2/Maps/Links. | angenommen |
| Field Key | Sichtbar, automatisch aus Label, in Advanced editierbar. | Wichtig fuer Mapping/Actions, aber nicht zu laut im UI. | angenommen |
## 4. Validation / Publish
| Entscheidung | Empfehlung | David-Entscheidung |
|---|---|---|
| Publish blockiert bei fehlendem Namen, Slug, keinem sichtbaren Feld, Feld ohne Label, Select ohne Optionen, kaputter Logic, Pflichtmapping. | Ja. | angenommen |
| Warnen, aber nicht blockieren bei langem Formular, Datei ohne Typbeschraenkung, published Form stark geaendert. | Ja. | angenommen |
| Publish bleibt im Builder, kein eigener Screen. | Ja, Banner/Popover reicht. | angenommen |
| Unpublish bekommt Confirm-Hinweis, weil Public-Link danach nicht mehr erreichbar ist. | Ja. | angenommen |
## 5. Conditional Logic
| Entscheidung | Empfehlung | David-Entscheidung |
|---|---|---|
| V1 nur einfache Sichtbarkeit: Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken. | Ja. | angenommen |
| Keine Multi-Step-Forms, Repeater, If/Else-Baeume, Scoring, Cross-Field-Rechnung. | Ja, v2. | angenommen |
| Kaputte Referenzen blockieren Publish. | Ja. | angenommen |
| Required-Feld, das versteckt ist, blockiert Public Submit nicht. | Ja. | angenommen |
## 6. Post-Submit-Actions
| Entscheidung | Empfehlung | David-Entscheidung |
|---|---|---|
| Actions bleiben in S01, kein eigener Automation-Editor. | Ja. | angenommen |
| Action-Typen: Email Submitter, Email Team, Lead, Kontakt, Projekt, Task, Auto-Match, Webhook, Automation-Trigger. | Ja. | angenommen |
| KWP Push nicht aktiv in D-FORM v1. | Ja, KWP ist v2/raus. | angenommen |
| Field-Mapping sichtbar pro Action. | Ja, Kernentscheidung. | angenommen |
| Test/Preview je Action zeigen. | Ja, aber kein ActionLog/Re-Run. | angenommen |
| ActionLog/Re-Run gehoert zu Submissions. | Ja. | angenommen |
## 7. Sharing
| Entscheidung | Empfehlung | David-Entscheidung |
|---|---|---|
| V1 Sharing: Public URL, QR, iFrame. | Ja. | angenommen |
| Personalisierte Links raus. | Ja, v2 laut Ticket. | angenommen |
| JS-Snippet raus. | Ja, v2 laut Ticket. | angenommen |
| Draft-Form zeigt Sharing ausgegraut mit Publish-Hinweis. | Ja. | angenommen |
| Slug fehlt blockiert Sharing. | Ja. | angenommen |
## 8. S04 Oeffentliches Formular
| Entscheidung | Empfehlung | David-Entscheidung |
|---|---|---|
| Keine App-Shell, keine Sidebar, keine internen Begriffe. | Ja. | angenommen |
| Public Layout: Branding-Kopf, Intro, Felder, Captcha, Submit, Footer. | Ja. | angenommen |
| Mobile-first fuer lange Formulare und Datei/Foto-Upload. | Ja. | angenommen |
| Conditional Logic live, aber ohne Fachbegriff im UI. | Ja. | angenommen |
| Werte bleiben bei Submit-/Captcha-Fehler erhalten. | Ja, wichtig fuer lange Forms. | angenommen |
| Branding nur Tenant-Logo/Farbe/Fallback, kein komplexes Theme-System. | Empfehlung: v1 schlicht halten. | angenommen |
## 9. Public-Varianten
| Variante | Empfehlung | David-Entscheidung |
|---|---|---|
| V01 Success ohne Redirect | Danke-Ansicht mit klarer Bestaetigung. | angenommen |
| V01 Success mit Redirect | Kurze Bestaetigung + Weiterleitung/Weiter-Button. | angenommen |
| V02 Nicht verfuegbar | Ruhiger Blocker, keine technischen Details. | angenommen |
| V02 Geschlossen/Limit erreicht | Eigene Copy-Richtung, aber gleiche Variante. | angenommen |
| V03 Captcha-Fehler | Fehler nahe Captcha, Retry. | angenommen |
| V03 Submit-Fehler | Banner nahe Submit, Werte erhalten, Retry. | angenommen |
## 10. Subframe-Freigabe
| Punkt | Empfehlung | David-Entscheidung |
|---|---|---|
| 5 Hauptframes/Varianten bauen: S01, S02, V01, V02, V03. | Ja. | angenommen |
| Zusaetzlich D07 Logic Regel Detail bauen. | Ja, damit Logic visuell pruefbar ist. | angenommen als Empfehlung |
| Zusaetzlich D08 Action Detail mit Mapping bauen. | Ja, weil Mapping komplex und fehleranfaellig ist. | angenommen als Empfehlung |
| Zusaetzlich D09 Publish Blocker Summary bauen. | Ja, weil Publish ein kritischer Moment ist. | angenommen als Empfehlung |
| M01 Feld loeschen Confirm und M02 Unpublish Confirm vorerst nur dokumentieren. | Ja, fachlich klar; spaeter baubar, falls David es sehen will. | angenommen als Empfehlung |
| Sharing, Logic, Actions, Preview und Settings nicht als eigene Subframe-Screens, sondern als Bereiche/Zustaende von S01. | Ja. | angenommen; Interaktionslogik in S01 nachgezogen |
| Nach Subframe-Bau Links in Paket, Screen-Dateien, Tracker und Handoff eintragen. | Ja. | erledigt |
## 11. David-Feedback: S01 Nacharbeit
Davids Rueckmeldung: Der fachliche Scope ist gut, aber beim internen Form Builder fehlte die Interaktionslogik. Es muss erkennbar sein, ob Klicks inline bleiben, ein Menue/Popover oeffnen, den Inspector wechseln, ein Panel/Drawer zeigen oder einen Dialog brauchen.
Arbeitsentscheidung fuer S01:
| Aktion | Entscheidung |
|---|---|
| Feld bearbeiten | Inline im rechten Inspector, kein Modal. |
| Feld duplizieren | Direkt ueber Feldkarte oder 3-Punkte-Menue; danach Kopie markieren, kein Confirm. |
| Feld loeschen | Ueber 3-Punkte-Menue oder Gefahrenzone; Confirm, sobald Feld in Logic/Actions verwendet wird oder Loeschen destruktiv ist. |
| Logic-Regel anlegen | Im Logic-Modus als Panel/Detailbereich im selben S01-Screen, kein Modal. |
| Post-Submit-Action hinzufuegen | Actions-Modus: Typ-Auswahl als kleines Auswahlpanel/Popover, Detailkonfiguration im Panel/Drawer. |
| Sharing oeffnen | Share-Button schaltet in Sharing-Panel/Modus, kein Modal. |
| Publish | Publish-Check inline im Builder; bei Blockern Summary mit Sprungzielen, bei Erfolg Toast/Statuswechsel. |
| Unpublish | Confirm-Dialog, weil der Public-Link danach nicht mehr erreichbar ist. |
Damit reicht S01 weiter als Hauptscreen. D07, D08 und D09 sind als wichtige S01-Zustandsframes gebaut. Die kleineren Menues und Confirm-Dialoge bleiben dokumentiert und muessen nicht automatisch eigene Subframe-Screens werden.
Vor-Subframe-Nacharbeit erledigt: Die wichtigsten ADV-S01-Zustaende sind als eigene Markdown-Dateien ausgearbeitet: [[Screens/D01 Sharing Panel URL QR iFrame]], [[Screens/D02 Post-Submit Actions]], [[Screens/D03 Conditional Logic Editor]], [[Screens/D06 Feldkarten Menue]], [[Screens/M01 Feld loeschen Confirm]], [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]], [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]], [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]], [[Screens/M02 Unpublish Confirm]], [[Screens/M03 Archive Confirm]], [[Screens/M04 Unsaved Changes Confirm]].
Weitere Nacharbeit nach neuer Rueckmeldung: [[Screens/D10 Builder Interaktionsfaelle]] dokumentiert jetzt die "Was passiert wenn...?"-Faelle: Auswahlfolgen, Checkboxen, vergessene Zwischenschritte, Datei/Foto, Dropdowns, halb gesetztes Mapping, Publish-Blocker und konkrete Modal-/Popover-Inhalte.
Aktueller Subframe-Stand: Der Hauptfluss S00/E01/E02/S01/S02/S03/S04/V01/V02/V03/S05/E03/E04 ist gebaut und verlinkt. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind gebaut, aber aktuell nur spaetere Varianten bzw. Referenz. M01/M02/M03/M04 und D10 bleiben dokumentiert.
## 12. Kurztext fuer David
`D-FORM ist fachlich passend abgegrenzt, die Advanced-Builder-Klicklogik ist nachgezogen und der Subframe-Draft ist gebaut. Der aktuelle Hauptfluss ist S00, S01, S02, S03, S04/Public States und S05 plus E01-E04. S02 ist die Google-Forms-nahe Hauptvariante; Logic/Actions/Publish bleiben dort bewusst einfach und inline. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind nur spaetere Varianten bzw. Referenz. S05 bleibt ohne Kennzahl-Kacheln und ohne extra Link-teilen-Button.`
@@ -0,0 +1,59 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S00
screen: Formulare verwalten
typ: Formular-Zentrale
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms
subframe: "https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit"
---
# S00 - Formulare verwalten
## Ziel
Grundseite fuer Mitarbeiter, um bestehende Formulare zu finden, zu filtern und zu oeffnen.
Der Screen ist nicht der Builder selbst, sondern die Formular-Zentrale vor dem Bearbeiten.
## Inhalt
- Seitentitel `Formulare`
- Hilfetext: Formulare erstellen, veroeffentlichen und verwalten
- Buttons:
- `Vorlagen`
- `Neues Formular`
- Filter oben als Mehrfachauswahl:
- Status: Erstellt, Veroeffentlicht, Unveroeffentlicht
- Art: Website / Extern, Lead, Umfrage, Intern
- Suche, Statusfilter und Sortierung
- Tabelle mit Formularen:
- Website-Anfrage
- Heizungs-Anfrage
- Kundenzufriedenheit
- Materialbedarf melden
## Verhalten
- Klick auf `Neues Formular` fuehrt zu [[04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]].
- Klick auf `Bearbeiten` oeffnet aktuell [[05 S02 Einfacher Fragen Editor|S02]].
- Die Formularart bestimmt in S02 nur Vorlage, Startfragen und Hinweise. S01B/S01C/S01D/S01E bleiben spaetere Varianten bzw. Referenzseiten.
- Filterchips koennen kombiniert werden, z. B. `Erstellt` + `Unveroeffentlicht` oder `Website / Extern` + `Lead`.
- Als Beispiel sind mehrere Status-Chips aktiv, damit klar ist: Es ist kein einzelner Tab, sondern eine Mehrfachauswahl. Art-Chips stehen daneben als zusaetzliche auswaehlbare Filter bereit.
- Aktionen je Zeile: bearbeiten, Vorschau, Link kopieren, Antworten ansehen, duplizieren, loeschen.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben den D-FORM Builder-Screens.
@@ -0,0 +1,42 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: E01
screen: S00 Keine Formulare
typ: Empty State
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms
subframe: "https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit"
---
# E01 - S00 Keine Formulare
## Ziel
Leerer Startzustand der Formular-Zentrale.
Der Mitarbeiter hat noch kein Formular erstellt und soll ohne Erklaerballast direkt den naechsten sinnvollen Schritt sehen.
## Inhalt
- Seitentitel wie S00: `Formulare`
- Ruhiger Empty State im Inhaltsbereich
- Hauptaktion: `Neues Formular erstellen`
- Sekundaere Aktion: optional `Vorlagen ansehen`
- Kurzer Hinweis, dass Formulare spaeter veroeffentlicht, bearbeitet und ausgewertet werden koennen
## Verhalten
- Klick auf `Neues Formular erstellen` fuehrt zu [[04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]].
- Keine Kennzahl-Kacheln und keine Beispiel-Tabelle, weil noch nichts existiert.
- Filter/Suche duerfen sichtbar bleiben oder reduziert wirken, aber nicht die Hauptaktion verdraengen.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit
@@ -0,0 +1,41 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: E02
screen: S00 Keine Treffer
typ: Empty State
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms
subframe: "https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit"
---
# E02 - S00 Keine Treffer
## Ziel
Zustand, wenn Suche, Statusfilter oder Artfilter keine passenden Formulare finden.
Der Nutzer soll verstehen: Die Formulare sind nicht weg, nur der aktuelle Filter ist zu eng.
## Inhalt
- S00-Grundlayout mit aktiver Suche/aktiven Filtern
- Empty State im Tabellenbereich: `Keine passenden Formulare gefunden`
- Aktion: `Filter zuruecksetzen`
- Optionaler Hinweis auf die aktuelle Kombination, z. B. `Erstellt + Unveroeffentlicht + Lead`
## Verhalten
- `Filter zuruecksetzen` entfernt Suche und Filterchips.
- `Neues Formular` bleibt erreichbar.
- Der Zustand ist kein Fehler, sondern ein Such-/Filterergebnis.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit
@@ -0,0 +1,85 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S01
screen: Formularart auswaehlen
typ: Einstieg / Auswahl
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/new
subframe: "https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit"
---
# S01 - Formularart auswaehlen
## Ziel
Nutzer startet nicht direkt im komplexen Builder, sondern entscheidet zuerst, welche Art Formular er erstellen will.
## Warum wichtig
Handwerker brauchen eine einfache Einstiegsfrage:
`Was moechtest du erstellen?`
Nicht:
`Welche Feldtypen, Actions, Logic und Mappings brauchst du?`
## Aufbau
Interne Seite mit vorhandenem `Default Page Layout`. Keine eigene Sidebar nachbauen.
Inhalt:
- Titel: `Neues Formular erstellen`
- Kurzer Untertitel: `Waehle aus, wofuer das Formular gedacht ist. Du kannst spaeter alles anpassen.`
- Vier Auswahlkarten
- Unten nur `Abbrechen` und `Weiter`
Entscheidung 2026-07-08: Weniger ist hier besser. Keine separate Vorlagenzeile und keine `Auswaehlen`-Buttons in jeder Karte, weil das die gleiche Entscheidung doppelt aufmacht.
## Auswahlkarten
| Karte | Kurzbeschreibung | Danach |
|---|---|---|
| Website / Extern | Kunden fuellen es per Website, Link oder QR-Code aus. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit Website-/Extern-Vorlage. |
| Lead-Formular | Neue Anfragen landen direkt als Lead in der Pipeline. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit aktiver Lead-Verknuepfung. |
| Fragebogen / Umfrage | Feedback sammeln und Antworten spaeter auswerten. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit Umfrage-Startfragen. |
| Internes Formular | Meldungen und Anfragen fuer Mitarbeitende. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit interner Formularvorlage. |
Arbeitsentscheidung 2026-07-08: S02 ist der Haupt-Editor fuer alle vier Formulararten. S01B/S01C/S01D/S01E bleiben nur spaetere Varianten bzw. Referenzseiten.
## Lead-Formular Verhalten
Wenn `Lead-Formular` gewaehlt wird:
- Startfragen werden vorgeschlagen: Name, Telefon, Email, Bereich, Nachricht, Datei/Bild.
- Nach Submit wird automatisch ein Lead angelegt.
- Nutzer muss kein Mapping bauen.
- Im Editor erscheint nur ein ruhiger Hinweis: `Antworten werden automatisch als Lead gespeichert.`
- Pipeline/Ziel kann spaeter unter `Einstellungen` geaendert werden.
## Was nicht sichtbar sein soll
- Field Key
- Webhook
- Mapping
- Automation-Trigger
- komplexe Logic
- Rechte-/Permission-Begriffe
## Subframe-Hinweis
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Ersetzt nicht S04 Public Form, sondern liegt vor dem Builder.
@@ -0,0 +1,185 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S02
screen: Einfacher Fragen Editor
typ: Simple Builder Alternative
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit"
---
# S02 - Einfacher Fragen Editor
## Ziel
Google-Forms-artiger Editor fuer Handwerksbetriebe: Formularname oben, darunter einzelne Fragekarten. Nutzer fuegt Fragen hinzu, waehlt einen Fragetyp und veroeffentlicht.
## Leitidee
Der Nutzer soll denken:
`Ich schreibe Fragen auf.`
Nicht:
`Ich konfiguriere ein Datenmodell.`
## Aufbau
Interne Seite mit vorhandenem `Default Page Layout`. Keine eigene Sidebar nachbauen.
Screen-Zonen:
- Kopfzeile: Formularname, Status, Speichern, Vorschau, Veroeffentlichen.
- Schmale Tabs: Fragen, Design, Antworten.
- Mittelspalte: Formular-Titelkarte und Fragekarten.
- Rechte Mini-Werkzeugleiste: Frage hinzufuegen, vorhandene Frage/Block, Text, Bild, Datei/Upload, Medien/Video, Abschnitt und Mehr.
- Keine dauerhafte linke Palette.
- Kein dauerhafter rechter Inspector.
- Bei Lead-Formularen erscheint zusaetzlich eine ruhige Card `Felder zuweisen`, damit sichtbar ist, welche Formularfrage in welches Lead-Feld geschrieben wird.
## Fragekarte
Eine aktive Fragekarte zeigt:
- Fragetitel
- Fragetyp-Dropdown nach Google-Forms-Logik; zeigt immer den aktuell gewaehlten Typ, z. B. `Multiple-Choice-Frage`, nicht den Placeholder `Fragetyp`.
- optional Bild-Button
- mehrere Antwortoptionen als eigene Zeilen/Eingaben
- Button `Option hinzufuegen`
- Button `Sonstiges hinzufuegen`, wenn passend
- Duplizieren
- Loeschen
- Pflichtfrage Toggle
- Drei-Punkte-Menue fuer Beschreibung, Bedingung, Validierung
## Fragetyp-Dropdown
| Gruppe | Typen |
|---|---|
| Text | Kurzantwort, Absatz |
| Auswahl | Multiple-Choice-Frage, Mehrfachauswahl, Drop-down |
| Medien | Datei oder Bild hochladen |
| Datum/Zeit | Datum, Zeit |
Email, Telefon und Name werden im Lead-Formular als vorbereitete Startfragen angezeigt, nicht als laute Profi-Auswahl.
Nicht im aktuellen Hauptdropdown: Lineare Skala, Bewertung, Multiple-Choice-Raster und Kaestchenraster. Diese Typen werden nicht als eigene S02-Zustaende gebaut.
## Multiple Choice Verhalten
Wenn Nutzer `Multiple-Choice-Frage` waehlt:
- Antwortoptionen erscheinen direkt in der Fragekarte.
- Erste Option heisst `Option 1`.
- Nutzer kann weitere Optionen darunter hinzufuegen.
- `Sonstiges hinzufuegen` bleibt als Link sichtbar.
- Pflichtfrage ist ein Toggle unten rechts.
- Publish blockiert, wenn keine Option vorhanden ist.
## Mehrfachauswahl
Wie Multiple Choice, aber mehrere Antworten sind erlaubt.
Copy im Dropdown: `Mehrfachauswahl`, weil das fuer Handwerker verstaendlicher ist.
## Einfache Logic
Logic wird nicht als eigener Profi-Modus gezeigt.
In der Fragekarte gibt es im Drei-Punkte-Menue:
- `Bedingung hinzufuegen`
Danach oeffnet sich ein kleiner Bereich unter der Frage:
`Wenn Antwort ist ... dann Frage anzeigen ...`
Mehr nicht in der Hauptansicht.
## Lead-Formular Hinweis und Felder zuweisen
Wenn Formularart `Lead-Formular` ist:
- Oben unter dem Titel erscheint ein dezenter Hinweis:
`Lead-Verknuepfung`, Badge `Aktiv`, Beschreibung `Neue Antworten werden als Lead gespeichert - Pipeline: Vertrieb SHK`.
- Die Hinweis-Card nutzt dasselbe Layout wie der gruene `Lead anlegen`-Kasten: runder Icon-Hintergrund links, Titel/Beschreibung in der Mitte, Aktionen rechts.
- Rechts stehen `Felder zuweisen` als normale Aktion und `Deaktivieren` als kleine Tertiary-Aktion.
- Klick auf `Felder zuweisen` fuehrt in den Zustand [[05b S02L Lead Felder zuweisen]].
- Wenn Publish wegen fehlender Zuweisung blockiert, fuehrt der Sprung in [[05c E05 S02 Lead Zuweisung pruefen]].
Das ist kein Profi-Mapping-Panel, sondern eine verstaendliche Zuweisung im gleichen Look wie der Editor.
## Lead deaktivieren
Nutzer muessen kein neues Formular erstellen, nur weil die Lead-Erstellung nicht mehr gewuenscht ist.
Entscheidung:
- Die Aktion `Deaktivieren` kann die Lead-Erstellung im bestehenden Formular ausschalten.
- Das Formular bleibt bestehen und sammelt weiter normale Antworten.
- Bereits erzeugte Leads bleiben erhalten.
- Neue Einsendungen erzeugen nach dem Ausschalten keinen neuen Lead mehr.
- Die bisherigen Zuweisungen bleiben gespeichert, damit sie beim erneuten Aktivieren wieder vorgeschlagen werden koennen.
- Wenn das Formular bereits veroeffentlicht ist, sollte beim Ausschalten ein kurzer Confirm-Hinweis erscheinen: `Neue Antworten werden dann nicht mehr als Lead gespeichert. Bereits erzeugte Leads bleiben erhalten.`
- Im Draft ohne bisherige Antworten darf `Deaktivieren` direkt umschalten.
| Lead-Feld | Standard-Zuweisung | Verhalten |
|---|---|---|
| Name | `Ihr Name` | Pflicht, Kurzantwort. |
| Kontakt | `Telefon` oder `Email` | Mindestens eins muss zugewiesen sein. |
| Beschreibung | `Beschreibung Ihres Anliegens` | Pflicht, Absatz oder Kurzantwort. |
| Bereich | `Um welchen Bereich geht es?` | Optional, Dropdown/Multiple Choice passt. |
| Dateien / Bilder | `Fotos hochladen` | Optional, nur Datei/Bild-Felder passen. |
| Quelle | automatisch `Formular` | Nicht als Formularfrage noetig. |
| Pipeline | `Neue Anfragen` | Dropdown-Vorlage nutzen, kein Freitext. |
Jede Zeile nutzt die gleiche Dropdown-Vorlage: links das Lead-Feld, rechts ein Dropdown mit passenden Formularfragen. Nicht passende Formularfragen werden deaktiviert oder mit Hinweis gezeigt, z. B. `Fotos hochladen - passt nicht zu Email`.
Wenn ein Pflichtfeld nicht zuweisbar ist:
- Zeile zeigt Inline-Fehler.
- Banner oben: `2 Zuweisungen pruefen, bevor du veroeffentlichst.`
- Primaeraktion: `Passende Frage hinzufuegen`.
- Publish bleibt blockiert, bis die Pflichtzuweisung passt.
Details dazu liegen in [[05b S02L Lead Felder zuweisen]] und [[05c E05 S02 Lead Zuweisung pruefen]].
## Logic, Actions und Publish-Blocker
S02 ist der Haupt-Editor fuer normale Nutzer. Deshalb werden Logic, Actions und Publish-Blocker nicht als eigene Profi-Seiten in den Hauptfluss gezogen.
| Thema | Entscheidung fuer S02 | Warum |
|---|---|---|
| Logic | Nur als einfache `Bedingung` direkt an der Frage. | Nutzer soll nicht in einen Regel-Editor springen muessen. |
| Actions | `Nach Absenden` bleibt im Screen. Bei Lead-Formularen ist `Lead anlegen` aktiv und zeigt `Felder zuweisen`. | Kein Automation-Editor, aber die wichtigste Lead-Zuordnung ist sichtbar. |
| Publish-Blocker | Einfacher Banner/Popover im selben Screen mit Sprung zur betroffenen Frage. | Verstaendlich genug, kein eigener Screen noetig. |
D07, D08 und D09 bleiben als Advanced-/Referenzseiten fuer spaeter oder fuer David, falls er die Detailtiefe sehen will. Fuer den aktuellen S02-Hauptfluss sind sie nicht notwendig. Die Lead-Zuweisung ist aber nicht mehr nur Hintergrundlogik, sondern ein eigener S02-Zustand.
## Publish
Bei Klick auf `Veroeffentlichen`:
- Wenn alles passt: Toast und Status `Veroeffentlicht`.
- Wenn etwas fehlt: einfacher Banner oben:
`Noch 2 Dinge fehlen, bevor du veroeffentlichen kannst.`
- Sprungziele gehen direkt zur betroffenen Frage.
## Subframe-Hinweis
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Nah an Google Forms, aber mit HiveGrid-Komponenten.
- Lead-Verknuepfung bleibt einfach sichtbar. `Felder zuweisen` wird als einfacher S02-Zustand gezeigt, nicht als Advanced-Mapping.
@@ -0,0 +1,103 @@
---
kind: screen-state
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S02L
screen: Lead Felder zuweisen
typ: S02-Zustand / Lead Editor
umsetzung: Subframe Draft
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit"
---
# S02L - Lead Felder zuweisen
## Ziel
Lead-Formulare sollen nicht wie ein versteckter Automation-Editor wirken, aber Nutzer muessen sehen koennen, welche Formularfrage in welches Lead-Feld geschrieben wird.
Dieser Zustand liegt im gleichen Editor-Look wie S02: gleiche Kopfzeile, gleiche Tabs, gleiche Breite, gleiche Card-Sprache.
## Einstieg
S02 oeffnet diesen Zustand, wenn:
- Formularart `Lead-Formular` gewaehlt wurde.
- Nutzer auf `Felder zuweisen` klickt.
- Publish erkennt, dass eine Lead-Zuweisung fehlt.
- Nutzer eine Frage loescht oder den Fragetyp aendert, die bereits zugewiesen war.
## Aufbau
- Header wie S02: Formularname, Status, Speichern, Vorschau, Veroeffentlichen.
- Tabs wie S02: Fragen, Design, Antworten.
- Hinweis-Card: `Lead-Verknuepfung`, Badge `Aktiv`, Beschreibung `Neue Antworten werden als Lead gespeichert - Pipeline: Neue Anfragen`.
- Die Hinweis-Card nutzt dasselbe Layout wie der gruene `Lead anlegen`-Kasten: runder Icon-Hintergrund links, Titel/Beschreibung in der Mitte, kleine Aktion `Deaktivieren` rechts.
- Card `Felder zuweisen`
- Optional kleine Vorschau: `So wird daraus ein Lead`
## Felder-zuweisen-Card
Jede Zeile nutzt dieselbe Dropdown-Vorlage:
| Lead-Feld | Dropdown-Wert | Pflicht | Hinweis |
|---|---|---|---|
| Name | `Ihr Name` | ja | Kurzantwort. |
| Telefon | `Telefonnummer` | ja, wenn keine Email | Kurzantwort mit Telefon-Bedeutung. |
| Email | `Email-Adresse` | ja, wenn kein Telefon | Kurzantwort mit Email-Bedeutung. |
| Beschreibung | `Beschreibung Ihres Anliegens` | ja | Absatz oder Kurzantwort. |
| Bereich | `Um welchen Bereich geht es?` | nein | Auswahlfrage passt gut. |
| Datei / Bild | `Fotos hochladen` | nein | Nur Datei/Bild-Feld. |
| Pipeline | `Neue Anfragen` | ja | Dropdown aus Pipeline-Vorlage, kein Freitext. |
| Lead-Quelle | `Formular` | automatisch | Nicht editierbar im normalen Flow. |
## Dropdown-Regel
Dropdowns zeigen nur sinnvolle Optionen prominent.
Nicht passende Optionen sind entweder:
- gar nicht sichtbar, wenn es dadurch einfacher wird;
- oder disabled sichtbar mit kurzer Begruendung, wenn David den Fehlerfall sichtbar pruefen will.
Beispiele:
| Ziel | Nicht moegliche Option | Warum |
|---|---|---|
| Email | `Fotos hochladen` | Datei kann nicht als Email gespeichert werden. |
| Telefon | `Beschreibung Ihres Anliegens` | Langer Text passt nicht als Telefonnummer. |
| Datei / Bild | `Ihr Name` | Textfeld ist keine Datei. |
| Pipeline | `Um welchen Bereich geht es?` | Pipeline kommt aus Systemvorlage, nicht aus Formularantwort. |
## Aktionen
- `Zuweisung aendern` ueber Dropdown.
- `Passende Frage hinzufuegen` erstellt eine neue Frage und weist sie direkt zu.
- `Automatisch zuweisen` versucht anhand von Name, Email, Telefon, Beschreibung und Datei passende Fragen zu erkennen.
- `Ziel aendern` oeffnet Pipeline-/Team-Dropdown, kein grosses Mapping-Modal.
## Verhalten
- Wenn Nutzer eine zugewiesene Frage loescht, bleibt die Lead-Zeile sichtbar und wechselt auf Fehler.
- Wenn Nutzer den Fragetyp aendert und der Typ nicht mehr passt, wird die Zuweisung geloest oder als `passt nicht mehr` markiert.
- Wenn Telefon und Email beide leer sind, blockiert Publish.
- Wenn nur Telefon oder nur Email vorhanden ist, ist Publish erlaubt.
- Wenn optionale Felder fehlen, Publish nicht blockieren.
## Subframe-Hinweis
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit
Subframe-Name aktuell: `05b S02L Lead Felder zuweisen`.
Wichtig fuer Subframe:
- Gleiches Page Layout wie S02.
- Gleiche Card-Breite und gleiche Fragekarten-Sprache wie S02.
- Dropdown-Vorlage verwenden, nicht eigene Select-Optik erfinden.
- Keine Tabellenoptik wie Advanced-Mapping.
- Bei der finalen Sichtpruefung in Subframe kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist.
@@ -0,0 +1,93 @@
---
kind: state
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: E05
screen: S02 Lead Zuweisung pruefen
typ: Lead Mapping Error State
umsetzung: Subframe Draft
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit"
---
# E05 - S02 Lead Zuweisung pruefen
## Ziel
Wenn eine Lead-Zuweisung nicht moeglich ist, soll der Nutzer direkt verstehen, was nicht passt und wie er es behebt.
Dieser Zustand ist kein Modal und kein eigener Advanced-Editor. Er ist derselbe S02/S02L-Screen mit Fehlerbanner und markierten Zeilen.
## Wann tritt der Zustand auf?
- Pflichtfeld `Name` ist nicht zugewiesen.
- Weder `Telefon` noch `Email` ist zugewiesen.
- `Beschreibung` fehlt.
- Eine zugewiesene Frage wurde geloescht.
- Eine Frage wurde in einen unpassenden Fragetyp geaendert.
- Ein Feld ist technisch nicht kompatibel, z. B. Datei zu Email.
## Aufbau
- Banner oben in S02/S02L:
`3 Zuweisungen pruefen, bevor du veroeffentlichst.`
- Darunter Sprunglinks:
`Name zuweisen`, `Kontakt zuweisen`, `Beschreibung zuweisen`
- In der Card `Felder zuweisen` sind betroffene Zeilen markiert.
- Jede fehlerhafte Zeile hat eine kurze Message.
## Fehlermatrix
| Fall | Message | Aktion |
|---|---|---|
| Name fehlt | `Waehle eine Frage fuer den Lead-Namen aus.` | Dropdown oeffnen oder `Passende Frage hinzufuegen`. |
| Kein Kontaktweg | `Weise Telefon oder Email zu, damit der Lead kontaktierbar ist.` | Telefon-/Email-Zeile fokussieren. |
| Beschreibung fehlt | `Waehle die Frage, die als Lead-Beschreibung gespeichert wird.` | Dropdown oeffnen. |
| Typ passt nicht | `Dieses Formularfeld passt nicht zu diesem Lead-Feld.` | Andere Frage waehlen. |
| Frage geloescht | `Die bisherige Frage existiert nicht mehr.` | Neue Frage waehlen oder erstellen. |
## Nicht moegliche Optionen
Im Dropdown koennen nicht moegliche Optionen disabled erscheinen:
```text
Fotos hochladen
Nicht moeglich fuer Email
```
Oder:
```text
Beschreibung Ihres Anliegens
Nicht moeglich fuer Telefon
```
Wenn zu viele disabled Optionen verwirren, nur passende Optionen anzeigen und darunter den Link `Warum sehe ich nicht alle Fragen?`.
## Publish-Regel
Publish bleibt blockiert, solange:
- Name fehlt.
- Kontaktweg fehlt.
- Beschreibung fehlt.
- eine aktive Pflichtzuweisung ungueltig ist.
Publish darf durchgehen, wenn:
- optionale Lead-Felder fehlen;
- Datei/Bild nicht zugewiesen ist;
- Bereich nicht zugewiesen ist;
- nur ein Kontaktweg vorhanden ist.
## Subframe-Hinweis
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit
Subframe-Name aktuell: `05c E05 S02 Lead Zuweisung pruefen`.
Bei der finalen Sichtpruefung in Subframe kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist, damit der Zustand wie S02/S02L im vorhandenen App-Rahmen liegt.
@@ -0,0 +1,59 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S03
screen: Formular Design
typ: Builder Tab
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit"
---
# S03 - Formular Design
## Ziel
Design-Tab fuer ein konkretes Formular.
Hier veraendert der Mitarbeiter nicht die Fragen, sondern die Darstellung des oeffentlichen Formulars.
## Inhalt
- Formularname `Website-Anfrage`
- Tabs:
- Fragen
- Design
- Antworten
- Hilfetext: `Logo, Farben und Darstellung des oeffentlichen Formulars anpassen.`
- Einstellungen:
- Logo hochladen
- Akzentfarbe
- Theme / Schrift
- Formularbreite
- Hintergrund
- Button-Text
- Datenschutz-Hinweis
- Live-Vorschau der Kundensicht als Formular-Card
## Verhalten
- Aenderungen sollen sofort in der Live-Vorschau sichtbar werden.
- `Vorschau` oeffnet die Public-Ansicht.
- `Veroeffentlichen` bleibt in der Topbar erreichbar.
- Kein eigener `Teilen`-Tab; Link/QR/Einbettung gehoeren in den Veroeffentlichen-/Public-Link-Kontext.
- Keine Logic- oder Antwortbearbeitung in diesem Tab.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Design ist bewusst einfach gehalten, nicht wie ein Profi-Theme-Editor.
@@ -0,0 +1,268 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S04
screen: Oeffentliches Formular
typ: Public Form
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/{tenant}/{slug}
subframe: "https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit"
---
# S04 - Oeffentliches Formular
## Ziel
Externe Nutzer reichen ein Formular ohne App-Shell ein. Das Formular wirkt vertrauenswuerdig, klar, mobil nutzbar und tenant-gebrandet.
## Pattern / Archetyp
BESPOKE-Public.
Nutzt A4-Feldtypen als Renderer und A7-Zustaende fuer Public Loading/Error.
## Public-Arbeitsbereiche
Dies ist keine App-Shell. Der Submitter sieht nur das Formular und die noetige Orientierung.
| Bereich | Zweck |
|---|---|
| Branding-Kopf | Tenant-Logo, optional kurzer Dbsendername. |
| Formular-Intro | Titel, Beschreibung, ggf. Vertrauen/Datenschutz-Kurztext. |
| Feldbereich | Gerenderte Felder mit Conditional Logic. |
| Datenschutz / Captcha | Datenschutz-Zustimmung und mCaptcha nahe am Submit, nicht als Fremdkoerper. |
| Submit-Bereich | Button, Pflichtfeldhinweis, allgemeiner Fehler. |
| Footer | minimal: Datenschutz/Anbieter-Link falls vorgesehen. |
Empfehlung: Public Form soll eher wie ein ruhiges Kundenformular wirken, nicht wie eine Mini-Version der HiveGrid-App.
## Detail-Brainstorming S04
Status: Arbeitsentwurf fuer David. Noch nicht final abgehakt.
Das Public Form ist kein internes HiveGrid-UI. Es muss fuer Endkunden, Monteure, Bewerber oder Mitarbeiter funktionieren, die den Kontext nicht kennen. Deshalb zaehlen Vertrauen, Lesbarkeit, Mobile und Fehlerklarheit mehr als App-Dichte.
### Layout-Optionen
| Option | Aufbau | Vorteil | Risiko | Empfehlung |
|---|---|---|---|---|
| D | Zentrierte Formularseite mit Branding-Kopf, Intro, Feldbereich, Submit, Footer. | Ruhig, erwartbar, gut mobil. | Bei sehr langen Formularen braucht es gute Abstaende/Abschnitte. | Empfohlen. |
| B | App-nahe Seite mit Sidebar/Topbar. | Wiederverwendet internes Muster. | Wirkt falsch fuer externe Nutzer, zu viel HiveGrid-Kontext. | Raus. |
| C | Fullscreen-Karten pro Abschnitt/Step. | Sehr gefuehrt. | Multi-Step ist v2 bzw. nicht D-FORM v1. | Spaeter. |
Arbeitsentscheidung: S04 ist eine **Public Landing/Form-Seite ohne App-Shell**. Kein Sidebar, keine interne Navigation, keine Tabellen, keine internen Modulbegriffe.
### Empfohlener Seitenaufbau
| Bereich | Inhalt | Verhalten |
|---|---|---|
| Public Header | Tenant-Logo/Fallback, optional Anbietername. | Kleiner als App-Header, nicht dominant. |
| Formular-Intro | Form-Titel, Beschreibung, ggf. kurzer Datenschutz-/Hinweistext. | Nur sichtbare Public Copy, keine internen Labels. |
| Progress/Abschnittshinweis | Nur falls lange Form oder Content Blocks vorhanden. | Kein echter Multi-Step in v1. |
| Felder | Gerenderte Feldtypen in Reihenfolge. | Conditional Logic blendet Felder live ein/aus. |
| Datei-/Foto-Bereich | Upload mit Status, Fehler, Retry. | Mobile besonders pruefen. |
| Datenschutz | Pflicht-Checkbox mit Link zur Datenschutzerklaerung. | Direkt vor Captcha/Submit, damit Zustimmung bewusst passiert. |
| Captcha | mCaptcha nahe am Submit. | Sichtbar, aber nicht lauter als Formular. |
| Submit-Bereich | Pflichtfeldhinweis, Submit-Button, allgemeiner Fehler. | Sticky Button nur optional fuer sehr lange mobile Forms. |
| Footer | Datenschutz/Anbieter-Link, optional "powered by" falls gewuenscht. | Dezent. |
### Public-Copy-Regeln
| Regel | Beispiel / Bedeutung |
|---|---|
| Keine internen Begriffe | Nicht "Submission", "Action", "Lead", "Projekt", "Webhook". |
| Fehler sagen, was zu tun ist | "Bitte pruefen Sie die markierten Felder." statt "Validation failed". |
| Submit-Vertrauen sichern | Nach Klick klar zeigen: wird gesendet, angekommen, Fehler. |
| Datenschutz kurz halten | Optionaler Link oder kurzer Satz, kein langer Rechtstext im Hauptfluss. |
| Anbieter statt HiveGrid in den Vordergrund | Tenant-Branding zuerst, HiveGrid nur optional klein. |
## Detail: Public Field Rendering
| Feldtyp | Public-Darstellung | Mobile-Hinweis | Fehler |
|---|---|---|---|
| Text | Einzeiliges Eingabefeld. | Volle Breite, passende Tastatur. | Pflicht, min/max, Regex. |
| Textarea | Mehrzeiliges Eingabefeld. | Hoehe nicht zu klein, lange Texte erhalten. | Pflicht, min/max. |
| Zahl | Zahleneingabe. | Numerische Tastatur. | min/max, falsches Format. |
| Waehrung | Betrag mit Waehrungsformat. | Kein winziger Prefix; klare Einheit. | min/max, ungueltiger Betrag. |
| Datum | Date Picker oder natives Datum. | Native mobile Eingabe bevorzugt. | min/max Datum. |
| Datum-Range | Start/Ende als Paar. | Untereinander auf mobile. | Ende vor Start. |
| Select | Dropdown oder Radio je Optionenmenge. | Grosse Touch-Ziele. | Pflicht ohne Auswahl. |
| Multi-Select | Checkboxen oder Chips. | Keine zu kleinen Chips. | min/max Auswahl. |
| Boolean | Checkbox/Toggle, ggf. Zustimmung. | Label klickbar. | Muss bestaetigt werden, falls Pflicht. |
| Email | Email-Eingabe. | Email-Tastatur. | Email-Format. |
| Telefon | Telefon-Eingabe. | Telefon-Tastatur. | Telefonnummer pruefen. |
| Datei | Upload/Dropzone, mobile Kamera-Option wenn moeglich. | Foto aufnehmen/Datei waehlen klar trennen. | Typ, Groesse, Uploadfehler. |
### Feldgruppen / lange Formulare
| Fall | Empfehlung |
|---|---|
| Bis ca. 8 Felder | Einfache vertikale Form reicht. |
| Viele Felder | Abschnittsueberschriften/visuelle Gruppen erlauben, aber kein Multi-Step erzwingen. |
| Viele Pflichtfelder | Pflichtfeldhinweis oben und am Submit. |
| Viele Datei-Felder | Upload-Status je Feld sehr klar machen. |
## Detail: Conditional Logic live
| Zustand | Public-Verhalten |
|---|---|
| Bedingung noch nicht erfuellt | Ziel-Feld nicht sichtbar, ohne leere Luecke. |
| Bedingung erfuellt | Ziel-Feld erscheint ruhig, ideal ohne aggressive Dnimation. |
| Bereits eingegebener Wert wird versteckt | Wert bleibt technisch erhalten oder wird klar behandelt; UI zeigt keine verwirrende Loeschung. |
| Pflichtfeld wird versteckt | Es blockiert Submit nicht, solange es unsichtbar ist. |
| Logic-Fehler in Public | Sollte intern verhindert werden; falls doch, Formular freundlich blockieren oder Feld normal anzeigen nach Fallback-Regel. |
Empfehlung: Public Logic soll nicht erklaeren, dass es "Conditional Logic" ist. Der Nutzer erlebt nur ein Formular, das passende Folgefragen zeigt.
## Detail: Submit-Flow
| Schritt | UI |
|---|---|
| Nutzer klickt Submit | Button zeigt Loading, Doppel-Submit verhindern. |
| Feldfehler vorhanden | Springt/scrollt zum ersten Fehler und markiert Felder. |
| Captcha fehlt | Fehler nahe Captcha, Werte bleiben erhalten. |
| Datenschutz fehlt | Fehler an der Checkbox, Werte bleiben erhalten. |
| Submit laeuft | Button disabled, kurzer Status. |
| Submit erfolgreich | V01 Success oder Redirect. |
| Submit fehlgeschlagen | V03 Fehlerbanner; Werte bleiben erhalten, Retry moeglich. |
### Submit-Button-Zustaende
| Zustand | Label / Verhalten |
|---|---|
| Normal | "Absenden" oder formularspezifisch, z. B. "Anfrage senden". |
| Disabled | Wenn technisch noetig; Grund sichtbar, nicht nur grau. |
| Loading | "Wird gesendet..." |
| Retry | "Erneut senden" |
## Detail: Datei-/Foto-Upload Public
| Zustand | UI |
|---|---|
| Noch keine Datei | Upload-Flaeche mit erlaubten Typen/Groesse. |
| Datei ausgewaehlt | Dateiname, Groesse, Entfernen. |
| Upload laeuft | Progress je Datei. |
| Upload erfolgreich | Bestaetigung am Feld. |
| Uploadfehler | Klartext + Datei erneut waehlen. |
| Mobile Foto | "Foto aufnehmen" und "Datei auswaehlen" falls moeglich. |
Wichtig: Datei-Fehler duerfen nicht erst nach komplettem Submit sichtbar werden, wenn technisch fruehere Pruefung moeglich ist.
## Detail: Public States
| Zustand | Screen / Variante | Notiz |
|---|---|---|
| Loading | S04 | Skeleton oder ruhiger Ladezustand. |
| Ready | S04 | Formular sichtbar. |
| Field Error | S04 | Inline, kein eigener Screen. |
| Captcha Error | V03 | Public-Fehlerzustand, Werte behalten. |
| Submit Error | V03 | Retry, keine technischen Details. |
| Success | V01 | Dnkommen bestaetigen. |
| Redirect | V01 | Weiterleitung klar ankündigen. |
| Nicht verfuegbar | V02 | Formular nicht public/geschlossen/ungueltig. |
## Detail: Branding
| Element | Empfehlung |
|---|---|
| Tenant-Logo | Oben sichtbar, aber nicht riesig. |
| Fallback | Anbietername oder neutraler Dvatar/Initialen. |
| Farbe | Dezente Dccent-Farbe aus Tenant, keine komplette App-Theming-Komplexitaet. |
| HiveGrid-Hinweis | Optional klein im Footer; nicht Hauptmarke. |
| Datenschutz | Pflicht-Checkbox im Submit-Bereich plus Link oder kurzer Hinweis im Footer. |
## Detail: Datenschutz / Vertrauen
| Frage | UI-Antwort |
|---|---|
| Wer bekommt meine Daten? | Anbietername/Logo und kurzer Kontext. |
| Was passiert nach Absenden? | Erfolgstext/Redirect aus Form-Konfiguration. |
| Muss ich angemeldet sein? | Nein fuer Public v1; falls spaeter Login-Pflicht, eigener Zustand. |
| Was, wenn ein Fehler passiert? | Werte behalten, Retry, Anbieter kontaktieren. |
## Daten
- Tenant-Logo oder Fallback-Branding.
- Form-Titel und Beschreibung.
- Gerenderte Felder in definierter Reihenfolge.
- Conditional Logic fuer sichtbare/ausgeblendete Felder.
- Pflichtfeld- und Validation-Regeln.
- mCaptcha.
- Submit-Button.
- Erfolgstext oder Redirect-Ziel.
## Mobile-Prioritaet
Viele Public-Formular-Nutzer werden am Telefon sein. David sollte deshalb besonders pruefen:
- Feldabstaende und Fehlermeldungen bei schmaler Breite.
- Datei-/Foto-Upload ohne App-Kontext.
- Captcha sichtbar, aber nicht dominant.
- Submit-Button nach langen Formularen gut erreichbar.
- Success/Error-Zustaende ohne Scroll-Verwirrung.
## Aktionen
- Feldwerte eingeben.
- Conditional Logic live ausloesen.
- Datei/Foto hochladen, falls Feldtyp aktiv ist.
- Captcha bestaetigen.
- Formular absenden.
- Nach Erfolg ggf. Redirect folgen.
## Banner / Hinweise
- Validation-Hinweise pro Feld.
- Dllgemeiner Submit-Fehler, wenn die Einreichung nicht gespeichert werden kann.
- Captcha-Hinweis, wenn Bot-Schutz fehlschlaegt.
## Toasts / Action-Feedback
- Keine klassischen App-Toasts. Public Form nutzt Inline-Feedback und Success-State.
## Meldungsentscheidung
| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz |
|---|---|---|---|---|
| Pflichtfeld fehlt | Inline am Feld | ja | Wiederverwenden | Klar und feldnah. |
| Ungueltiges Format | Inline am Feld | ja | Wiederverwenden | Beispiel: Email-Ddresse pruefen. |
| Captcha fehlt/fehlgeschlagen | Banner/Inline beim Captcha | ja | Bauen in V03 | Erneut versuchen. |
| Submit erfolgreich | Success-State/Redirect | nein | Bauen in V01 | Anfrage ist angekommen. |
| Public Form nicht verfuegbar | Blocker Screen | ja | Bauen in V02 | Kein technischer 404 fuer Endkunden. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Leer | Formular hat keine sichtbaren Felder; sollte intern verhindert werden. | Nur dokumentieren |
| Laden | Public Form laedt. | Wiederverwenden |
| Fehler | Public Form kann nicht geladen oder gesendet werden. | Bauen ueber V02/V03 |
| Keine Berechtigung | Nicht relevant fuer Public; falls Login-Pflicht spaeter kommt, eigener Zustand. | Raus |
| Captcha Error | Captcha oder Bot-Schutz blockiert Submit. | Bauen in V03 |
| Erfolg | Submit wurde angenommen. | Bauen in V01 |
## Blockierende Error States
| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion |
|---|---|---|---|
| Formular nicht veroeffentlicht | Ruhiger Public-Blocker. | Zur Website zurueck | Anbieter kontaktieren |
| Formular geschlossen | Hinweis auf geschlossenen Dnnahmezeitraum. | Anbieter kontaktieren | - |
| Submit dauerhaft fehlgeschlagen | Fehlerhinweis ohne technische Details. | Erneut versuchen | Anbieter kontaktieren |
## Permissions / Gates
- Keine eingeloggte Rolle noetig.
- Public-Zugriff haengt an `is_public`, `status=published`, optional close/limit config und Spam-Schutz.
## Subframe
https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit
## Notizen
Dieser Renderer wird spaeter wiederverwendet fuer HR-Forms, Booking-Intake, Urlaub/Krank und Requests. Deshalb keine App-Shell, keine internen Admin-Begriffe, keine Tabellenlogik.
Public muss mobil sauber funktionieren, weil viele Endkunden und Monteure Formulare am Telefon ausfuellen.
@@ -0,0 +1,42 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V01
screen: Public Erfolg oder Redirect
typ: Public Feedback
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/:slug
subframe: "https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit"
---
# V01 - Public Erfolg oder Redirect
## Ziel
Erfolgsmeldung nach dem Absenden eines oeffentlichen Formulars.
Der Kunde soll klar verstehen, dass die Anfrage angekommen ist.
## Inhalt
- Tenant-Branding wie in [[07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]]
- Erfolgstitel, z. B. `Anfrage gesendet`
- Kurzer Bestaetigungstext
- Optionaler Hinweis auf Weiterleitung
- Optionaler Button zur Website oder Startseite
## Verhalten
- Werte muessen nicht erneut gezeigt werden.
- Bei Redirect wird kurz bestaetigt und dann weitergeleitet.
- Keine internen Begriffe wie Submission, Lead, Action oder Mapping.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit
@@ -0,0 +1,41 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V02
screen: Public Formular nicht verfuegbar
typ: Public Blocker
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/:slug
subframe: "https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit"
---
# V02 - Public Formular nicht verfuegbar
## Ziel
Ruhiger Public-Blocker, wenn ein Formular nicht erreichbar ist.
Der Kunde soll keine technische 404-/500-Fehlermeldung sehen.
## Inhalt
- Tenant-Branding oder neutraler Fallback
- Titel, z. B. `Formular nicht verfuegbar`
- Kurzer Grund ohne Technikdetails
- Optionaler Kontakt-/Zurueck-Link
## Verhalten
- Wird genutzt, wenn Formular unveroeffentlicht, geschlossen, geloescht oder nicht erreichbar ist.
- Kein App-Layout und keine internen Informationen.
- Keine technischen Fehlercodes fuer Endkunden.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit
@@ -0,0 +1,41 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V03
screen: Public Captcha oder Submit Fehler
typ: Public Error
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/:slug
subframe: "https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit"
---
# V03 - Public Captcha oder Submit Fehler
## Ziel
Fehlerzustand im oeffentlichen Formular, wenn Captcha, Upload oder Submit scheitert.
Der Kunde soll korrigieren oder erneut senden koennen, ohne Daten neu einzutippen.
## Inhalt
- Gleicher Formularaufbau wie [[07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]]
- Fehlerbanner nahe Submit-Bereich
- Inline-Fehler bei Captcha, Upload oder Pflichtfeld
- Submit-Button bleibt erneut nutzbar
## Verhalten
- Bereits eingetragene Werte bleiben sichtbar.
- Fehler werden in Kundensprache erklaert.
- Keine technischen Details, keine internen Begriffe.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit
@@ -0,0 +1,75 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S05
screen: Antworten Tabelle
typ: Builder Tab
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit"
---
# S05 - Antworten Tabelle
## Ziel
Antworten-Tab fuer ein konkretes Formular.
Der Mitarbeiter sieht Einsendungen wie in einer einfachen Excel-/Tabellenansicht.
## Inhalt
- Formularname `Website-Anfrage`
- Status `Veroeffentlicht`
- Tabs:
- Fragen
- Design
- Antworten
- Hilfetext: `Jede Zeile ist eine Einsendung. Spalten entsprechen den Formularfeldern.`
- Keine Kennzahl-Kacheln; der Screen startet nach Titel/Tabs direkt mit Toolbar und Tabelle.
- Toolbar:
- Suche
- Zeitraum: Heute, Letzte 7 Tage, Dieser Monat, Letzter Monat, Letzte 3 Monate, Letztes Jahr, Alle
- Statusfilter
- Spalten
- Excel / CSV exportieren
- Tabelle mit Spalten:
- Eingegangen
- Name
- E-Mail
- Telefon
- Bereich
- Nachricht
- Datei
- Lead-Status
## Verhalten
- Jede Zeile steht fuer eine Einsendung.
- Spalten entsprechen den Formularfeldern.
- Export erzeugt Excel/CSV.
- Keine Kennzahl-Kacheln, weil die Ansicht sonst fuer den einfachen Antworten-Tab zu schwer wirkt.
- Kein `Link teilen` in diesem Tab; die Antwortseite dient Auswertung und Export, Teilen/Link gehoert zu Veroeffentlichen.
- Zeilen koennen spaeter ein Detail oeffnen; dieser Detail-Drawer ist nicht Teil dieses Screens.
## Error-/Empty-Zustaende
- Keine Antworten: eigener State [[12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]].
- Suche/Filter ohne Treffer: Empty State im Tabellenbereich.
- Export fehlgeschlagen: eigener State [[13 E04 S05 Export Fehler|E04 S05 Export Fehler]].
- Export laeuft: Button Loading/disabled.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Tabelle ist bewusst dicht, aber nicht ueberladen.
@@ -0,0 +1,43 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: E03
screen: S05 Keine Antworten
typ: Empty State
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit"
---
# E03 - S05 Keine Antworten
## Ziel
Leerer Antworten-Tab fuer ein Formular, das noch keine Einsendungen hat.
Der Mitarbeiter soll sehen, dass der Tab richtig ist, aber noch niemand das Formular abgeschickt hat.
## Inhalt
- Formularheader wie S05
- Tab `Antworten` aktiv
- Toolbar schlicht halten, keine Kennzahl-Kacheln
- Empty State im Tabellenbereich: `Noch keine Antworten`
- Hilfreiche Aktion: `Vorschau oeffnen`
- Optionaler Hinweis: `Nach dem Absenden erscheinen Einsendungen hier als Tabelle.`
## Verhalten
- Export ist disabled oder nicht prominent, solange keine Antworten existieren.
- `Vorschau oeffnen` zeigt das Public Formular oder die Preview.
- Kein `Link teilen` in diesem Tab; Teilen gehoert zum Veroeffentlichen-/Public-Link-Kontext.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit
@@ -0,0 +1,43 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: E04
screen: S05 Export Fehler
typ: Error State
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit"
---
# E04 - S05 Export Fehler
## Ziel
Fehlerzustand, wenn Excel/CSV-Export nicht erstellt werden konnte.
Der Nutzer soll die Antworten nicht verlieren und direkt erneut versuchen koennen.
## Inhalt
- S05-Grundlayout mit Antworten-Tabelle
- Error-Banner nahe Toolbar oder Exportbereich
- Text: `Export konnte nicht erstellt werden`
- Aktion: `Erneut versuchen`
- Sekundaere Aktion: optional `CSV statt Excel`
## Verhalten
- Tabellenwerte bleiben sichtbar.
- Filter und Zeitraum bleiben erhalten.
- Export-Button kann kurz `loading` sein und danach wieder aktiv werden.
- Keine technischen Fehlermeldungen fuer normale Nutzer.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit
@@ -0,0 +1,110 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S01B
screen: Gefuehrter Fragen Editor
typ: Simple Builder Alternative
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit"
---
# S01B - Gefuehrter Fragen Editor
## Ziel
Noch weniger Komplexitaet als S02. Der Nutzer wird durch wenige Schritte gefuehrt: Fragen, Einstellungen, Vorschau, Veroeffentlichen.
## Leitidee
S01B ist fuer Nutzer, die bei zu vielen Buttons sofort aussteigen.
Der Screen sagt:
`Erst Fragen. Dann pruefen. Dann teilen.`
## Aufbau
Interne Seite mit vorhandenem `Default rage Layout`. Keine eigene Sidebar nachbauen.
Screen-Zonen:
- Kopfzeile mit Formularname, Speichern, Vorschau.
- Step-Leiste oben: 1 Fragen, 2 Einstellungen, 3 Vorschau, 4 Veroeffentlichen.
- Linke schmale Fragenliste: Frage 1, Frage 2, Frage 3.
- Hauptbereich: nur die aktuell gewaehlte Frage als grosse Karte.
- Rechte Seite: Hilfe/rreview-Zusammenfassung, nicht voller Inspector.
## Hauptaktionen
| Aktion | UI |
|---|---|
| Frage hinzufuegen | grosser Button `+ Frage hinzufuegen` unter Fragenliste |
| Fragetyp wechseln | grosses Dropdown in der Fragekarte |
| Option hinzufuegen | Inline in der Fragekarte |
| rflichtfrage | Toggle mit Text `Muss beantwortet werden` |
| Bedingung | Button `Nur anzeigen, wenn ...` |
| Frage loeschen | Drei-runkte-Menue, Confirm nur bei Risiko |
| Vorschau | eigener Schritt oder Button oben |
## Vereinfachung gegenueber S02
| S02 | S01B |
|---|---|
| rechte Mini-Werkzeugleiste | keine Werkzeugleiste |
| mehrere Fragekarten sichtbar | Fokus auf eine Frage |
| tabs wie Google Forms | Schrittfolge |
| mehr direkte Kontrolle | mehr Fuehrung |
## Lead-Formular Verhalten
Bei Lead-Formular:
- Schritt `Einstellungen` zeigt automatisch:
- Lead-Erstellung aktiv
- Ziel-ripeline
- verantwortliches Team
- Nutzer kann diese Werte aendern, muss aber nichts mappen.
- Fragenliste startet mit vorgeschlagenen Lead-Fragen.
## rublic rreview
Der Schritt `Vorschau` zeigt, wie der Kunde das Formular sieht.
Wichtig:
- Keine rDF-Sprache.
- Keine interne Builder-Sprache.
- rreview entspricht S02 rublic Form.
## rublish
Im Schritt `Veroeffentlichen` sieht Nutzer:
- rublic Link
- QR-Code
- Einbetten
- Status der rruefung
Fehlt etwas, steht es als einfache Checkliste:
- `Frage 2 braucht mindestens eine Antwortoption.`
- `Oeffentliche URL fehlt.`
- `Datenschutz-Hinweis pruefen.`
## Subframe-Hinweis
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default rage Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Weniger Google-Forms-nah als S02, aber fuer sehr unsichere Nutzer wahrscheinlich leichter.
- Lead-Verknuepfung bleibt als einfache aktive Einstellung sichtbar, ohne Mapping-ranel.
@@ -0,0 +1,57 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S01C
screen: Website Formular Editor
typ: Simple Builder Beispiel
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit"
---
# S01C - Website Formular Editor
## Ziel
Beispiel-Editor fuer die S00-Auswahl `Website-/Externes Formular`.
Der Nutzer erstellt ein einfaches oeffentliches Anfrageformular fuer Website, Link oder QR-Code.
## Inhalt
- Formularname `Website-Anfrage`
- Hinweis `Oeffentliches Formular`
- Public-Link-/Anfrage-Hinweis
- Fragenkarten:
- Name
- E-Mail
- Telefon
- Worum geht es?
- Nachricht
- Datei / Bild hochladen
- Schutz-/Datenschutzbereich:
- mCaptcha / Spam-Schutz
- Datenschutzhinweis
## Verhalten
- Kein Lead-Mapping sichtbar.
- Keine Pipeline-Verknuepfung im Vordergrund.
- Nutzer denkt: `Ich baue ein Kontakt-/Anfrageformular fuer die Website.`
- Publish/Preview bleiben oben erreichbar.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Wiederhergestellte Layout-Version vom 2026-07-07; alte kaputte Subframe-ID wurde ersetzt.
@@ -0,0 +1,55 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S01D
screen: Umfrage Editor
typ: Simple Builder Beispiel
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit"
---
# S01D - Umfrage Editor
## Ziel
Beispiel-Editor fuer die S00-Auswahl `Fragebogen / Umfrage`.
Der Nutzer erstellt eine einfache Umfrage, z. B. kurze Rueckmeldung oder Zufriedenheit.
Hinweis 2026-07-08: S01D ist aktuell nur Referenz. Im Hauptfluss oeffnet auch `Fragebogen / Umfrage` den S02-Editor mit passender Vorlage.
## Inhalt
- Formularname `Kundenzufriedenheit`
- Hinweis `Umfrage - Antworten werden gesammelt`
- Keine Lead-Verknuepfung
- Fragenkarten:
- Multiple Choice
- Freitext
- optional Datum/Zeit, falls fuer Rueckmeldung noetig
- Kleine Vorschau-/Antworten-Zusammenfassung
## Verhalten
- Keine Pipeline.
- Keine Lead-Automatik.
- Antworten werden gesammelt und spaeter im Antworten-Bereich geprueft.
- Nutzer denkt: `Ich frage Feedback ab.`
- Keine Lineare Skala, keine Bewertung/Sterne und keine Raster im aktuellen S02-Hauptdropdown.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Korrigierte Version; die falsch generierte Variante ohne Layout wurde geloescht.
@@ -0,0 +1,56 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: S01E
screen: Internes Formular Editor
typ: Simple Builder Beispiel
umsetzung: Alternative bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit"
---
# S01E - Internes Formular Editor
## Ziel
Beispiel-Editor fuer die S00-Auswahl `Internes Formular`.
Der Nutzer erstellt ein internes Formular fuer Mitarbeitende, z. B. Materialbedarf oder interne Meldung.
## Inhalt
- Formularname `Materialbedarf melden`
- Badge `Nur intern`
- Hinweis `Kein oeffentlicher Link`
- Zuständiges Team `Lager & Einkauf`
- Fragenkarten:
- Mitarbeiter
- Bereich
- Dringlichkeit
- Material / Problem
- Beschreibung
- Foto / Datei
- Wunschdatum
## Verhalten
- Kein Public-Link-Fokus.
- Keine Lead-Pipeline.
- Kein Mapping sichtbar.
- Nutzer denkt: `Ich sammle interne Meldungen sauber ein.`
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit
Qualitaetsregel:
- Nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation.
- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`.
- Wiederhergestellte Layout-Version vom 2026-07-07; alte kaputte Subframe-ID wurde ersetzt.
@@ -0,0 +1,661 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: ADV-S01
screen: Form-Builder Canvas
typ: Bespoke Builder
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit"
---
# ADV-S01 - Form-Builder Canvas
## Ziel
Interne Nutzer bauen, konfigurieren, pruefen und veroeffentlichen ein Formular an einem Arbeitsort.
Der Screen muss Feldaufbau, Validierung, Conditional Logic, Preview, Sharing und Post-Submit-Actions sichtbar machen, ohne in mehrere neue Routen zu zerfallen.
## Pattern / Archetyp
BESPOKE Builder.
Nutzt A4 Form/Input-Kit fuer die Feldtypen und A7 Zustands-Kit fuer Empty/Loading/Error/Permission.
## Arbeitsbereiche
Dies ist keine finale Layout-Vorgabe, sondern die Arbeitslogik fuer David.
| Bereich | Zweck | Sichtbarkeit |
|---|---|---|
| Header / Statusbar | Form-Name, Status, Save, Preview, Publish, Share. | dauerhaft sichtbar |
| Feld-Palette | 12 Feldtypen hinzufuegen. | primaer |
| Canvas | Feldliste in Reihenfolge, Drag-and-Drop, Empty State, Feldfehler. | primaer |
| Feld-Inspector | ausgewaehltes Feld konfigurieren. | primaer |
| Logic | Wenn-Dann-Regeln fuer sichtbare Felder. | Sekundaer-Tab/Panel |
| Actions | Post-Submit-Actions und Field-Mapping. | Sekundaer-Tab/Panel |
| Sharing | Public URL, QR, iFrame. | Sekundaer-Tab/Panel |
| Preview | Public-nahe Vorschau. | Umschaltmodus oder Side Preview |
| Settings | Slug, Success, Redirect, Branding, technische Public-Settings. | Sekundaer-Tab/Panel |
Empfehlung: Der Screen soll sich wie ein Builder anfuehlen, nicht wie eine lange Settings-Seite. Palette, Canvas und Inspector sind die Arbeitsmitte. Alles andere ist nah dran, aber nicht dauernd gleich laut.
## Detail-Brainstorming S01
Status: Arbeitsentwurf fuer David. Nach Review vom 2026-07-06 wurde die Interaktionslogik nachgezogen; finale Subframe-Freigabe bleibt offen.
Ziel dieses Blocks: Den riesigen Builder-Umfang so aufteilen, dass David daraus einen echten Subframe-Frame bauen kann, ohne dass wichtige Produktentscheidungen im Kopf bleiben.
### Layout-Optionen
| Option | Aufbau | Vorteil | Risiko | Empfehlung |
|---|---|---|---|---|
| D | Feste Builder-Shell: links Palette, Mitte Canvas, rechts Inspector; oben Header; sekundaere Modi als Tabs/Drawer. | Fuehlt sich wie ein echter Builder an, alle Kernaktionen sind nah beieinander. | Dichte hoch; braucht gute visuelle Hierarchie. | Empfohlen fuer den Advanced Builder. |
| B | Getrennte Seiten/Tabs: Felder, Logic, Actions, Sharing, Settings, Preview. | Ruhiger je Bereich. | Zerlegt den Canvas, mehr Navigationslast, weniger Bespoke-Gefuehl. | Nicht fuer v1-Hauptscreen. |
| C | Canvas + alles andere in Modals. | Hauptscreen wirkt leerer. | Viele Modal-Wechsel, Mapping und Preview werden unhandlich. | Nur fuer Confirm-/Blocker-Dialoge. |
Arbeitsentscheidung: S01 soll als **Builder-Shell** gedacht werden, nicht als Settings-Seite. Der primaere Arbeitszustand zeigt Palette, Canvas und Inspector gleichzeitig. Logic, Actions, Sharing, Preview und Settings sind Modi am selben Datensatz.
### Empfohlene Bildschirmaufteilung
| Zone | Inhalt | Verhalten |
|---|---|---|
| Topbar | Breadcrumb, Form-Name, Status, Save, Preview, Publish, Share, More. | Bleibt dauerhaft sichtbar. |
| Linke Palette | Feldtypen, Such-/Filtermöglichkeit, Templates/Abschnitte falls erlaubt. | Schmal, scanbar, Drag oder Klick fuegt Feld hinzu. |
| Canvas-Mitte | Feldliste, Dropzonen, Feldkarten, Empty State, Fehleranker. | Hauptarbeitsflaeche; Auswahl steuert rechten Inspector. |
| Rechter Inspector | Eigenschaften des ausgewaehlten Felds oder Form-/Modus-Einstellungen. | Kontextsensitiv, kein leerer rechter Bereich. |
| Modus-Leiste | Builder, Logic, Actions, Sharing, Preview, Settings. | Als Tabs/Segment im Arbeitsbereich oder rechts oben; keine neuen Routen. |
| Bottom/Status-Hinweis | Unsaved Changes, letzte Speicherung, Publish-Blocker kurz. | Dezent, damit es nicht mit Canvas konkurriert. |
### Modus-Matrix
| Modus | Hauptfrage | Was David zeigen sollte | Eigener Screen? |
|---|---|---|---|
| Builder | Welche Felder hat das Formular und wie sind sie konfiguriert? | Palette, Canvas, Inspector. | nein, Kern von S01 |
| Logic | Wann werden Felder angezeigt oder verborgen? | Regel-Liste, Regel-Editor, kaputte Referenzen, Test-Hinweise. | nein |
| Actions | Was passiert nach Submit? | Action-Liste, Mapping, Test/Preview, Warnungen. | nein |
| Sharing | Wie wird das Formular verteilt? | Public URL, QR, iFrame, Copy-Aktionen, Publish-Hinweis. | nein |
| Preview | Wie sieht das Public Form aus? | Public-nahe Vorschau, Desktop/Mobile-Umschalter, Logic live. | nein, aber im S01 klar sichtbar |
| Settings | Welche Form-Stammdaten steuern die Public-Version? | Slug, Beschreibung, Success, Redirect, Close/Limit, Branding. | nein |
Empfehlung: Builder bleibt Default. Preview darf prominent sein, aber nicht die Feldbearbeitung verdraengen.
## Detail: Interaktionslogik / Was passiert nach Klick?
Diese Nacharbeit beantwortet Davids Review-Hinweis vom 2026-07-06. S01 muss nicht jede kleine UI-Ebene als eigenen Screen bauen, aber die wichtigsten Klicks brauchen eine klare Entscheidung: inline, Inspector, Menue, Panel/Drawer, Popover oder Confirm-Dialog.
### Grundprinzipien
| UI-Form | Wann verwenden? | Regel fuer S01 |
|---|---|---|
| Inline / Canvas | Schnelle direkte Manipulation am Feld. | Auswahl, Drag, Pflicht-Quicktoggle, Fehleranker bleiben im Canvas. |
| Rechter Inspector | Alles, was ein Feld oder ein gewaehltes Objekt dauerhaft konfiguriert. | Feld bearbeiten passiert hier, nicht im Modal. |
| 3-Punkte-Menue | Sekundaere Aktionen auf Feld-/Action-/Regel-Karten. | Duplizieren, Loeschen, Deaktivieren, Drchivieren-Einstiege. |
| Panel / Drawer im S01 | Komplexere Konfiguration mit mehreren Feldern. | Logic-Regel, Action-Detail, Sharing, Settings bleiben im selben Screen. |
| Popover | Kurze Auswahl oder kurzer Statuscheck. | Action-Typ waehlen, Publish-Kurzcheck, Copy/Share-Hilfe. |
| Confirm-Dialog | Destruktive oder public-wirksame Aktionen. | Loeschen mit Abhaengigkeiten, Unpublish, Archive, ungespeichert verlassen. |
| Toast | Ergebnisfeedback ohne Entscheidung. | Gespeichert, kopiert, veroeffentlicht, dupliziert. |
Arbeitsentscheidung: Routinearbeit bleibt im Builder. Modals sind nur fuer echte Risiko-Momente erlaubt.
### Klick-Matrix
| Aktion | Einstieg | Was passiert nach Klick? | UI-Form | Eigener Subframe-Frame? |
|---|---|---|---|---|
| Feld per Palette anklicken | Linke Palette | Feld wird am Ende eingefuegt, markiert und im Inspector geoeffnet. | Inline + Inspector | nein |
| Feld per Drag hinzufuegen | Linke Palette -> Canvas | Dropzonen erscheinen, Feld landet an Position, danach selected. | Canvas-Zustand | nein |
| Feld auswaehlen | Feldkarte | Fokusrahmen auf Karte, rechter Inspector zeigt Basisdaten. | Inline + Inspector | nein |
| Feld bearbeiten | Inspector | Label, Key, Pflichtfeld, Optionen, Validation usw. werden rechts bearbeitet. | Inspector | nein |
| Pflichtfeld schnell setzen | Feldkarte oder Inspector | Toggle aendert Pflichtstatus, Dirty State wird gesetzt. | Inline | nein |
| Feld duplizieren | Feldkarte-Aktion oder 3-Punkte-Menue | Kopie entsteht unter Original, neuer `field_key` wird vorgeschlagen, Kopie ist selected. | Menue + Toast | nein |
| Feld loeschen ohne Abhaengigkeit | 3-Punkte-Menue oder Gefahrenzone | Kurzer Confirm ist optional; danach Feld entfernen und Toast zeigen. | Menue/Confirm klein | nur dokumentieren |
| Feld loeschen mit Logic/Action-Bezug | 3-Punkte-Menue oder Gefahrenzone | Confirm zeigt betroffene Regeln/Actions; nach Loeschen werden Referenzen markiert oder geloescht. | Confirm-Dialog | nur dokumentieren |
| Feld verschieben | Drag Handle | Reihenfolge aendert sich, Dropziel sichtbar, Dirty State. | Canvas-Zustand | nein |
| Feld einklappen | Feldkarte | Karte wird kompakt, bleibt in Reihenfolge sichtbar. | Inline | nein |
| Fehler anklicken | Summary oder Feldkarte | Scroll/Focus zum betroffenen Feld und passenden Inspector-Abschnitt. | Inline Navigation | nein |
| Logic-Modus oeffnen | Modus-Leiste | Canvas bleibt Kontext, Logic-Liste/Editor wird als Arbeitsbereich sichtbar. | Panel im S01 | nein |
| Logic-Regel anlegen | Button im Logic-Modus | Neue Regel startet als Detailbereich im Panel; kein Modal. | Panel/Drawer | nur dokumentieren |
| Logic-Regel bearbeiten | Regelkarte | Detailbereich oeffnet/rechts aktualisiert sich. | Panel/Inspector | nein |
| Logic-Regel deaktivieren | Toggle auf Regelkarte | Regel bleibt sichtbar, wirkt aber nicht; kein Confirm. | Inline | nein |
| Logic-Regel loeschen | 3-Punkte-Menue | Bei aktiver/published Form Confirm, sonst kleine Menue-Aktion mit Undo/Toast. | Menue + Confirm nach Risiko | nur dokumentieren |
| Actions-Modus oeffnen | Modus-Leiste | Action-Liste und Detailbereich erscheinen im selben Builder. | Panel im S01 | nein |
| Post-Submit-Action hinzufuegen | Button im Actions-Modus | Typ-Auswahl oeffnet als kleines Auswahlpanel/Popover, danach Detailkonfiguration. | Popover + Panel/Drawer | nur dokumentieren |
| Action bearbeiten | Actionkarte | Detailpanel zeigt Ziel, Mapping, Test und Warnungen. | Panel/Drawer | nein |
| Field-Mapping setzen | Action-Detail | Mapping-Zeilen werden inline bearbeitet. | Inline im Panel | nein |
| Action testen | Action-Detail | Ergebnis erscheint inline im Action-Detail, zusaetzlich Toast bei Erfolg. | Inline + Toast | nein |
| Action deaktivieren | Toggle auf Actionkarte | Action bleibt sichtbar, wird beim Submit nicht ausgefuehrt. | Inline | nein |
| Action loeschen | 3-Punkte-Menue | Confirm, wenn Action aktiv/published oder Mapping besitzt. | Confirm-Dialog | nur dokumentieren |
| Sharing oeffnen | Header-Share oder Modus-Leiste | Sharing-Panel mit URL, QR, iFrame wird sichtbar. | Panel im S01 | nein |
| Public URL kopieren | Sharing-Panel | Copy-Aktion, danach Toast. | Button + Toast | nein |
| QR/iFrame kopieren | Sharing-Panel | Copy/Download, danach Toast; kein Modal. | Button + Toast | nein |
| Sharing im Draft | Sharing-Panel | URL/QR/iFrame ausgegraut, Publish-Hinweis und Sprung zu Publish/Settings. | Inline Hinweis | nein |
| Preview oeffnen | Header oder Modus-Leiste | Builder wechselt in Public-nahe Vorschau mit Desktop/Mobile-Umschalter. | Modus im S01 | nein |
| Settings oeffnen | Modus-Leiste | Slug, Success, Redirect, Branding und Public-Settings erscheinen im Panel/Inspector. | Panel im S01 | nein |
| Publish klicken | Header | Publish-Check laeuft inline; bei Blockern Summary mit Sprungzielen. | Inline Check / Popover | nur dokumentieren |
| Publish erfolgreich | Header | Status wechselt zu Published, Public URL aktiv, Toast. | Statuswechsel + Toast | nein |
| Publish mit Warnungen | Header | Nicht-blockierende Warnungen erscheinen vor Bestaetigung. | Popover/Inline Summary | nur dokumentieren |
| Unpublish klicken | Header/More | Confirm erklaert, dass Public-Link nicht mehr erreichbar ist. | Confirm-Dialog | nur dokumentieren |
| Archive klicken | More-Menue | Confirm, weil Bearbeitung/Public-Kontext endet. | Confirm-Dialog | nur dokumentieren |
| Weg navigieren mit Dirty State | Zurueck/Breadcrumb/Routewechsel | Warnung vor ungespeicherten Aenderungen. | Confirm-Dialog | nur dokumentieren |
### Zusaetzliche dokumentierte Zustaende nach Review
Diese Zustaende muessen bewusst beschrieben werden. D07, D08 und D09 sind nach aktueller Empfehlung zusaetzliche Subframe-Zustaende; die restlichen bleiben dokumentiert.
| ID | Zustand / Ebene | UI-Form | Empfehlung |
|---|---|---|---|
| D01 | [[D01 Sharing Panel URL QR iFrame]] | Panel im S01 | In S01 integrieren, kein eigener Screen. |
| D02 | [[D02 Post-Submit Actions]] | Panel im S01 | In S01 integrieren, kein eigener Screen. |
| D03 | [[D03 Conditional Logic Editor]] | Panel im S01 | In S01 integrieren, kein eigener Screen. |
| D06 | [[D06 Feldkarten Menue]] | 3-Punkte-Menue | In S01 dokumentieren, kein eigener Screen. |
| M01 | [[M01 Feld loeschen Confirm]] | Kleiner Confirm-Dialog | Nur als Zustand dokumentieren; extra Frame nur wenn David ihn sehen will. |
| D07 | [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | Panel/Drawer im S01 | Als zusaetzlichen Subframe-Zustand bauen, damit Logic visuell pruefbar ist. |
| D08 | [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | Panel/Drawer im S01 | Als zusaetzlichen Subframe-Zustand bauen, weil Mapping komplex ist. |
| D09 | [[93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | Inline Banner/Popover | Als zusaetzlichen Subframe-Zustand bauen, weil Publish kritisch ist. |
| M02 | [[M02 Unpublish Confirm]] | Confirm-Dialog | Nur dokumentieren, weil public-wirksam. |
| M03 | [[M03 Archive Confirm]] | Confirm-Dialog | Nur dokumentieren, nicht Hauptscreen. |
| M04 | [[M04 Unsaved Changes Confirm]] | Confirm-Dialog | Standardzustand, nur dokumentieren. |
| D10 | [[D10 Builder Interaktionsfaelle]] | Case-Matrix | Auswahlfolgen, vergessene Pflichtteile, Dropdowns, Popovers und Folgefehler dokumentieren. |
### Antworten auf Davids Beispiel-Fragen
| Frage | Antwort fuer D-FORM |
|---|---|
| Feld bearbeiten: inline im rechten Inspector oder eigenes Modal? | Rechter Inspector. Kein Modal fuer normale Feldbearbeitung. |
| Feld loeschen/duplizieren: Feldkarte, 3-Punkte-Menue oder Confirm? | Duplizieren ueber Feldkarte/3-Punkte-Menue ohne Confirm. Loeschen ueber 3-Punkte-Menue oder Gefahrenzone; Confirm bei Abhaengigkeiten oder published Risiko. |
| Logic-Regel anlegen: gleiches Panel, Drawer oder Modal? | Gleiches Logic-Panel bzw. rechter Detailbereich im S01. Kein Modal. |
| Post-Submit-Action hinzufuegen: Inline, Drawer oder Modal? | Typauswahl als kleines Auswahlpanel/Popover; Konfiguration im Action-Detail-Panel/Drawer. |
| Sharing oeffnen: Tab/Panel, Popover oder Modal? | Panel/Modus im S01. Copy-Aktionen nur mit Toast. |
| Publish/Unpublish: Inline-Check, Popover oder Confirm? | Publish als Inline-Check mit Summary/Popover; Unpublish als Confirm-Dialog. |
### Was-passiert-wenn-Faelle
Die Detailfaelle fuer Auswahlfolgen, vergessene Zwischenschritte, Checkboxen, Dropdowns, Bild/Datei-Folgen, Modaltexte und Publish-Blocker liegen in [[D10 Builder Interaktionsfaelle]].
Merksatz fuer den Advanced Builder: Jede Auswahl, die Folgefelder veraendert, muss sichtbar machen, was danach wichtig wird. Wenn Nutzer einen mittleren Pflichtschritt vergessen, bleibt der Fehler lokal sichtbar und wird beim Publish/Test mit konkretem Sprungziel aufgegriffen.
## Detail: Header / Statusbar
| Element | Zustand / Inhalt | Aktion / Ergebnis |
|---|---|---|
| Breadcrumb | Formulare > Formularname | Zur Forms-Liste zurueck, aber Forms-Liste ist nicht Teil von D-FORM. |
| Form-Name inline | Name, Dirty Marker, ggf. fehlender Name | Klick/Enter bearbeitet Name; leerer Name blockiert Publish. |
| Status-Badge | Draft, Published, Archived, Unpublished changes, Error | Erklaert, ob Public-Link aktiv ist. |
| Autosave/Save | Ungespeichert, Speichert, Gespeichert, Fehler | Speichert Form-Stammdaten, Felder, Logic, Actions. |
| Preview | Desktop/Mobile/Public-nahe Vorschau | Oeffnet Preview-Modus im selben Builder. |
| Publish | Draft -> Published | Startet Publish-Check; bei Blockern kein Publish. |
| Unpublish | Published -> Draft/private | Zeigt Warnung, weil Public-Link danach nicht mehr nutzbar ist. |
| Share | URL/QR/iFrame | Oeffnet Sharing-Modus; bei Draft mit Hinweis. |
| More-Menue | Duplizieren, Drchivieren, ggf. Vorlage erstellen | Keine destruktive Aktion ohne Confirm. |
### Header-Zustaende
| Zustand | UI-Hinweis | Naechste Aktion |
|---|---|---|
| Entwurf ohne Fehler | Draft-Badge, Save aktiv wenn dirty | Weiter bearbeiten oder publishen. |
| Entwurf mit Blockern | Validation-Summary sichtbar | Fehler anklicken und beheben. |
| Published ohne Aenderungen | Published-Badge, Public-Link aktiv | Teilen oder unpublishen. |
| Published mit ungespeicherten Aenderungen | Hinweis "Aenderungen noch nicht veroeffentlicht" | Speichern/Publish-Update pruefen. |
| Archived | Bearbeitung eingeschraenkt oder read-only | Duplizieren oder zur Liste zurueck. |
| Save fehlgeschlagen | Banner/Inline in Headernaehe | Erneut speichern. |
## Detail: Feld-Palette
Die Palette soll nicht wie eine lange Komponentenliste wirken, sondern wie ein schneller Baukasten.
| Gruppe | Feldtypen | Notiz |
|---|---|---|
| Text & Kontakt | Text, Textarea, Email, Telefon | Die haeufigsten Felder oben. |
| Zahlen & Datum | Zahl, Waehrung, Datum, Datum-Range | Mit kurzem Format-Hinweis. |
| Auswahl | Select, Multi-Select, Boolean | Radio/Checkbox-Liste sind Darstellungsvarianten, keine extra Feldtypen. |
| Upload | Datei | Foto ist mobile Upload-Variante. |
### Palette-Aktionen
| Aktion | Ergebnis |
|---|---|
| Feld anklicken | Feld wird am Ende des Canvas eingefuegt und direkt ausgewaehlt. |
| Feld ziehen | Dropzone im Canvas erscheint; Feld wird an Position eingefuegt. |
| Feld suchen | Palette filtert nach Feldtyp/Use Case. |
| Feld disabled | Tooltip erklaert, warum Feldtyp nicht verfuegbar ist. |
### Palette-Abgrenzung
| Element | In Palette? | Begruendung |
|---|---|---|
| mCaptcha/Honeypot | nein | Systemschutz, kein normales Formularfeld. |
| Signature | nein fuer v1 | Signatur-Kontext bleibt separat/offen. |
| Address | nein fuer v1 | Haengt an Maps/Autocomplete, v2 oder Spezialbaustein. |
| Section Header / Description | offen | Kann nuetzlich sein, ist aber kein A4-12-Feldtyp. Als "Content Block" spaeter pruefen. |
| Hidden Field | nein fuer v1 | Personalisierte Links/URL-Parameter sind v2. |
## Detail: Canvas
Der Canvas ist keine freie Zeichenflaeche, sondern eine sortierbare Formularstruktur.
| Canvas-Element | Zweck |
|---|---|
| Formular-Intro | Titel/Beschreibung aus Stammdaten als Kontext, nicht voll editieren im Canvas. |
| Feldkarte | Label, Typ, Pflichtmarker, kurzer Helptext, Fehlerstatus, Aktionen. |
| Dropzone zwischen Feldern | Zeigt, wo ein neues/gezogenes Feld landet. |
| Ausgewaehltes Feld | Sichtbarer Fokusrahmen; Inspector zeigt Details. |
| Inline-Fehler | Direkt an Feldkarte, wenn Label/Optionen/Validation fehlen. |
| Canvas-Summary | Oben im Canvas: Anzahl Felder, sichtbare Fehler, Logic-Warnungen. |
### Canvas-Aktionen
| Aktion | Erwartetes Verhalten |
|---|---|
| Feld auswahlen | Rechts oeffnet Field Inspector. |
| Feld verschieben | Reihenfolge aendert sich; Dirty State wird gesetzt. |
| Feld duplizieren | Kopie unter Original; neuer field_key wird vorgeschlagen. |
| Feld loeschen | Confirm, wenn Feld in Logic oder Actions verwendet wird. |
| Feld einklappen/ausklappen | Lange Formulare bleiben scanbar. |
| Feld als Pflicht markieren | Schnellaktion oder Inspector-Setting. |
| Fehler anklicken | Springt zum betroffenen Feld/Inspector-Abschnitt. |
### Canvas-Zustaende
| Zustand | Darstellung | Umsetzung |
|---|---|---|
| Empty | Grosse Dropzone mit CTA "Feld hinzufuegen"; Beispiel-Felder optional. | Bauen in S01 |
| Dragging | Dropzones sichtbar, Zielposition klar. | In S01 beschreiben |
| Feld selected | Fokusrahmen + Inspector offen. | Bauen |
| Feld invalid | Feldkarte mit Warnung und Summary oben. | Bauen/dokumentieren |
| Lange Liste | Sticky Header, Feldkarten kompakt, ggf. Mini-Navigation. | Beschreiben |
| Referenzbruch | Feldkarte zeigt "Wird in Logic/Action verwendet". | Wichtig fuer Delete/Publish |
## Detail: Feld-Inspector
Der Inspector ist der eigentliche Produktivbereich fuer Felddetails. Er braucht klare Sektionen, sonst wird der Builder unlesbar.
| Inspector-Sektion | Inhalt | Sichtbarkeit |
|---|---|---|
| Basis | Label, field_key, Beschreibung, Placeholder, Pflichtfeld. | immer |
| Darstellung | Breite/Variante, Helptext-Position, Auswahl-Darstellung. | je Feldtyp |
| Optionen | Select/Multi-Select-Optionen, Reihenfolge, Default. | Auswahlfelder |
| Validation | Min/max, Regex, Datei-Typ/Groesse, Custom Error. | je Feldtyp |
| Default | Vorbefuellung, sofern erlaubt. | optional |
| Logic-Hinweis | Welche Regeln dieses Feld nutzen. | wenn betroffen |
| Mapping-Hinweis | Welche Actions dieses Feld verwenden. | wenn betroffen |
| Gefahrenzone | Feld loeschen. | unten, klar getrennt |
### Field-Key-Regel
`field_key` soll sichtbar, aber nicht lauter als Label sein. Empfehlung:
- Automatisch aus Label erzeugen.
- Editierbar in Advanced/Basisdetails.
- Warnung, wenn doppelt oder ungueltig.
- Beim Umbenennen zeigen, ob Actions/Logic betroffen sind.
## Detail: Feldtypen und Inspector-Properties
| Feldtyp | Basis-Properties | Spezielle Properties | Validation |
|---|---|---|---|
| Text | Label, Key, Helptext, Placeholder, Pflicht | Einzeilig, Default | min/max Laenge, Regex, Custom Error |
| Textarea | Label, Key, Helptext, Placeholder, Pflicht | Zeilenhoehe, Markdown-Anmutung optional | min/max Laenge, Custom Error |
| Zahl | Label, Key, Helptext, Placeholder, Pflicht | Ganzzahl/Dezimal, Schrittweite | min/max Wert, Custom Error |
| Waehrung | Label, Key, Helptext, Pflicht | Waehrung, Dezimalstellen, Format | min/max Betrag |
| Datum | Label, Key, Helptext, Pflicht | Datum, optional Zeit als v2/Variante | min/max Datum |
| Datum-Range | Label, Key, Helptext, Pflicht | Start-/End-Label, Zeitraum | Ende nach Start, min/max Datum |
| Select | Label, Key, Helptext, Pflicht | Optionen, Default, Darstellung Dropdown/Radio | mind. 1 Option, keine leeren Optionen |
| Multi-Select | Label, Key, Helptext, Pflicht | Optionen, max. Auswahl, Chips/Checkboxen | min/max Auswahl |
| Boolean | Label, Key, Helptext | Checkbox/Toggle, Zustimmungstext | Muss true sein optional |
| Email | Label, Key, Helptext, Placeholder, Pflicht | Formatvalidierung, ggf. Submitter-Email markieren | Email-Format |
| Telefon | Label, Key, Helptext, Placeholder, Pflicht | Land/Format-Hinweis | Telefonformat |
| Datei | Label, Key, Helptext, Pflicht | Erlaubte Dateitypen, max. Groesse, mehrere Dateien, Foto-Hinweis | Datei-Typ, Groesse |
### Feldtypen-Entscheidungen offen fuer David
| Frage | Empfehlung |
|---|---|
| URL als eigener Feldtyp? | Nicht in A4-12, fuer v1 als Text mit URL-Validation oder spaeterer Spezialtyp. |
| Foto als eigener Feldtyp? | Nein, als Datei-Upload-Variante mit Mobile-Kamera-Hinweis. |
| Signature als Feldtyp? | Nicht in D-FORM v1, weil Signatur-Wizard/Abnahme eigener Kontext ist. |
| Section Header/Description Block? | Als optionaler Content Block pruefen, aber nicht als Pflichtbestandteil der 12 Feldtypen. |
| Hidden Field? | Raus fuer v1, weil personalisierte Links/URL-Parameter v2 sind. |
### Feld-Interaktionsfaelle
Siehe [[D10 Builder Interaktionsfaelle]] fuer:
- Select-Feld ohne Optionen.
- Datei/Fotofeld mit Upload-, Kamera-, Groessen- und Typ-Hinweisen.
- Field Key wird geaendert und betrifft Logic/Actions.
- Option wird geloescht, obwohl sie in Logic genutzt wird.
- Feldtyp wird nachtraeglich geaendert.
## Detail: Validation
Validation muss zwei Ebenen haben: Feldvalidierung beim Bearbeiten und Publish-Validierung fuer das gesamte Formular.
| Ebene | Beispiele | UI-Form |
|---|---|---|
| Feld-Validation | Label fehlt, Option leer, min > max, Datei ohne erlaubte Typen. | Inline am Feld + Inspector. |
| Form-Validation | Kein sichtbares Feld, Slug fehlt, Slug-Konflikt, kaputte Logic. | Summary-Banner + klickbare Liste. |
| Action-Validation | Pflichtmapping fehlt, Webhook-URL ungueltig, Empfaenger fehlt. | Im Actions-Modus + Publish-Summary. |
| Sharing-Validation | Draft nicht public, iFrame ohne Publish, Allowed-Origin-Warnung. | Im Sharing-Modus. |
### Publish-Blocker
| Blocker | Warum blockiert? | Wo zeigen? |
|---|---|---|
| Formularname fehlt | Public/Intern nicht identifizierbar. | Header + Summary |
| Slug fehlt oder Konflikt | Public URL kann nicht erzeugt werden. | Settings + Summary |
| Kein sichtbares Feld | Public Form waere leer. | Canvas Empty + Summary |
| Feld ohne Label | Public Form waere unklar. | Feldkarte + Inspector |
| Select ohne Optionen | Submitter kann nicht antworten. | Feldkarte + Inspector |
| Datum-Range ungueltig | Regel ist widerspruechlich. | Inspector |
| Kaputte Logic-Referenz | Public-Anzeige nicht verlaesslich. | Logic-Modus + Summary |
| Pflichtmapping fehlt | Action wuerde fehlschlagen. | Actions-Modus + Summary |
### Nicht blockierend, aber warnen
| Warnung | Grund |
|---|---|
| Required Email ohne Submitter-Email-Markierung | Kann fuer Auto-Match/Antwortmail relevant sein. |
| Datei-Upload ohne Typbeschraenkung | Risiko fuer Public Form. |
| Sehr langes Formular | Public-Conversion/Mobile leidet. |
| Published Form wird stark geaendert | Bestehender Public-Link bleibt aktiv, Aenderung ist relevant. |
## Detail: Conditional Logic
V1 soll einfach bleiben: Anzeige/Ausblenden, keine komplexe Verzweigungsmaschine.
| Element | Inhalt |
|---|---|
| Regelname optional | z. B. "Zeige Upload bei Foto vorhanden". |
| Wenn-Feld | Nur vorhandene Felder, die als Bedingung sinnvoll sind. |
| Operator | ist, ist nicht, enthaelt, enthaelt nicht, ist leer, ist nicht leer. |
| Wert | Abhaengig vom Feldtyp, z. B. Option bei Select. |
| Dann-Aktion | Feld anzeigen oder Feld verstecken. |
| Ziel-Feld | Das Feld, dessen Sichtbarkeit gesteuert wird. |
| Aktiv/Inaktiv | Regel testen oder parken. |
### Logic-Regeln
| Fall | UI-Verhalten |
|---|---|
| Bedingungsfeld geloescht | Regel wird rot markiert und blockiert Publish. |
| Ziel-Feld geloescht | Regel wird rot markiert und blockiert Publish. |
| Ziel-Feld required aber versteckt | Hinweis: Pflicht gilt nur wenn sichtbar. |
| Mehrere Regeln fuer ein Feld | Hinweis auf Kombinationslogik; v1 braucht einfache Erklaerung. |
| Regel testen | Preview zeigt, welche Felder live erscheinen/verschwinden. |
Nicht v1: Multi-Step-Flow, Repeater, Cross-Field-Rechnung, If/Else-Baum, Scoring, A/B-Testing.
## Detail: Publish / Unpublish
| Aktion | Ablauf |
|---|---|
| Publish | Nutzer klickt Publish, System prueft Blocker, bei Erfolg Status Published und Public URL aktiv. |
| Publish mit Blockern | Kein Publish; Summary zeigt Fehler mit Sprungziel. |
| Update published Form | Hinweis, dass Aenderungen die public Version betreffen; Save/Publish-Update klar trennen falls noetig. |
| Unpublish | Confirm mit Hinweis, dass Public URL nicht mehr erreichbar ist. |
| Archive | More-Menue, Confirm; nicht als Hauptaktion. |
Empfehlung: Publish ist kein eigener Screen. Ein Confirm/Popover reicht, solange Blocker klar im Builder sichtbar sind.
## Detail: Sharing
Sharing ist v1, aber nur fuer einfache Verteilung.
| Bereich | Inhalt | Aktion |
|---|---|---|
| Public URL | `app.hivegrid.de/f/{tenant}/{slug}` | Kopieren, oeffnen. |
| QR-Code | QR fuer Public URL | Kopieren/downloaden. |
| iFrame | Embed-Code mit Breite/Hoehe/Auto-Resize-Hinweis | Code kopieren. |
| Publish-Hinweis | Draft/Unpublished zeigt Warnung | Zum Publish springen. |
| v2-Abgrenzung | Personalisierte Links, JS-Snippet | Nicht als aktiver UI-Teil. |
### Sharing-Zustaende
| Zustand | Darstellung |
|---|---|
| Draft | URL-Vorschau ausgegraut, Hinweis "erst nach Publish erreichbar". |
| Published | URL, QR, iFrame aktiv. |
| Slug fehlt | Sharing blockiert und verweist auf Settings. |
| Public geschlossen/Limit erreicht | Hinweis, dass Link zwar existiert, Public Form aber blockieren kann. |
## Detail: Post-Submit-Actions
Actions sind sichtbar, aber S01 darf nicht wie ein voller Automation-Editor werden.
| Action-Typ | Zweck in S01 | Konfiguration |
|---|---|---|
| Email an Submitter | Bestaetigung senden. | Empfaengerfeld, Betreff, Nachricht/Template. |
| Email an Team | Intern informieren. | Empfaenger, Betreff, Felder-Auswahl. |
| Lead erstellen | Submission in Lead-Inbox geben. | Mapping: Name, Email, Telefon, Nachricht, Quelle. |
| Kontakt erstellen | CRM-Kontakt anlegen. | Mapping, Duplikat-/Auto-Match-Hinweis. |
| Projekt erstellen | Projekt/Auftrag anlegen. | Pipeline/Status, Pflichtmapping, Verantwortlicher. |
| Task erstellen | Aufgabe erzeugen. | Titel, Beschreibung, Faelligkeit, Assignee. |
| Auto-Match | Bestehende Entitaet per Email/Telefon verknuepfen. | Match-Felder, Fallback. |
| Webhook | Externes System informieren. | URL, Methode falls noetig, Test. |
| Automation-Trigger | M17 Automation starten. | Automation-Auswahl/Trigger. |
| KWP Push | Laut M05 vorhanden, aber KWP v1 raus. | Nicht aktiv in D-FORM v1, hoechstens v2/raus markieren. |
### Action-UI
| Element | Zweck |
|---|---|
| Action-Liste | Reihenfolge, Typ, Status, Warnungen. |
| Add Action | Typ-Auswahl mit kurzer Erklaerung. |
| Action-Detail | Ziel, Bedingungen, Mapping, Test. |
| Field-Mapping-Zeilen | Form-Feld -> Ziel-Feld; Pflichtfelder sichtbar. |
| Test/Preview | Zeigt, was bei einer Beispiel-Submission erzeugt wuerde. |
| Action aktiv/inaktiv | Action parken ohne Loeschen. |
### Action-Blocker
| Blocker | UI |
|---|---|
| Pflichtmapping fehlt | Warnung an Action + Publish-Summary. |
| Ziel-Pipeline fehlt | Inline im Projekt-Action-Detail. |
| Email-Empfaenger fehlt | Inline im Email-Action-Detail. |
| Webhook-URL ungueltig | Inline + Test disabled. |
| Automation nicht aktiv/verfuegbar | Warnung mit Erklaerung. |
Nicht in S01 bauen: ActionLog, Re-Run, Fehlerhistorie je Submission. Das gehoert zur Submissions-Ansicht.
## Detail: Permissions / Read-only
| Permission / Rolle | Darf sehen | Darf tun |
|---|---|---|
| `forms.basic` | ggf. Submissions, aber nicht Builder-Fokus. | Kein Builder-Hauptflow. |
| `forms.builder` | Builder sehen und bearbeiten. | Felder, Logic, Settings speichern. |
| `forms.publisher` | Builder + Sharing. | Publish/Unpublish, Export/Submissions ausserhalb D-FORM. |
| `forms.admin` | Alles im Builder. | Actions, Templates, administrative Optionen. |
### Permission-Zustaende in S01
| Zustand | UI |
|---|---|
| Keine Builder-Rechte | Permission-State statt Builder; CTA "Admin kontaktieren" oder zurueck. |
| Read-only wegen fehlender Publish-Rechte | Publish disabled mit Tooltip, Bearbeitung ggf. erlaubt. |
| Actions nur Admin | Actions-Modus disabled oder read-only mit Hinweis. |
| Archived Form | Bearbeitung eingeschraenkt; Duplizieren als naechste Aktion. |
## Daten
- Form-Stammdaten: Name, Beschreibung, Slug, Status, Subtype.
- Form-Felder: Reihenfolge, Feldtyp, Label, Beschreibung/Hilfe, Placeholder, Pflichtfeld.
- Feldtypen v1: Text, Textarea, Zahl, Waehrung, Datum, Datum-Range, Select, Multi-Select, Boolean, Email, Telefon, Datei.
- Feld-Konfiguration: Optionen, Default, Validation, Datei-/Foto-Regeln je Feldtyp.
- Conditional Logic: einfache Wenn-Dann-Regeln.
- Live-Vorschau: gerenderte Form in Public-nahem Zustand.
- Sharing: Public URL, QR-Code, iFrame-Code.
- Post-Submit-Actions: Lead/Kontakt/Projekt/Task, Email, Webhook, Automation-Trigger, Auto-Match.
- Field-Mapping je Action.
- Publish-Status und moegliche Publish-Blocker.
## Header / Statusbar
| Element | Zweck |
|---|---|
| Form-Name inline | schnell umbenennen. |
| Status-Badge | Draft, Published, Archived, Fehler. |
| Save | Entwurf sichern. |
| Preview | Public-nahe Vorschau oeffnen/umschalten. |
| Publish/Unpublish | Public-Verfuegbarkeit steuern. |
| Share | URL, QR und iFrame erreichbar machen. |
| Validation-Summary | zeigt, ob Publish blockiert ist. |
## Aktionen
- Feld aus Palette hinzufuegen.
- Feld per Drag-and-Drop verschieben.
- Feld auswaehlen.
- Feld bearbeiten.
- Feld duplizieren.
- Feld loeschen.
- Feld als Pflichtfeld markieren.
- Validierung konfigurieren.
- Optionen fuer Select/Multi-Select/Radio pflegen.
- Conditional-Logic-Regel anlegen, bearbeiten, deaktivieren, loeschen.
- Vorschau ansehen.
- Form speichern.
- Form publishen/unpublishen.
- Public URL kopieren.
- QR-Code kopieren/downloaden.
- iFrame-Code kopieren.
- Post-Submit-Action hinzufuegen.
- Field-Mapping setzen.
- Webhook testen oder validieren.
## Feldtypen v1
| Feldtyp | Was David sichtbar machen sollte |
|---|---|
| Text | Label, Placeholder, Pflicht, min/max Laenge. |
| Textarea | Label, Helptext, Pflicht, min/max Laenge. |
| Zahl | Label, min/max, Dezimal/Ganzzahl-Hinweis. |
| Waehrung | Betrag, Waehrung/Format, min/max. |
| Datum | Date-Picker, Pflicht, min/max Datum optional. |
| Datum-Range | Start/Ende, Validierung Ende nach Start. |
| Select | Optionen, ein Wert. |
| Multi-Select | Optionen, mehrere Werte. |
| Boolean | Checkbox/Toggle, Pflicht-/Zustimmungsfall. |
| Email | Email-Validation automatisch. |
| Telefon | Telefonformat-Hinweis. |
| Datei | Upload, erlaubte Typen, max. Groesse; Foto als mobile Upload-Variante. |
Anti-Spam-Felder wie Honeypot/mCaptcha sind Systemschutz, nicht Teil der sichtbaren 12-Feld-Palette.
## Logic-Arbeitsbereich
| Element | Zweck |
|---|---|
| Regel-Liste | Alle aktiven Regeln scannen. |
| Neue Regel | Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken. |
| Feld-Auswahl | Nur vorhandene Felder; kaputte Referenzen sichtbar markieren. |
| Operatoren | v1 simpel: ist, ist nicht, enthaelt, ist leer/nicht leer. |
| Ziel-Feld | Welches Feld wird angezeigt oder verborgen. |
| Regel aktiv/inaktiv | Regel testen oder parken. |
Nicht bauen: komplexe If/Else-Baeume, Multi-Step-Flow, Cross-Field-Rechnung.
## Post-Submit-Actions Schnitt
| Bereich | In S01 zeigen? | Notiz |
|---|---|---|
| Action-Typ waehlen | ja | Lead/Kontakt/Projekt/Task, Email, Webhook, Automation-Trigger, Auto-Match. |
| Reihenfolge | ja | Actions laufen in definierter Reihenfolge. |
| Aktiv/Inaktiv | ja | Einzelne Actions deaktivierbar. |
| Field-Mapping | ja | Form-Feld -> Ziel-Feld, Pflichtwarnungen sichtbar. |
| Bedingung pro Action | optional | Nur einfache Filter, kein voller Logic-Builder. |
| Test/Preview | ja | Was wuerde erzeugt/gesendet? |
| Voller ActionLog/Re-Run | nein | Gehoert zur Submissions-Ansicht, nicht zum Builder-Canvas. |
## Sharing-Arbeitsbereich
| Element | Zweck |
|---|---|
| Public URL | Link kopieren, ggf. oeffnen. |
| QR-Code | Fuer Print/Monteure/Kundenkontakt. |
| iFrame-Code | Einbettung auf Website. |
| Publish-Hinweis | Sharing ist erst sinnvoll, wenn published. |
| v2-Hinweis intern | Personalisierte Links und JS-Snippet nicht in v1. |
## Settings-Arbeitsbereich
| Element | Zweck |
|---|---|
| Slug | Public URL steuern. |
| Success Message | Text nach Submit. |
| Redirect URL | optionales Weiterleitungsziel. |
| Tenant Branding / Theme | Logo/Farbe/Fallback, soweit v1 vorgesehen. |
| Allowed Origins | falls iFrame/API eingeschraenkt wird. |
| Submission Limit / Close Date | optional, falls Dev fuer v1 bestaetigt. |
## Banner / Hinweise
- Publish-Blocker-Banner: zeigt konkrete fehlende Punkte, z. B. kein sichtbares Feld, fehlender Slug, ungueltige Logic-Regel.
- Unsaved-Changes-Hinweis: wenn Nutzer weg navigiert oder publizieren will.
- Reuse-Hinweis optional: Public Renderer wird auch fuer HR/Booking-Intake wiederverwendet, aber nicht als sichtbarer Feature-Text im UI.
## Toasts / Action-Feedback
- Gespeichert.
- Veroeffentlicht.
- Entwurf deaktiviert/unpublished.
- Public URL kopiert.
- QR-Code kopiert/downloadet.
- iFrame-Code kopiert.
- Action gespeichert.
- Test-Webhook erfolgreich/fehlgeschlagen.
## Meldungsentscheidung
| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz |
|---|---|---|---|---|
| Keine Felder im Canvas | Empty State im Canvas | nein | Bauen | Feld aus Palette hinzufuegen. |
| Feld ohne Label | Inline am Feld + Summary | ja fuer Publish | Nur dokumentieren | Feld konkret benennen. |
| Required Email ohne Email-Validation | Inline-Warnung | nein/Publish-Warnung | Nur dokumentieren | Vorschlag: Email-Validation hinzufuegen. |
| Logic-Regel referenziert geloeschtes Feld | Inline im Logic-Panel + Summary | ja fuer Publish | Nur dokumentieren | Regel reparieren oder deaktivieren. |
| Ungueltige Webhook-URL | Inline im Action-Panel | ja fuer Action | Nur dokumentieren | URL muss http/https und erreichbar sein. |
| Publish erfolgreich | Toast + Statuswechsel | nein | Nur dokumentieren | Veroeffentlicht. |
| Kopieren erfolgreich | Toast | nein | Nur dokumentieren | In Zwischenablage kopiert. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Leer | Neues Formular ohne Felder; Canvas zeigt Drop-Zone und CTA. | Bauen |
| Laden | Form-Definition und Actions werden geladen. | Wiederverwenden |
| Fehler | Form kann nicht geladen werden. | Nur dokumentieren |
| Keine Berechtigung | Nutzer hat keine `forms.builder`/`forms.publish`-Rechte. | Nur dokumentieren |
| Dirty State | Ungespeicherte Aenderungen. | Nur dokumentieren |
| Publish blocked | Form hat Fehler, die Public-Version verhindern. | Nur dokumentieren |
## Blockierende Error States
| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion |
|---|---|---|---|
| Publish blockiert | Banner mit Liste der fehlenden Punkte. | Fehler beheben | Als Entwurf speichern |
| Keine Berechtigung | Permission-State mit Klartext. | Zurueck zu Formularen | Admin kontaktieren |
| Form nicht gefunden | Fehler-State. | Zurueck zu Formularen | - |
## Permissions / Gates
- `forms.builder`: Felder und Konfiguration bearbeiten.
- `forms.publisher`: Publish/Unpublish und Sharing aktivieren.
- `forms.admin`: Actions, Mapping und administrative Optionen.
## Subframe
- [Subframe](https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit)
Layout-Regel: Der Advanced Builder nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar nachbauen.
## Notizen
Der Builder soll nicht den Automation-Flow-Editor nachbauen. Post-Submit-Actions brauchen nur Reihenfolge, Typ, Ziel und Field-Mapping.
Conditional Logic ist v1, aber eng: Wenn Feld Y = Wert Z, dann Feld X anzeigen. Kein Repeater, kein Multi-Step, keine Cross-Field-Validation.
Wichtig fuer David: Der Screen ist eine Arbeitsflaeche, kein Marketing-Screen. Dichte ist erlaubt, solange die Hauptarbeit gut scannbar bleibt.
@@ -0,0 +1,34 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: ADV-S01-2
screen: Form-Builder Canvas 2
typ: Advanced / Referenz
umsetzung: Referenz behalten
status: Subframe Draft / aktuell nicht Hauptfluss
route: /forms/:id/edit
subframe: "https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit"
---
# ADV-S01-2 - Form-Builder Canvas 2
## Status
Diese Seite ist aktuell **nicht Teil des Hauptflusses**.
Sie bleibt als Advanced-/Referenzscreen erhalten, falls David oder spaetere Umsetzung die umfangreichere Builder-Logik pruefen will.
## Warum nicht Hauptfluss
- Zu viel sichtbare Komplexitaet fuer normale Handwerksbetriebe.
- S02 ist aktuell die empfohlene Google-Forms-nahe Hauptvariante.
- Logic, Actions und Publish-Blocker werden in S02 einfacher geloest.
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit
@@ -0,0 +1,98 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D07
screen: Logic Regel Detail
typ: Panel-Zustand in S01
umsetzung: Bauen
status: Subframe Draft / Review offen
route: in S01 Logic-Modus, kein eigener Screen
subframe: "https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit"
---
# D07 - Logic Regel Detail
## Ziel
Interne Nutzer koennen eine einzelne Sichtbarkeitsregel sauber anlegen oder bearbeiten.
## Pattern / Archetyp
Detailpanel / Drawer innerhalb des Logic-Modus von S01.
## Daten
- Regelname optional
- Bedingungsfeld
- Operator
- Wert
- Dann-Aktion: anzeigen oder verstecken
- Zielfeld
- Status aktiv/inaktiv
- Preview-/Testhinweis
## Aktionen
- Bedingungsfeld waehlen
- Operator waehlen
- Wert setzen
- Zielfeld waehlen
- Aktion anzeigen/verstecken waehlen
- Regel speichern
- Regel testen
- Regel deaktivieren
- Regel loeschen
## Verhalten
- `Neue Regel` oeffnet dieses Detailpanel im selben S01-Screen.
- Keine Modal-Kaskade fuer Logic.
- Feldauswahlen zeigen nur vorhandene passende Felder.
- Wenn ein referenziertes Feld fehlt, bleibt die Regel sichtbar und markiert kaputt.
- Test/Preview kann direkt den Preview-Modus beeinflussen oder eine kurze Vorschau im Panel zeigen.
- Detailfaelle fuer unvollstaendige Auswahlfolgen stehen in [[D10 Builder Interaktionsfaelle]].
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Neue Regel | leeres Detailpanel mit Pflichtfeldern. | Nur dokumentieren |
| Gueltige Regel | alle Referenzen vorhanden. | Nur dokumentieren |
| Unvollstaendig | Pflichtteil fehlt; Regel kann nicht aktiv werden. | Nur dokumentieren |
| Referenz kaputt | Bedingungs- oder Zielfeld fehlt. | Nur dokumentieren |
| Testmodus | Preview zeigt Wirkung der Regel. | In S01 dokumentieren |
## Auswahlfolge im Panel
| Schritt | Verhalten |
|---|---|
| 1. Wenn-Feld | Nach Auswahl wird das Operator-Dropdown passend zum Feldtyp aktiv. |
| 2. Operator | Bei `ist leer`/`ist nicht leer` entfaellt das Wertfeld. Bei Select/Boolean wird das Wertfeld zur passenden Auswahl. |
| 3. Wert | Pflicht nur bei Operatoren, die einen Wert brauchen. |
| 4. Dann-Aktion | `anzeigen` oder `verstecken`; keine komplexe If/Else-Struktur. |
| 5. Zielfeld | Darf nicht identisch mit dem Bedingungsfeld sein. |
| 6. Aktiv | Erst aktivierbar, wenn alle Pflichtteile gueltig sind. |
## Fehlerlogik
| Fehler | Anzeige | Folge |
|---|---|---|
| Operator fehlt | Inline unter Operator. | Test disabled, aktive Regel nicht moeglich. |
| Wert fehlt | Inline unter Wertfeld. | Test disabled, Publish blockiert nur bei aktiver Regel. |
| Zielfeld fehlt | Inline unter Zielfeld. | Regel unvollstaendig. |
| Referenz kaputt | Rote Markierung an Regel und Detailpanel. | Publish blockiert, Sprung aus Summary. |
| Feldtyp geaendert | Dlter Wert kann ungueltig werden. | Wert neu waehlen oder Regel deaktivieren. |
## Subframe
- [Subframe](https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit)
Gebaut als zusaetzlicher Builder-Zustand. Das Detail bleibt fachlich ein Zustand im Logic-Modus von S01, ist aber als eigener Frame sichtbar, damit David die Regelbearbeitung pruefen kann.
Layout-Regel: D07 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar oder Header-Navigation nachbauen.
## Notizen
Die Regel-Logik bleibt bewusst eng: Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken.
@@ -0,0 +1,112 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D08
screen: Action Detail mit Mapping
typ: Panel-Zustand in S01
umsetzung: Bauen
status: Subframe Draft / Review offen
route: in S01 Actions-Modus, kein eigener Screen
subframe: "https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit"
---
# D08 - Action Detail mit Mapping
## Ziel
Interne Nutzer konfigurieren eine einzelne Post-Submit-Action und sehen sofort, ob Pflichtmapping oder Zielwerte fehlen.
## Pattern / Archetyp
Detailpanel / Drawer innerhalb des Actions-Modus von S01.
## Daten
- Action-Typ
- Action-Name
- Status aktiv/inaktiv
- Ziel, z. B. Empfaenger, Pipeline, Projektstatus, Webhook-URL
- Field-Mapping: Formularfeld -> Ziel-Feld
- Pflichtfelder
- optionale Bedingungen
- Teststatus
## Aktionen
- Action benennen
- Ziel konfigurieren
- Mapping-Zeilen setzen
- optionale Bedingung setzen
- Test ausfuehren
- Action speichern
- Action deaktivieren
- Action loeschen
## Verhalten
- Nach Auswahl eines Action-Typs oeffnet sich dieses Detailpanel.
- Mapping wird inline als Zeilenliste bearbeitet.
- Pflichtmapping wird klar markiert.
- Test zeigt ein Ergebnis im Panel, kein eigener Screen.
- Loeschen einer aktiven oder published-relevanten Action nutzt Confirm.
- Detailfaelle fuer halb gesetztes Mapping, Typwechsel und fehlende Pflichtziele stehen in [[D10 Builder Interaktionsfaelle]].
## Action-Typen
| Typ | Wichtigste Konfiguration |
|---|---|
| Email Submitter | Submitter-Email-Feld, Betreff, Nachricht. |
| Email Team | Empfaenger, Betreff, Feldauswahl. |
| Lead | Mapping fuer Name, Email, Telefon, Nachricht, Quelle. |
| Kontakt | Kontakt-Mapping und Duplikat-/Auto-Match-Hinweis. |
| Projekt | Pipeline, Status, Verantwortlicher, Pflichtmapping. |
| Task | Titel, Beschreibung, Faelligkeit, Assignee. |
| Auto-Match | Match-Felder, Fallback. |
| Webhook | URL, Test, Payload-Vorschau. |
| Automation-Trigger | Automation-Auswahl und Trigger-Hinweis. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Neu | Action-Typ gewaehlt, Detail noch leer. | Nur dokumentieren |
| Vollstaendig | Pflichtfelder und Mapping gesetzt. | Nur dokumentieren |
| Pflichtmapping fehlt | Publish oder Action-Test blockiert. | Nur dokumentieren |
| Test erfolgreich | Inline-Ergebnis plus Toast. | Wiederverwenden |
| Test fehlgeschlagen | Inline-Fehler im Panel. | Nur dokumentieren |
## Auswahlfolge im Panel
| Schritt | Verhalten |
|---|---|
| 1. Action-Typ | Bestimmt, welche Pflichtfelder und Mapping-Zeilen erscheinen. |
| 2. Ziel | Empfaenger, Pipeline, Webhook-URL, Automation oder Entity-Ziel wird gesetzt. |
| 3. Mapping | Formularfelder werden Ziel-Feldern zugeordnet. |
| 4. Optional Bedingung | Nur einfache Bedingung; kein zweiter Logic-Builder. |
| 5. Test | Erst aktiv, wenn Pflichtziel und Pflichtmapping vollstaendig sind. |
| 6. Aktiv | Aktive unvollstaendige Actions blockieren Publish; inaktive unvollstaendige Actions nicht. |
## Was-passiert-wenn-Faelle
| Fall | UI-Reaktion | Folge |
|---|---|---|
| Action-Typ gewaehlt, Pflichtziel vergessen | Inline-Fehler im Zielbereich. | Test disabled; aktive Action blockiert Publish. |
| Mapping-Ziel gesetzt, Quelle vergessen | Mapping-Zeile markiert fehlende Quelle. | Test disabled; aktive Action blockiert Publish. |
| Email Submitter ohne Email-Feld | Hinweis mit CTD `Email-Feld hinzufuegen`. | Action bleibt unvollstaendig. |
| Projekt erstellen ohne Pipeline | Pipeline-Auswahl markiert. | Publish blockiert aktive Action. |
| Webhook-URL ungueltig | URL-Feld zeigt Fehler. | Test disabled. |
| Action-Typ nach Mapping wechseln | Confirm/Popover erklaert, dass Mapping ungueltig werden kann. | Nutzer bestaetigt oder bricht ab. |
## Subframe
- [Subframe](https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit)
Gebaut als zusaetzlicher Builder-Zustand. Das Detail bleibt fachlich ein Zustand im Actions-Modus von S01, ist aber als eigener Frame sichtbar, weil Mapping und Pflichtfelder fuer den Builder sehr fehleranfaellig sind.
Layout-Regel: D08 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar oder Header-Navigation nachbauen.
## Notizen
ActionLog, Re-Run und Fehlerhistorie pro Submission bleiben ausserhalb von D-FORM.
@@ -0,0 +1,114 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D09
screen: Publish Blocker Summary
typ: Inline-Zustand in S01
umsetzung: Bauen
status: Subframe Draft / Review offen
route: in S01 nach Klick auf Publish
subframe: "https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit"
---
# D09 - Publish Blocker Summary
## Ziel
Interne Nutzer verstehen nach Klick auf Publish sofort, warum ein Formular nicht veroeffentlicht werden kann und wo sie es korrigieren.
## Pattern / Archetyp
Inline Summary-Banner / Popover mit Sprungzielen im S01-Builder.
## Daten
- Anzahl Blocker
- Blocker-Gruppe: Form, Feld, Logic, Actions, Sharing/Settings
- betroffener Feldname oder Action-Name
- Ziel im Builder, zu dem gesprungen werden kann
- nicht-blockierende Warnungen
## Aktionen
- Blocker anklicken
- zum Feld springen
- zum Inspector-Abschnitt springen
- Logic-Modus oeffnen
- Actions-Modus oeffnen
- Settings oeffnen
- Publish nach Korrektur erneut versuchen
## Verhalten
- Klick auf `Publish` startet einen Check im selben Screen.
- Bei Blockern wird nicht published.
- Die Summary erscheint oben im Builder oder als klarer Inline-Bereich nahe der Topbar.
- Jeder Blocker hat ein Sprungziel.
- Nicht-blockierende Warnungen koennen als eigener Abschnitt erscheinen und erlauben Publish nach Bestaetigung.
- Bei Erfolg gibt es Statuswechsel und Toast, keinen eigenen Erfolgsscreen.
- Ausfuehrliche Auswahl-/Vergessensfaelle stehen in [[D10 Builder Interaktionsfaelle]].
## Blocker
| Blocker | Ziel |
|---|---|
| Formularname fehlt | Header/Form-Name |
| Slug fehlt oder Konflikt | Settings |
| Kein sichtbares Feld | Canvas Empty State |
| Feld ohne Label | Feldkarte + Inspector |
| Select ohne Optionen | Feldkarte + Inspector Optionen |
| Kaputte Logic | Logic-Modus |
| Pflichtmapping fehlt | Actions-Modus |
| Webhook-URL ungueltig | Action-Detail |
## Was-passiert-wenn-Faelle
| Fall | Summary-Verhalten | Sprungziel |
|---|---|---|
| Nutzer hat Select-Feld angelegt, aber Optionen vergessen | Blocker `Auswahlfeld hat keine Optionen`. | Feldkarte + Inspector `Optionen` |
| Nutzer hat Logic-Regel halb gebaut | Blocker `Logic-Regel unvollstaendig`, wenn aktiv. | Logic-Regel-Detail |
| Nutzer hat Action-Typ gewaehlt, aber Mapping vergessen | Blocker `Pflichtmapping fehlt`, wenn Action aktiv. | Action-Detail mit Mapping |
| Nutzer hat Datei-Feld ohne Typbeschraenkung | Warnung, nicht zwingend Blocker. | Datei-Feld Inspector |
| Nutzer hat Field Key ungueltig geaendert | Blocker `Field Key ungueltig oder doppelt`. | Inspector Basis/Advanced |
| Nutzer hat nur inaktive unvollstaendige Action | Optional Warnung, kein harter Blocker. | Actions-Liste |
| Nutzer hat unsaved changes | Erst speichern oder Save-Check zeigen. | Header/Save |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Keine Blocker | Publish erfolgreich. | Toast/Statuswechsel |
| Blocker vorhanden | Summary mit Sprungzielen. | Nur dokumentieren |
| Nur Warnungen | Nutzer kann trotzdem publishen. | Nur dokumentieren |
| Save vorher noetig | Hinweis, dass Aenderungen erst gespeichert werden. | Nur dokumentieren |
## Copy-Richtung
| Situation | Copy-Beispiel |
|---|---|
| Feld ohne Label | `Dieses Feld braucht ein Label, bevor das Formular veroeffentlicht werden kann.` |
| Select ohne Optionen | `Fuege mindestens eine Option hinzu, damit Nutzer antworten koennen.` |
| Logic unvollstaendig | `Diese Regel ist noch nicht vollstaendig. Ergaenze Operator, Wert oder Zielfeld.` |
| Mapping fehlt | `Diese Action braucht noch eine Zuordnung fuer Pflichtfelder.` |
| Nur Warnung | `Du kannst veroeffentlichen, aber diese Einstellung sollte geprueft werden.` |
## Subframe
Gebaut in Subframe:
https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit
Qualitaetsregel:
- Interner Builder-Zustand nutzt das vorhandene `Default Page Layout`.
- Keine eigene Sidebar oder Header-Navigation nachbauen.
- D09 bleibt Inline Summary/Banner im Builder, kein Modal/Dialog.
- Publish bleibt deaktiviert, bis harte Blocker geloest sind.
- Warnungen sind sichtbar, blockieren aber nicht zwingend.
- Jeder Blocker hat ein klares Sprungziel in Feld, Logic, Actions oder Settings.
## Notizen
Publish ist kein Wizard. Der Nutzer bleibt im Builder und korrigiert direkt dort.
@@ -0,0 +1,68 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D01
screen: Sharing Panel URL QR iFrame
typ: Panel-Zustand in S01
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: in ADV-S01 Form-Builder Canvas, kein eigener Screen
subframe: "-"
---
# D01 - Sharing Panel URL QR iFrame
## Ziel
Interne Nutzer koennen nach dem Publish die Public URL, den QR-Code und den iFrame-Code nutzen, ohne den Builder zu verlassen.
## Pattern / Archetyp
Panel / Arbeitsmodus innerhalb von S01.
## Daten
- Formularname
- Publish-Status: Draft, Published, Unpublished Changes, Archived
- Public URL: `/f/{tenant}/{slug}`
- Slug und Tenant
- QR-Code fuer Public URL
- iFrame-Code
- Allowed Origins, falls fuer iFrame relevant
## Aktionen
- Public URL kopieren
- Public URL oeffnen
- QR-Code kopieren oder herunterladen
- iFrame-Code kopieren
- zu Settings springen, wenn Slug fehlt
- zu Publish springen, wenn Formular noch Draft ist
## Verhalten
- Klick auf `Share` in der Topbar oeffnet keinen Dialog, sondern wechselt in den Sharing-Modus von S01.
- Bei `Published` sind URL, QR und iFrame aktiv.
- Bei `Draft` bleibt der Bereich sichtbar, aber die echten Copy-Aktionen sind disabled oder zeigen einen Publish-Hinweis.
- Bei fehlendem Slug verweist das Panel auf Settings.
- Copy-Aktionen zeigen nur Toasts, keine Modals.
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Published | URL, QR und iFrame sind aktiv. | Nur dokumentieren |
| Draft | Sharing ist ausgegraut und erklaert Publish als Voraussetzung. | Nur dokumentieren |
| Slug fehlt | Panel verweist auf Settings. | Nur dokumentieren |
| Kopiert | Toast bestaetigt Copy-Aktion. | Wiederverwenden |
| Archived | Sharing ist read-only oder deaktiviert. | Nur dokumentieren |
## Subframe
Kein eigener Subframe-Screen. Der Zustand wird im S01-Builder als Sharing-Modus/Panel gezeigt. Ein eigener Frame ist nur noetig, wenn David den geoeffneten Sharing-Zustand separat sehen will.
## Notizen
Personalisierte Links und JS-Snippet bleiben v2. D-FORM v1 zeigt URL, QR und iFrame.
@@ -0,0 +1,91 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D02
screen: Post-Submit Actions
typ: Panel-Zustand in S01
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: in ADV-S01 Form-Builder Canvas, kein eigener Screen
subframe: "-"
---
# D02 - Post-Submit Actions
## Ziel
Interne Nutzer legen fest, was nach dem Absenden eines Public Forms passieren soll, ohne einen kompletten Automation-Editor zu oeffnen.
## Pattern / Archetyp
Action-Liste plus Detailpanel innerhalb von S01.
## Daten
- Action-Typ
- Action-Name
- Status aktiv/inaktiv
- Reihenfolge
- Pflichtmapping
- Warnungen und Blocker
- letzter Teststatus
## Aktionen
- Action hinzufuegen
- Action-Typ waehlen
- Action bearbeiten
- Action aktiv/inaktiv setzen
- Action duplizieren
- Action loeschen
- Reihenfolge aendern
- Mapping pruefen
- Test ausfuehren
## Verhalten
- Klick auf `Actions` wechselt in den Actions-Modus im selben S01-Screen.
- `Add Action` oeffnet eine kleine Typ-Auswahl als Popover oder Auswahlpanel.
- Nach Auswahl eines Action-Typs oeffnet sich das Action-Detail, siehe [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]].
- Die Liste zeigt Warnungen direkt an der betroffenen Action.
- ActionLog, Re-Run und Submission-Historie gehoeren nicht hierher, sondern zu Submissions.
- Auswahl- und Mapping-Folgefaelle stehen in [[D10 Builder Interaktionsfaelle]].
## Add-Action-Popover
| Inhalt | Beschreibung |
|---|---|
| Typ-Liste | Email Submitter, Email Team, Lead, Kontakt, Projekt, Task, Auto-Match, Webhook, Automation-Trigger. |
| Kurzbeschreibung | Pro Typ ein Satz, was nach Submit passiert. |
| Disabled-Zustaende | Typ disabled, wenn Rechte, Integration oder Voraussetzung fehlen. |
| Suche optional | Nur wenn Liste zu lang wirkt. |
| Kein Modal | Das Popover waehlt nur den Typ; Detailarbeit passiert in [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Keine Actions | Empty State mit `Action hinzufuegen`. | Nur dokumentieren |
| Action valid | Action ist aktiv und vollstaendig konfiguriert. | Nur dokumentieren |
| Action incomplete | Pflichtmapping oder Ziel fehlt. | Nur dokumentieren |
| Test erfolgreich | Inline-Ergebnis plus Toast. | Wiederverwenden |
| Test fehlgeschlagen | Inline-Hinweis im Action-Detail. | Nur dokumentieren |
## Was-passiert-wenn-Faelle
| Fall | UI-Reaktion |
|---|---|
| Nutzer waehlt Typ, bricht Detail ab | Action wird nicht angelegt oder bleibt als unvollstaendiger Draft, je nach Save-Logik. |
| Nutzer erstellt Action, laesst sie inaktiv | Keine Publish-Blockade, aber Warnung in Action-Liste. |
| Nutzer erstellt aktive Action ohne Pflichtmapping | Publish blockiert und springt zu [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]. |
| Nutzer loescht Action | Confirm nur bei aktiver/published-relevanter Action. |
## Subframe
Kein eigener Hauptscreen. Actions bleiben Arbeitsbereich in S01. Ein extra Frame ist nur noetig, wenn David die geoeffnete Action-Liste separat sehen will.
## Notizen
Der Bereich darf nicht wie M17 Automation wirken. D-FORM braucht nur Action-Typ, Ziel, Mapping, Status und Test.
@@ -0,0 +1,81 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D03
screen: Conditional Logic Editor
typ: Panel-Zustand in S01
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: in ADV-S01 Form-Builder Canvas, kein eigener Screen
subframe: "-"
---
# D03 - Conditional Logic Editor
## Ziel
Interne Nutzer koennen einfache Anzeige-/Ausblende-Regeln fuer Formularfelder erstellen und pruefen.
## Pattern / Archetyp
Regel-Liste plus Detailpanel innerhalb von S01.
## Daten
- Regelname optional
- Bedingungsfeld
- Operator
- Wert
- Aktion: anzeigen oder verstecken
- Zielfeld
- Status aktiv/inaktiv
- Referenzstatus: gueltig oder kaputt
## Aktionen
- Regel hinzufuegen
- Regel bearbeiten
- Regel aktiv/inaktiv setzen
- Regel loeschen
- kaputte Referenz reparieren
- Regel in Preview testen
## Verhalten
- Klick auf `Logic` wechselt in den Logic-Modus im selben S01-Screen.
- `Neue Regel` oeffnet kein Modal, sondern ein Detailpanel, siehe [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]].
- Kaputte Referenzen werden in der Regel-Liste sichtbar markiert.
- Kaputte aktive Regeln blockieren Publish.
- Required-Felder, die durch Logic versteckt werden, sind im Public Form nur required, wenn sie sichtbar sind.
- Auswahl- und Vergessensfaelle fuer Logic sind in [[D10 Builder Interaktionsfaelle]] dokumentiert.
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Keine Regeln | Empty State mit `Regel hinzufuegen`. | Nur dokumentieren |
| Regel aktiv | Regel wirkt im Public Renderer. | Nur dokumentieren |
| Regel inaktiv | Regel bleibt gespeichert, wirkt aber nicht. | Nur dokumentieren |
| Referenz kaputt | Feld fehlt oder wurde geaendert; Publish blockiert. | Nur dokumentieren |
| Preview-Test | Public-nahe Vorschau zeigt Feld sichtbar/versteckt. | In S01 dokumentieren |
## Was-passiert-wenn-Faelle
| Fall | UI-Reaktion |
|---|---|
| Wenn-Feld gewaehlt, Operator vergessen | Regel bleibt unvollstaendig; Aktivieren/Test disabled. |
| Operator gewaehlt, Wert vergessen | Wertfeld zeigt Inline-Fehler; aktive Regel blockiert Publish. |
| Operator `ist leer` gewaehlt | Wertfeld verschwindet, weil kein Wert gebraucht wird. |
| Ziel-Feld vergessen | Regel bleibt unvollstaendig; Publish blockiert nur, wenn Regel aktiv sein soll. |
| Select-Option wird geloescht | Betroffene Regel wird kaputt markiert und in Publish Summary verlinkt. |
| Bedingungsfeld und Ziel-Feld gleich | Regel kann nicht aktiv werden; Inline-Hinweis auf Selbstreferenz. |
## Subframe
Kein eigener Hauptscreen. Logic bleibt Arbeitsbereich in S01. Ein extra Frame ist nur noetig, wenn David den geoeffneten Logic-Modus separat sehen will.
## Notizen
Nicht v1: Multi-Step, If/Else-Baeume, Repeater, Scoring oder Cross-Field-Rechnung.
@@ -0,0 +1,89 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D06
screen: Feldkarten Menue
typ: Inline-Zustand in S01
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: in ADV-S01 Form-Builder Canvas, kein eigener Screen
subframe: "-"
---
# D06 - Feldkarten Menue
## Ziel
Interne Nutzer erreichen sekundaere Feldaktionen direkt an der Feldkarte, ohne den Inspector mit seltenen Aktionen zu ueberladen.
## Pattern / Archetyp
3-Punkte-Menue / Kontextmenue auf einer Feldkarte.
## Daten
- Feldname
- Feldtyp
- Field Key
- ob das Feld in Logic verwendet wird
- ob das Feld in Actions/Mapping verwendet wird
- ob das Formular published ist
## Aktionen
- Feld bearbeiten
- Feld duplizieren
- nach oben/unten verschieben, falls Drag nicht genutzt wird
- Feld einklappen/ausklappen
- Field Key kopieren
- Feld loeschen
## Verhalten
- Klick auf das 3-Punkte-Menue oeffnet ein kleines Menue an der Feldkarte.
- `Bearbeiten` setzt den Fokus auf den rechten Inspector.
- `Duplizieren` erstellt direkt eine Kopie unter dem Feld, schlaegt einen neuen `field_key` vor und selektiert die Kopie.
- `Loeschen` fuehrt bei Abhaengigkeiten zu [[M01 Feld loeschen Confirm]].
- Destruktive Aktionen stehen getrennt unten im Menue.
- Weitere Folgefaelle stehen in [[D10 Builder Interaktionsfaelle]].
## Menue-Inhalt
| Eintrag | Verhalten | Sichtbarkeit |
|---|---|---|
| `Bearbeiten` | selektiert Feld und fokussiert Inspector. | immer, wenn editierbar |
| `Duplizieren` | erstellt Kopie unter dem Feld, neuer `field_key`, Kopie selected. | wenn editierbar |
| `Field Key kopieren` | kopiert technischen Key, Toast. | wenn Key vorhanden |
| `Nach oben/unten` | Alternative zu Drag, falls noetig. | optional |
| `Einklappen/Ausklappen` | veraendert nur Canvas-Darstellung. | bei langen Feldern |
| `Loeschen` | fuehrt zu Confirm bei Abhaengigkeiten. | getrennt unten, Danger |
## Was-passiert-wenn-Faelle
| Fall | UI-Reaktion |
|---|---|
| Feld wird in Logic genutzt | Menue kann kleinen Hinweis am Loeschen-Eintrag zeigen; Klick oeffnet [[M01 Feld loeschen Confirm]]. |
| Feld wird in Action-Mapping genutzt | Confirm nennt betroffene Action(s). |
| Formular ist archived | Bearbeiten/Loeschen disabled, Duplizieren kann als Ausweg aktiv bleiben. |
| Nutzer dupliziert Feld mit Select-Optionen | Optionen werden kopiert, aber Logic/Mapping nicht automatisch. |
| Nutzer dupliziert Datei/Fotofeld | Upload-Regeln werden kopiert, neuer `field_key`; keine hochgeladenen Dateien. |
| Nutzer loescht Feld ohne Abhaengigkeit | Kurze Rueckfrage oder Undo-Toast reicht; kein grosses Modal noetig. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Standard | normale Feldaktionen sichtbar. | Nur dokumentieren |
| Feld wird referenziert | Menue zeigt Hinweis vor Loeschen. | Nur dokumentieren |
| Keine Berechtigung | einzelne Aktionen disabled oder Menue fehlt. | Nur dokumentieren |
| Archived | Bearbeiten/Loeschen disabled, Duplizieren moeglich. | Nur dokumentieren |
## Subframe
Kein eigener Subframe-Screen. Das Menue wird in S01 dokumentiert. Ein eigener Frame ist nur noetig, wenn David den geoeffneten Feldkarten-Zustand sehen will.
## Notizen
Das Menue ist fuer sekundaere Aktionen. Primaere Feldbearbeitung bleibt im Inspector.
@@ -0,0 +1,137 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: D10
screen: Builder Interaktionsfaelle
typ: Case-Matrix in S01
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: in ADV-S01 Form-Builder Canvas, kein eigener Screen
subframe: "-"
---
# D10 - Builder Interaktionsfaelle
## Ziel
Diese Datei beantwortet die naechste Review-Ebene: Was passiert, wenn Nutzer im Builder etwas auswaehlen, ankreuzen, vergessen, wechseln oder eine Folgeaktion ausloesen?
Nicht jedes Detail muss ein eigener Frame werden. Dber vor Subframe muss klar sein, ob daraus Inline-Feedback, Dropdown, Popover, Panel, Modal, Toast oder Publish-Blocker entsteht.
## Grundregel
| Fall | UI-Reaktion |
|---|---|
| Nutzer waehlt etwas aus und der naechste Schritt haengt davon ab | Nachfolgende Felder im selben Panel werden sichtbar oder aktiv. |
| Nutzer vergisst einen Pflichtteil in der Mitte | Der Block bleibt unvollstaendig, zeigt Inline-Warnung und blockiert Publish/Test nur dort, wo es fachlich noetig ist. |
| Nutzer waehlt etwas, das alte Eingaben ungueltig macht | Dlte Eingaben werden nicht still geloescht; System zeigt Hinweis und laesst bestaetigen oder markiert ungueltig. |
| Nutzer loescht etwas, das anderswo verwendet wird | Confirm oder Inline-Blocker mit konkreter Referenzliste. |
| Nutzer fuegt etwas Medien-/Dateibezogenes hinzu | Kein globales Modal; normales Datei-Feld oeffnet Inspector. Nur Datei-Auswahl selbst ist System-/Upload-Dialog. |
| Nutzer bestaetigt eine public-wirksame Aktion | Confirm-Dialog. |
## Feld hinzufuegen / Feldtyp auswaehlen
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz fuer Subframe |
|---|---|---|---|---|
| Klick auf Feldtyp `Text` | Feld wird am Ende eingefuegt, Karte selected, Inspector oeffnet Basis-Sektion. | Canvas + Inspector | nein | Happy Path zeigen. |
| Drag eines Feldtyps | Dropzonen erscheinen, nach Drop ist Feld selected. | Canvas-Zustand | nein | Dropziel sichtbar machen. |
| Nutzer fuegt `Select` hinzu und vergisst Optionen | Feldkarte zeigt Warnung, Inspector `Optionen` zeigt Pflicht-Hinweis, Publish blockiert. | Inline + Inspector + Publish Summary | ja fuer Publish | Wichtig, weil Public Form sonst nicht beantwortbar ist. |
| Nutzer fuegt `Datei` hinzu | Feldkarte erscheint als Upload-Feld, Inspector zeigt Dateitypen, Groesse, Mehrfachupload, Foto-Hinweis. | Inspector | nein | Kein eigenes Modal fuer Feld-Konfiguration. |
| Nutzer aktiviert `Foto erlaubt` beim Datei-Feld | Mobile-Kamera-Hinweis wird im Inspector sichtbar; Public Renderer darf Kamera/Upload anbieten. | Inline im Inspector | nein | Foto bleibt Variante von Datei, kein eigener Feldtyp. |
| Nutzer setzt `Mehrere Dateien` und vergisst max. Groesse | Warnung, aber Publish blockiert nicht zwingend; Security/Dev kann Default setzen. | Inline-Warnung | nein/Warning | Empfehlung: warnen, nicht blockieren. |
| Nutzer aendert Feldtyp nach Konfiguration | System zeigt Warnung, wenn Optionen/Validation verloren gehen koennen. | Popover/Confirm klein | ja bis Bestaetigung | Nur relevant, falls Feldtypwechsel erlaubt ist. |
| Nutzer dupliziert Feld mit Logic/Mapping | Kopie bekommt neuen `field_key`; Logic/Mapping wird nicht automatisch kopiert. | Toast + Inspector | nein | Sonst entstehen unsichtbare Doppelreferenzen. |
## Feld-Inspector / Checkboxen / Optionen
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz |
|---|---|---|---|---|
| Label leer lassen | Feldkarte und Inspector zeigen Inline-Fehler. | Inline | ja fuer Publish | Feld darf als Draft gespeichert werden. |
| `Pflichtfeld` ankreuzen, aber Feld ist durch Logic versteckt | Hinweis: Pflicht gilt nur, wenn Feld sichtbar ist. | Inline-Hinweis im Inspector | nein | Public Submit darf nicht blockieren, wenn Feld versteckt ist. |
| `Pflichtfeld` ankreuzen bei Datei | Inspector empfiehlt Dateitypen/Groesse; ohne Beschraenkung nur Warnung. | Inline-Warnung | nein/Warning | Public Risiko, aber v1 nicht hart blockieren. |
| Select-Option leer lassen | Option-Zeile zeigt Fehler; Publish blockiert. | Inline | ja fuer Publish | Fehler nahe Option, nicht nur global. |
| Select-Option loeschen, die in Logic genutzt wird | Confirm/Inline-Hinweis zeigt betroffene Regeln; nach Loeschen werden Regeln kaputt markiert. | Confirm oder Inline-Blocker | ja fuer Publish | Sehr wichtiger Folgefall. |
| Field Key manuell aendern | System prueft Duplikat/ungueltig; zeigt Mapping/Logic-Hinweis. | Inline im Inspector | ja bei ungueltig | Nicht still aendern, wenn Referenzen betroffen sind. |
| User vergisst den mittleren Schritt `Optionen` und geht zu Publish | Publish Summary springt direkt zur Optionen-Sektion. | Publish Summary | ja | Genau der "Mitte vergessen"-Fall. |
## Logic-Regel: Auswahlfolge und vergessene Mitte
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz |
|---|---|---|---|---|
| Neue Regel klicken | Leeres Detailpanel oeffnet mit Reihenfolge: Wenn-Feld -> Operator -> Wert -> Dann-Aktion -> Zielfeld. | Panel | nein | Kein Modal. |
| Wenn-Feld auswaehlen | Operator-Dropdown wird passend zum Feldtyp gefiltert. | Dropdown im Panel | nein | Text hat andere Operatoren als Boolean/Select. |
| Wenn-Feld waehlen, Operator vergessen | Regel bleibt `Unvollstaendig`; Aktivieren/Test disabled. | Inline im Panel | ja fuer aktive Regel | Speichern als inaktiver Draft moeglich. |
| Operator waehlen, Wert vergessen | Wertfeld wird markiert; Test disabled; Publish blockiert nur, wenn Regel aktiv ist. | Inline im Panel | ja fuer aktive Regel | "Mitte vergessen" wird lokal sichtbar. |
| Ziel-Feld vergessen | Regel bleibt unvollstaendig; Summary zeigt fehlendes Zielfeld. | Inline | ja fuer aktive Regel | Sprungziel auf Zielfeld-Auswahl. |
| Bedingungsfeld und Zielfeld sind identisch | Inline-Warnung; Regel kann nicht aktiv werden. | Inline | ja fuer aktive Regel | Verhindert Selbstreferenz. |
| Nutzer waehlt `ist leer` | Wertfeld verschwindet, weil kein Wert noetig ist. | Dynamisches Panel | nein | Wichtig: Feld nicht disabled ohne Erklaerung. |
| Nutzer wechselt Wenn-Feld nach gesetztem Wert | Dlter Wert wird markiert als ungueltig oder geloescht nach Hinweis. | Inline-Hinweis / kleines Confirm | ja bis korrigiert | Keine stille Datenvernichtung. |
| Nutzer loescht Feld, das in Regel steckt | Regel bleibt sichtbar, rot markiert, Publish blockiert. | Logic-Liste + Publish Summary | ja | Referenzbruch nicht verstecken. |
## Action-Detail / Mapping
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz |
|---|---|---|---|---|
| `Add Action` klicken | Typ-Auswahl oeffnet als Popover/Auswahlpanel mit kurzen Beschreibungen. | Popover | nein | Kein Modal. |
| Action-Typ waehlen | Detailpanel oeffnet mit typ-spezifischen Pflichtfeldern. | Panel/Drawer | nein | Action ist erstmal unvollstaendig. |
| Typ `Email Submitter` waehlen, aber kein Email-Feld vorhanden | Panel zeigt Hinweis und bietet `Email-Feld hinzufuegen` oder anderes Feld waehlen. | Inline-Hinweis + CTD | ja fuer aktive Action | Kein stilles Mapping. |
| Typ `Projekt erstellen` waehlen, aber Pipeline fehlt | Pipeline-Feld markiert; Test/Publish blockiert fuer aktive Action. | Inline | ja | Action darf als inaktiv geparkt werden. |
| Mapping-Zeile Ziel gesetzt, Quelle vergessen | Zeile bleibt unvollstaendig; Test disabled; Publish blockiert aktive Action. | Inline in Mapping-Zeile | ja fuer aktive Action | "Mitte vergessen" bei Mapping. |
| Nutzer aendert Action-Typ nach Mapping | Hinweis: bestehendes Mapping passt evtl. nicht mehr; Nutzer bestaetigt oder bricht ab. | Confirm/Popover | ja bis Bestaetigung | Sonst Datenverlust. |
| Nutzer deaktiviert unvollstaendige Action | Warnung verschwindet aus Publish-Blockern, bleibt aber in Action-Liste als inaktiv/unvollstaendig. | Inline | nein | Inaktive Actions duerfen Draft bleiben. |
| Webhook URL eingetragen, aber ungueltig | URL-Feld zeigt Fehler, Test disabled. | Inline | ja fuer aktive Action/Test | Copy: `URL muss mit http:// oder https:// beginnen.` |
| Test ausfuehren ohne Pflichtmapping | Test startet nicht; Panel markiert fehlende Zeilen. | Inline | ja fuer Test | Kein Toast, weil nichts ausgefuehrt wurde. |
## Publish / Save / Wechselwirkungen
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz |
|---|---|---|---|---|
| Publish klicken mit fehlendem Feldlabel | Publish Summary zeigt Blocker und springt zur Feldkarte/Inspector. | Inline Summary | ja | Kein Modal. |
| Publish klicken mit unvollstaendiger aktiver Logic | Summary zeigt Logic-Blocker, Klick oeffnet Logic-Modus und Detailpanel. | Summary + Panel | ja | Direkt reparierbar. |
| Publish klicken mit inaktiver unvollstaendiger Action | Warnung optional, aber kein Blocker. | Warning | nein | Inaktiv wirkt nicht public. |
| Publish klicken mit unsaved changes | Erst Save/Validation-Hinweis; danach Publish-Check. | Inline/Popover | ja bis Save | Kein eigener Screen. |
| Published Form stark aendern | Hinweis, dass Public-Version betroffen ist; Save/Publish-Update klar trennen. | Banner/Inline | nein/Warning | David/Dev muss final entscheiden, ob Update extra Publish braucht. |
| Nutzer verlaesst S01 mit Dirty State | [[M04 Unsaved Changes Confirm]] greift. | Confirm/Browser Guard | ja bis Entscheidung | Standard-Guard. |
| Unpublish klicken | [[M02 Unpublish Confirm]] oeffnet. | Confirm Modal | ja bis Bestaetigung | Public-Link betroffen. |
## Public-Preview / Live-Folgen
| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz |
|---|---|---|---|---|
| Preview oeffnen mit unvollstaendigem Feld | Preview zeigt Draft-nahe Darstellung, aber Warnung bleibt im Builder. | Preview + Inline-Warnung | nein | Preview darf beim Bauen helfen. |
| Logic in Preview testen | Felder erscheinen/verschwinden live. | Preview-Modus | nein | Nutzer sieht Folge direkt. |
| Datei/Fotofeld in Preview | Upload-Bereich zeigt erlaubte Typen, max. Groesse, mobile Foto-Hinweis. | Preview | nein | Kein echter Upload noetig im Builder. |
| Captcha/Public Schutz in Preview | Kann als Platzhalter sichtbar sein. | Preview | nein | Kein echtes Captcha im Builder notwendig. |
## Modal-/Popover-Inhalte
| UI-Ebene | Wann | Inhalt |
|---|---|---|
| Action-Typ-Popover | `Add Action` | Liste der Action-Typen, je ein Kurzsatz, disabled Hinweis fuer nicht verfuegbare Typen. |
| Feldtyp-Wechsel-Confirm | Feldtyp nach Konfiguration aendern | Was verloren geht: Optionen, Validation, Default, Mapping-Hinweis; Buttons `Typ aendern` / `Abbrechen`. |
| Option-loeschen-Confirm | Option wird in Logic genutzt | betroffene Regel(n), Hinweis auf Publish-Blocker, Buttons `Option loeschen` / `Abbrechen`. |
| Feld-loeschen-Confirm | Feld wird in Logic/Actions genutzt | Feldname, Field Key, betroffene Regeln/Actions, Buttons `Feld loeschen` / `Abbrechen`. |
| Publish-Warnpopover | nur Warnungen, keine Blocker | Warnliste und Button `Trotzdem veroeffentlichen` falls Produkt das erlaubt. |
| Unpublish-Confirm | Public-Link offline nehmen | Public URL, Folge fuer QR/iFrame, Buttons `Unpublish` / `Abbrechen`. |
## Offene Produktentscheidungen
| Frage | Empfehlung |
|---|---|
| Darf der Feldtyp nachtraeglich gewechselt werden? | Ja, aber mit Confirm, wenn dadurch Optionen/Validation/Mapping betroffen sind. |
| Werden unvollstaendige inaktive Logic/Actions gespeichert? | Ja, als Draft/inaktiv, aber klar markiert. |
| Blockiert fehlende Datei-Typbeschraenkung Publish? | Empfehlung: Warnung, kein harter Blocker. |
| Braucht `Bild hinzufuegen` einen eigenen Content Block? | Nicht in D-FORM v1. Bilder/Fotos laufen als Datei-Feld-Variante; Branding-Logo gehoert in Settings/Public Form. |
| Sollen published Aenderungen direkt live gehen oder Publish-Update brauchen? | Offene Produktentscheidung; S01 muss Zustand `Published mit ungespeicherten/unveroeffentlichten Aenderungen` zeigen koennen. |
## Subframe
Kein eigener Subframe-Screen. D10 ist eine Vor-Subframe-Case-Matrix. Wenn David einzelne Faelle visuell sehen will, sollten zuerst diese Kandidaten gebaut werden:
- [[93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]]
- [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]
- [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]]
- [[M01 Feld loeschen Confirm]]
- [[M02 Unpublish Confirm]]
@@ -0,0 +1,92 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: M01
screen: Feld loeschen Confirm
typ: Confirm Modal
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: von S01 Feldkarte oder Inspector
subframe: "-"
---
# M01 - Feld loeschen Confirm
## Ziel
Interne Nutzer bestaetigen bewusst, dass ein Feld entfernt wird, besonders wenn es in Logic oder Actions verwendet wird.
## Pattern / Archetyp
D5 Confirm-Modal / kleiner Sicherheitsdialog.
## Daten
- Feldname
- Feldtyp
- Field Key
- Anzahl betroffener Logic-Regeln
- Anzahl betroffener Actions oder Mapping-Zeilen
- Publish-Status des Formulars
## Aktionen
- `Feld loeschen`
- `Abbrechen`
- optional `Betroffene Regeln ansehen`
- optional `Betroffene Actions ansehen`
## Verhalten
- Bei Feldern ohne Abhaengigkeiten kann Loeschen sehr kurz bestaetigt werden oder als Menue-Aktion mit Undo/Toast laufen.
- Bei Abhaengigkeiten ist ein Confirm Pflicht.
- Der Confirm nennt konkret, welche Regeln oder Actions betroffen sind.
- Nach Loeschen wird das Feld entfernt; betroffene Logic/Actions werden markiert oder muessen repariert werden.
- Publish bleibt blockiert, solange kaputte Referenzen existieren.
- Details zu Folgefaellen stehen in [[D10 Builder Interaktionsfaelle]].
## Layout / Inhalt
1. Headline `Feld loeschen?`
2. Feldname und Feldtyp.
3. Hinweis, dass das Feld aus dem Formular entfernt wird.
4. Falls relevant: Liste der betroffenen Logic-Regeln und Actions.
5. Aktionen: Danger-Button `Feld loeschen`, sekundar `Abbrechen`.
## Modal-Inhalt je Fall
| Fall | Was steht im Modal? |
|---|---|
| Keine Abhaengigkeit | `Dieses Feld wird aus dem Formular entfernt.` |
| Feld in Logic verwendet | `Dieses Feld wird in 2 Logic-Regeln verwendet. Diese Regeln muessen danach repariert oder deaktiviert werden.` |
| Feld in Actions verwendet | `Dieses Feld ist in 1 Action-Mapping hinterlegt. Die Action wird danach unvollstaendig.` |
| Published Form | `Das Formular ist veroeffentlicht. Aenderungen koennen die oeffentliche Version betreffen.` |
| Datei/Fotofeld | `Das Upload-Feld wird entfernt. Bereits eingereichte Dateien in Submissions sind davon nicht Teil dieses Builders.` |
## Nach Bestaetigung
| Folge | Verhalten |
|---|---|
| Feld geloescht | Feldkarte verschwindet, Canvas selektiert naechstes sinnvolles Feld. |
| Logic betroffen | Regel wird rot/kaputt markiert und in Publish Summary gelistet. |
| Action betroffen | Mapping-Zeile wird als fehlend markiert; aktive Action blockiert Publish. |
| Keine Abhaengigkeit | Toast `Feld geloescht`; Undo optional. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Ohne Abhaengigkeit | einfacher Confirm oder kurze Rueckfrage. | Nur dokumentieren |
| Mit Logic/Action-Bezug | Confirm mit Referenzliste. | Nur dokumentieren |
| Published Form | Hinweis, dass Public-Version betroffen sein kann. | Nur dokumentieren |
| Fehler | Loeschen fehlgeschlagen. | Nur dokumentieren |
## Subframe
Noch kein eigener Subframe-Frame. Wenn David einen Modal-Frame fuer D-FORM sehen will, ist dieses Confirm der erste Kandidat.
## Notizen
Keine normale Feldbearbeitung im Modal. Das Modal ist nur fuer den Risiko-Moment Loeschen.
@@ -0,0 +1,68 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: M02
screen: Unpublish Confirm
typ: Confirm Modal
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: von S01 Header oder More-Menue
subframe: "-"
---
# M02 - Unpublish Confirm
## Ziel
Interne Nutzer bestaetigen bewusst, dass ein Public Form nicht mehr erreichbar ist.
## Pattern / Archetyp
D5 Confirm-Modal.
## Daten
- Formularname
- aktuelle Public URL
- Publish-Status
- Hinweis, ob iFrame/QR ebenfalls betroffen sind
## Aktionen
- `Unpublish`
- `Abbrechen`
- optional Public URL kopieren, bevor deaktiviert wird
## Verhalten
- Klick auf `Unpublish` oeffnet einen Confirm-Dialog.
- Der Dialog erklaert, dass Public URL, QR und iFrame danach nicht mehr fuer Submitter nutzbar sind.
- Nach Bestaetigung wechselt der Status zu Draft/Unpublished.
- Sharing zeigt danach Draft-Hinweis.
- Erfolg wird per Toast bestaetigt.
## Layout / Inhalt
1. Headline `Formular offline nehmen?`
2. Hinweis: Der oeffentliche Link ist danach nicht mehr erreichbar.
3. Public URL als Kontext.
4. Aktionen: Danger- oder Secondary-Button `Unpublish`, sekundar `Abbrechen`.
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Confirm | Nutzer bestaetigt Public-Auswirkung. | Nur dokumentieren |
| Laden | Statuswechsel wird gespeichert. | Wiederverwenden |
| Erfolg | Builder zeigt Draft/Unpublished. | Toast/Statuswechsel |
| Fehler | Unpublish fehlgeschlagen. | Nur dokumentieren |
## Subframe
Noch kein eigener Subframe-Frame. Falls David einen public-wirksamen Confirm sehen will, ist M02 ein sinnvoller Kandidat.
## Notizen
Publish selbst bleibt Inline-Check. Unpublish braucht Confirm, weil externe Nutzer betroffen sind.
@@ -0,0 +1,67 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: M03
screen: Archive Confirm
typ: Confirm Modal
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: von S01 More-Menue
subframe: "-"
---
# M03 - Archive Confirm
## Ziel
Interne Nutzer bestaetigen bewusst, dass ein Formular archiviert und nicht mehr normal bearbeitet wird.
## Pattern / Archetyp
D5 Confirm-Modal.
## Daten
- Formularname
- Publish-Status
- Anzahl Felder
- Hinweis auf Public-Verfuegbarkeit
- Hinweis auf spaetere Duplikat-Option
## Aktionen
- `Drchivieren`
- `Abbrechen`
## Verhalten
- Drchivieren liegt im More-Menue, nicht als Hauptaktion.
- Der Confirm erklaert, ob die Public-Version deaktiviert wird oder ob vorher Unpublish noetig ist.
- Nach Drchivierung wird S01 read-only oder verlaesst den Bearbeitungsmodus.
- Primaere naechste Aktion ist meist `Duplizieren` oder zur Forms-Liste zurueck, aber Forms-Liste ist nicht Teil von D-FORM.
## Layout / Inhalt
1. Headline `Formular archivieren?`
2. Kurztext, dass das Formular nicht mehr aktiv bearbeitet werden soll.
3. Hinweis auf Public-Link-Folge.
4. Aktionen: Danger-Button `Drchivieren`, sekundar `Abbrechen`.
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Confirm | Sicherheitsfrage vor Drchivierung. | Nur dokumentieren |
| Published | Hinweis auf Public-Folge. | Nur dokumentieren |
| Laden | Drchivierung wird gespeichert. | Wiederverwenden |
| Fehler | Drchivieren fehlgeschlagen. | Nur dokumentieren |
## Subframe
Kein eigener Hauptscreen. Nur als Confirm-Zustand dokumentieren, ausser David will Risiko-Modals gesammelt bauen.
## Notizen
Archive ist nicht dasselbe wie Unpublish. Falls das Produkt beides koppelt, muss Development/Produkt das final festlegen.
@@ -0,0 +1,60 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: M04
screen: Unsaved Changes Confirm
typ: Confirm Modal / Browser Guard
umsetzung: Nur dokumentieren
status: Vor Subframe / dokumentiert
route: beim Verlassen von S01 mit Dirty State
subframe: "-"
---
# M04 - Unsaved Changes Confirm
## Ziel
Interne Nutzer verlieren keine ungespeicherten Builder-Aenderungen, wenn sie S01 verlassen.
## Pattern / Archetyp
Confirm-Dialog oder Browser Navigation Guard.
## Daten
- Dirty State
- letzter Speicherzeitpunkt
- ob Save aktuell moeglich ist
- ob Publish-Check noch Blocker hat
## Aktionen
- `Speichern und verlassen`
- `Ohne Speichern verlassen`
- `Abbrechen`
## Verhalten
- Der Zustand tritt nur auf, wenn ungespeicherte Aenderungen existieren.
- Bei normalem Wechsel zwischen S01-Modi erscheint kein Dialog.
- Beim Wegnavigieren ueber Breadcrumb, Routewechsel oder Browser-Zurueck wird gewarnt.
- Wenn Autosave voll zuverlaessig ist, kann der Zustand zu einem kurzen Save-Hinweis reduziert werden.
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Dirty | Aenderungen noch nicht gespeichert. | Nur dokumentieren |
| Save moeglich | Nutzer kann speichern und verlassen. | Nur dokumentieren |
| Save fehlgeschlagen | Nutzer soll im Builder bleiben koennen. | Nur dokumentieren |
| Keine Aenderungen | kein Confirm noetig. | Wiederverwenden |
## Subframe
Kein eigener Subframe-Screen. Standard-Guard, nur dokumentieren.
## Notizen
Dieser Zustand ist wichtig fuer Builder-Vertrauen, aber kein D-FORM-Hauptframe.
@@ -0,0 +1,156 @@
---
kind: design-direction
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
status: Review-ready / Subframe Draft gebaut
stand: 2026-07-09
---
# Simple Builder Neuausrichtung
## Warum
Der bisherige S01 ist fachlich vollstaendig, wirkt fuer normale Handwerksbetriebe aber zu schwer. Nutzer sollen nicht das Gefuehl haben, einen Automations- oder CRM-Editor bedienen zu muessen, wenn sie nur ein Anfrageformular erstellen wollen.
Neue Richtung: einfacher Formular-Editor nach Google-Forms-Gefuehl, aber mit HiveGrid-Logik im Hintergrund.
## Grundsatz
| Alt | Neu |
|---|---|
| Palette + Canvas + Inspector dauerhaft sichtbar | Ein ruhiger Fragen-Editor mit einzelnen Fragekarten |
| Viele Arbeitsmodi gleichzeitig | Nur das zeigen, was fuer den naechsten Schritt gebraucht wird |
| Logic, Actions, Mapping sichtbar als Profi-Module | Logic/Lead-Verknuepfung als einfache Zusatzoptionen |
| 12 technische Feldtypen | Verstaendliche Fragetypen |
| Nutzer baut Verknuepfungen selbst | Lead-Formular ist automatisch aktiv, zeigt aber `Felder zuweisen` verstaendlich im Editor |
## Neue Screen-Idee
| ID | Screen | Ziel |
|---|---|---|
| S00 | [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] | Formular-Zentrale als erste Seite: finden, mehrfach filtern, bearbeiten, neu erstellen. |
| E01 | [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]] | Empty State, wenn noch kein Formular existiert. |
| E02 | [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]] | Empty State, wenn Suche/Filter nichts finden. |
| S01 | [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] | Nutzer waehlt zuerst, welche Art Formular er bauen will. |
| S02 | [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]] | Haupt-Editor fuer alle Formulararten, jeweils mit Vorlage/Startfragen. |
| S02L | [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]] | Lead-spezifischer Zustand im S02-Look: Formularfragen Lead-Feldern zuweisen. |
| E05 | [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]] | Fehlerzustand, wenn eine Lead-Zuweisung fehlt oder nicht moeglich ist. |
| S03 | [[Screens/06 S03 Formular Design|S03 Formular Design]] | Design-Tab mit Logo, Farben und Live-Vorschau. |
| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | Public Zielbild fuer Kunden. |
| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | Erfolg nach Absenden. |
| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | Public-Blocker, wenn Formular nicht erreichbar ist. |
| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | Public Fehlerzustand mit erhaltenen Werten. |
| S05 | [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]] | Antworten-Tab als Excel-/Tabellenansicht ohne Kennzahl-Kacheln. |
| E03 | [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]] | Empty State, wenn ein Formular noch keine Einsendungen hat. |
| E04 | [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]] | Error State, wenn Excel/CSV-Export scheitert. |
S01B/S01C/S01D/S01E sind gebaut, aber nicht mehr Hauptfluss. Sie liegen als spaetere Varianten bzw. Referenz bei 80-83.
## Einfacher Ablauf
```text
S00 Formulare verwalten
-> Neues Formular
-> S01 Formularart auswaehlen
-> S02 mit passender Vorlage/Startfragen
-> Design: S03
-> Public Zielbild: S04 und Public States
-> Antworten/Export: S05
```
S00 bleibt bewusst knapp: vier Karten, kurze Texte, unten `Weiter`. Keine zweite Vorlagen-Auswahl im selben Screen.
## Formulararten
| Art | Fuer wen | Was passiert automatisch? |
|---|---|---|
| Website-/Externes Formular | Kunden oder Interessenten fuellen es per Link/Website aus. | Public Link, mCaptcha, Datenschutz-Hinweis. |
| Lead-Formular | Neue Kundenanfragen sollen direkt im Vertrieb landen. | Kontakt-/Anfragefelder werden vorgeschlagen, Lead-Erstellung ist aktiv, `Felder zuweisen` ist sichtbar. |
| Fragebogen / Umfrage | Feedback, Zufriedenheit, kurze Abfragen. | Antworten werden gesammelt und als Auswertung vorbereitet, keine Lead-Pipeline. |
| Internes Formular | Mitarbeiter melden etwas intern, z. B. Material, Rueckruf, Schaden. | Kein Public-Marketing-Kontext, interne Sicht und interne Ablage. |
## Fragetypen statt Feldtypen
| Fragetyp | UI-Begriff |
|---|---|
| Einzeiliger Text | Kurzantwort |
| Mehrzeiliger Text | Absatz |
| Single Select | Multiple Choice |
| Multi Select | Mehrfachauswahl |
| Select | Drop-down |
| Datei / Bild | Datei oder Bild hochladen |
| Datum | Datum |
| Zeit | Uhrzeit |
Email, Telefon und Name koennen beim Lead-Formular als vorgeschlagene Startfragen erscheinen, statt als technische Sondertypen laut zu werden.
Bewusst nicht im aktuellen S02-Hauptdropdown: Lineare Skala, Bewertung, Multiple-Choice-Raster und Kaestchenraster. Diese Typen koennen spaeter wieder diskutiert werden, werden jetzt aber nicht gebaut.
## Was bleibt aus unserer bisherigen Logik
- Public Formular S04 bleibt Zielbild fuer Kunden.
- mCaptcha bleibt fuer externe Formulare.
- Publish-Blocker bleiben, aber einfacher formuliert.
- Logic bleibt moeglich, aber als `Bedingung` an einer Frage.
- Actions bleiben im Screen. Bei Lead-Formularen wird `Lead anlegen` als einfache Card mit `Felder zuweisen` gezeigt.
- Link/QR/Einbetten bleiben moeglich, aber im Veroeffentlichen-/Public-Link-Kontext statt als eigener Reiter.
## Empfehlung
S02 wurde in Subframe gebaut, weil es am naechsten an Google Forms liegt und schnell vergleichbar ist.
S01B wurde als zweite Alternative gebaut, ist aktuell aber nicht Hauptfluss.
S01C/S01D/S01E wurden als Beispiel-Editoren gebaut, sind aktuell aber nur Referenz. Im Hauptfluss oeffnen alle Formulararten S02 mit anderer Vorlage/Startfragen.
Der alte ADV-S01 und die Detailseiten D07/D08/D09 bleiben als fachliche Vollstaendigkeits-Referenz erhalten, sollten aber nicht mehr die erste Empfehlung fuer Handwerker sein.
## Ergaenzung: Lead Felder zuweisen
Nach David-Feedback reicht der reine Hinweis `Lead-Verknuepfung aktiv` nicht. Nutzer muessen sehen koennen, welche Frage in welches Lead-Feld geschrieben wird.
Entscheidung:
- Keine Advanced-Mapping-Tabelle.
- Gleicher Look wie S02.
- Die blaue Lead-Hinweis-Card nutzt dieselbe Struktur wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts.
- Dropdown-Vorlage fuer jede Zuweisung.
- Pflicht: Name, Kontaktweg und Beschreibung.
- Optional: Bereich, Datei/Bild, Quelle.
- Nicht passende Optionen werden verhindert oder disabled mit Begruendung gezeigt.
- Wenn eine Zuweisung unmoeglich ist, greift E05.
## Ergaenzung: Verwaltung und Tabs
Nach der Formularart-Auswahl braucht der Nutzer auch einen ruhigen Ort, an dem alle Formulare verwaltet werden. Dafuer wurde S00 als Formular-Zentrale ergaenzt.
Innerhalb eines Formulars bleiben die Reiter bewusst einfach:
| Reiter | Bedeutung |
|---|---|
| Fragen | Formularfelder bauen und bearbeiten. |
| Design | Logo, Farben und Darstellung fuer die Kundensicht anpassen. |
| Antworten | Einsendungen als einfache Tabelle ansehen und exportieren. |
Link, QR-Code und Einbettung werden nach dem Veroeffentlichen bzw. im Public-Link-Kontext verwaltet, nicht als eigener Hauptreiter.
## Subframe-Links
| Screen | Subframe |
|---|---|
| S01 Formularart auswaehlen | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit |
| S02 Einfacher Fragen Editor | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit |
| S02L Lead Felder zuweisen | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit |
| E05 S02 Lead Zuweisung pruefen | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit |
| S00 Formulare verwalten | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit |
| S03 Formular Design | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit |
| S04 Oeffentliches Formular | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit |
| V01 Public Erfolg oder Redirect | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit |
| V02 Public Formular nicht verfuegbar | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit |
| V03 Public Captcha oder Submit Fehler | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit |
| S05 Antworten Tabelle | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit |
| E01 S00 Keine Formulare | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit |
| E02 S00 Keine Treffer | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit |
| E03 S05 Keine Antworten | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit |
| E04 S05 Export Fehler | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit |
@@ -0,0 +1,202 @@
---
kind: subframe-build-log
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
status: Review-ready / Subframe Draft gebaut
stand: 2026-07-09
---
# Subframe Bau Log - D-FORM
## Projekt
Subframe-Projekt: `Basedesign`
Project ID: `f023064a5ca0`
Flow: `(MCP) WF-D-FORM Form Builder`
Flow-Link: https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad
## Gebaut
| Nr. | ID | Screen | Status | Subframe |
|---|---|---|---|---|
| 01 | S00 | Formulare verwalten | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit |
| 02 | E01 | S00 Keine Formulare | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit |
| 03 | E02 | S00 Keine Treffer | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit |
| 04 | S01 | Formularart auswaehlen | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit |
| 05 | S02 | Einfacher Fragen Editor | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit |
| 05b | S02L | Lead Felder zuweisen | Hauptfluss / Lead State | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit |
| 05c | E05 | S02 Lead Zuweisung pruefen | Hauptfluss / Lead Error | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit |
| 06 | S03 | Formular Design | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit |
| 07 | S04 | Oeffentliches Formular | Public Zielbild | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit |
| 08 | V01 | Public Erfolg oder Redirect | Public State | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit |
| 09 | V02 | Public Formular nicht verfuegbar | Public State | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit |
| 10 | V03 | Public Captcha oder Submit Fehler | Public State | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit |
| 11 | S05 | Antworten Tabelle | Hauptfluss / Auswertung | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit |
| 12 | E03 | S05 Keine Antworten | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit |
| 13 | E04 | S05 Export Fehler | Hauptfluss / Error | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit |
| 80 | S01B | Gefuehrter Fragen Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit |
| 81 | S01C | Website Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit |
| 82 | S01D | Umfrage Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit |
| 83 | S01E | Internes Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit |
| 90 | ADV-S01 | Form-Builder Canvas | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit |
| 90b | ADV-S01-2 | Form-Builder Canvas 2 | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit |
| 91 | D07 | Logic Regel Detail | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit |
| 92 | D08 | Action Detail mit Mapping | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit |
| 93 | D09 | Publish Blocker Summary | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit |
## Qualitaetscheck Builder
- ADV-S01 ist interne Advanced-Mitarbeitersicht, kein Public Formular.
- ADV-S01 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar nachbauen.
- Die extra generierte Seite `ADV-S01 Form-Builder Canvas Default Layout` wurde geloescht, weil sie die Sidebar selbst nachgebaut hatte.
- ADV-S01-2 Form-Builder Canvas 2 liegt als neue Builder-Basis im gleichen Flow.
- S01 ist als vereinfachter Einstieg gebaut: Nutzer waehlt Formularart vor dem Builder.
- S01 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S01 enthaelt Website-/Externes Formular, Lead-Formular, Fragebogen/Umfrage und Internes Formular.
- S01 wurde am 2026-07-08 reduziert: keine doppelte Vorlagenzeile und keine einzelnen `Auswaehlen`-Links in den Karten; Auswahl ueber Karte + `Weiter`.
- S01 macht Lead-Formular bewusst einfach: Antworten werden automatisch als Lead gespeichert, kein Mapping fuer normale Nutzer.
- S02 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S02 ist die Google-Forms-nahe Alternative: Titelkarte, Fragekarten, Google-Forms-nahe Fragetyp-Auswahl, mehrere editierbare Optionen, Pflichtfrage-Toggle und erweiterte Werkzeugleiste.
- S02 zeigt Lead-Verknuepfung als ruhige blaue Card. Die Card nutzt denselben Layout-Aufbau wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktionen rechts.
- Arbeitsentscheidung: S02 ist aktuell der Haupt-Editor fuer alle Formulararten. S01B/S01C/S01D/S01E bleiben spaetere Varianten bzw. Referenz.
- S02-Fragetyp-Dropdown zeigt den aktuell gewaehlten Typ, z. B. `Multiple-Choice-Frage`; `Fragetyp` ist kein sichtbarer Wert.
- Im aktuellen S02-Hauptdropdown bleiben nur: Kurzantwort, Absatz, Multiple-Choice-Frage, Mehrfachauswahl, Drop-down, Datei oder Bild hochladen, Datum und Zeit. Lineare Skala, Bewertung und Raster sind gestrichen.
- In S02 bleiben Logic, Actions und Publish-Blocker einfach: `Bedingung` an der Frage, `Nach Absenden`/Lead anlegen als Card mit `Felder zuweisen`, Publish-Blocker als Banner/Popover im selben Screen.
- S02L ist gebaut: Lead-Felder werden per Dropdown-Vorlage Formularfragen zugewiesen. Die blaue Lead-Card nutzt dort denselben Aufbau wie in S02.
- E05 ist gebaut: unmoegliche oder fehlende Lead-Zuweisungen werden sichtbar markiert.
- Layout-Hinweis fuer S02L/E05: Inhaltlich sind beide Zustaende gebaut. In Subframe bei der finalen Sichtpruefung einmal kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist.
- S01B nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S01B ist die gefuehrte Alternative: Schrittleiste, linke Fragenliste, eine aktive Fragekarte und rechte Hilfe-/Preview-Zusammenfassung.
- S01B zeigt Lead-Verknuepfung als einfache aktive Einstellung mit Ziel-Pipeline/Team, ohne Mapping-Panel.
- S01C nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S01C ist das Beispiel fuer Website-/Externes Formular: oeffentliche Anfrage, Public-Link-Hinweis, mCaptcha/Datenschutz, kein Lead-Mapping.
- S01D nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S01D ist nur Referenz fuer Fragebogen/Umfrage; im aktuellen Hauptfluss keine Skala, Bewertung oder Raster bauen.
- S01E nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S01E ist das Beispiel fuer Internes Formular: interne Meldung/Materialbedarf, Team-Ziel, keine Public-Link- oder Lead-Pipeline-Logik.
- S01C und S01E wurden am 2026-07-07 neu aufgebaut, weil die alten Subframe-IDs nicht mehr auffindbar waren.
- S00 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S00 ist die Formular-Zentrale: Mehrfachfilter nach Status und Art, Suche, Sortierung, Tabelle und Zeilenaktionen.
- S00 zeigt mehrere aktive Status-Filter; die Art-Filter stehen separat bereit, damit nicht nur ein einzelner Tab moeglich wirkt.
- S03 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S03 ist der Design-Tab: Logo, Akzentfarbe, Theme, Formularbreite, Datenschutz-Hinweis und Live-Vorschau der Kundensicht.
- S05 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- S05 ist der Antworten-Tab: Excel-aehnliche Tabelle, Suche, erweiterter Zeitraumfilter und Excel/CSV-Export. Keine Kennzahl-Kacheln, damit die Ansicht ruhig bleibt.
- S05 hat keinen `Link teilen`-Button; Teilen/Link gehoert in den Veroeffentlichen-/Public-Link-Kontext.
- E01/E02 decken die wichtigen leeren Zustaende der Formular-Zentrale ab: noch keine Formulare und Suche/Filter ohne Treffer.
- E03/E04 decken die wichtigen Zustaende im Antworten-Tab ab: noch keine Antworten und Export-Fehler.
- Layout-Check fuer E01-E04: In Subframe die Page Layout Auswahl pruefen und bei Bedarf `Default Page Layout` setzen. Per MCP kann ich Inhalte bauen/editieren, aber den Page-Layout-Typ nicht verlaesslich setzen.
- ADV-S01 zeigt Topbar mit Save, Preview, Share und Publish.
- ADV-S01 zeigt links die Feld-Palette, mittig den Canvas und rechts den Feld-Inspector.
- ADV-S01 macht die Arbeitsmodi Builder, Logik, Aktionen, Freigabe, Vorschau und Einstellungen sichtbar.
- ADV-S01 zeigt einen konkreten Publish-Blocker fuer ein Select-Feld ohne Optionen.
- D07 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- D07 zeigt den Logik-Modus mit Regel-Liste, gewaehltem Regel-Detail, Test/Preview, Inline-Validation und Publish-Blocker-Hinweis.
- D08 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- D08 zeigt den Aktionen-Modus mit Action-Liste, Add-Action-Popover, Mapping-Tabelle, Ziel-/Pipeline-Fehlern, Test/Preview und Publish-Blocker-Hinweis.
- D09 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar.
- D09 zeigt Publish als blockierten internen Zustand: deaktivierter Publish-Button, 5 harte Blocker, nicht-blockierende Warnungen, Sprungziele und erneute Pruefung.
- D09 bleibt Inline Summary/Banner im Builder und ist kein Modal/Dialog.
## Qualitaetscheck Public
- S04 ist Kundensicht ohne App-Shell.
- S04 zeigt Tenant, Formular-Intro, Name, Email, Telefon, Bereich, Beschreibung, Datei/Foto, Datenschutz-Checkbox, mCaptcha und Submit.
- V01 bestaetigt klar, dass die Anfrage angekommen ist und deckt Redirect ab.
- V02 ersetzt rohe 404/500-Fehler durch einen ruhigen Public-Blocker.
- V03 behaelt Werte sichtbar und zeigt Captcha-, Upload- und Submit-Fehler ohne technische Details.
- `File Upload` nutzt in S04 und V03 `fullwith={true}`, damit Upload-Felder die verfuegbare Formularbreite nutzen.
- S04 und V03 nutzen jetzt die `Card`-Komponente fuer das zentrale Formularpanel. Die Groesse wird pro Instanz ueber `className` erweitert, nicht global an der Card-Komponente.
- S04 und V03 sind optisch angeglichen: beide nutzen `max-w-[760px]`, dieselbe Card-Logik und eine einspaltige Feldreihenfolge. V03 zeigt denselben Aufbau mit erhaltenen Werten plus Fehlerbanner/Inline-Fehler.
## Komponenten-Notiz
Die Subframe-Komponente `File Upload` hat eine Boolean-Prop `fullwith`.
Stand 2026-07-06 wurde die Komponente angepasst:
- `fullwith={true}` wirkt im Default-/Hover-/Error-Dropbereich.
- `fullwith={true}` wirkt jetzt auch im `uploading`-Zustand.
- `fullwith={true}` wirkt jetzt auch im `uploaded`-Zustand.
Merksatz: In Formularen nicht nur `className="w-full"` setzen, sondern bei `File Upload` auch `fullwith={true}` verwenden.
## Noch offen
Fuer den alten D-FORM-Scope sind keine empfohlenen Frames mehr offen.
Durch Davids neues Lead-Feedback wurden zwei Zustaende ergaenzt und in Subframe gebaut: S02L `Lead Felder zuweisen` und E05 `S02 Lead Zuweisung pruefen`. S00, S01, S02, S02L/E05, S03, S04/Public States, S05 und E01-E04 bilden weiter den aktuellen Hauptfluss.
S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind gebaut, aber aktuell nicht relevant fuer den Hauptfluss. Sie bleiben als spaetere Varianten bzw. Referenzseiten erhalten.
Subframe-Seitenliste: Per MCP kann ich bestehende Pages aktuell nicht umbenennen oder per Drag-and-drop sortieren. Fachlich gilt die Review-Reihenfolge unten. Falls die sichtbare Subframe-Liste sauber sortiert werden soll, die Pages in Subframe manuell umbenennen/ziehen.
Empfohlene sichtbare Sortierung:
1. `01 S00 Formulare verwalten`
2. `02 E01 S00 Keine Formulare`
3. `03 E02 S00 Keine Treffer`
4. `04 S01 Formularart auswaehlen`
5. `05 S02 Einfacher Fragen Editor`
6. `05b S02L Lead Felder zuweisen`
7. `05c E05 S02 Lead Zuweisung pruefen`
8. `06 S03 Formular Design`
9. `07 S04 Oeffentliches Formular`
10. `08 V01 Public Erfolg oder Redirect`
11. `09 V02 Public Formular nicht verfuegbar`
12. `10 V03 Public Captcha oder Submit Fehler`
13. `11 S05 Antworten Tabelle`
14. `12 E03 S05 Keine Antworten`
15. `13 E04 S05 Export Fehler`
16. `80 S01B Gefuehrter Fragen Editor`
17. `81 S01C Website Formular Editor`
18. `82 S01D Umfrage Editor`
19. `83 S01E Internes Formular Editor`
20. `90 ADV Form-Builder Canvas`
21. `90b ADV Form-Builder Canvas 2`
22. `91 D07 Logic Regel Detail`
23. `92 D08 Action Detail mit Mapping`
24. `93 D09 Publish Blocker Summary`
M01-M04 bleiben dokumentierte Confirm-Zustaende und werden nur gebaut, wenn David sie explizit anfordert.
## Modal-Regel fuer spaeter
Die vier bereits gebauten Public-Screens sind keine Modals:
- S04 Oeffentliches Formular
- V01 Public Erfolg oder Redirect
- V02 Public Formular nicht verfuegbar
- V03 Public Captcha oder Submit Fehler
Falls spaeter D-FORM-M-Zustaende gebaut werden, muessen sie als `Dialog`-Komponente gebaut werden:
- M01 Feld loeschen Confirm
- M02 Unpublish Confirm
- M03 Archive Confirm
- M04 Unsaved Changes Confirm
D07 und D08 bleiben Panel/Drawer-Zustaende im Builder. D09 bleibt Inline Summary/Banner. Diese drei sind keine Dialoge.
## Naechster Subframe-Schritt
Review in Subframe in dieser Reihenfolge:
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`
Danach nur bei Bedarf die spaeteren Referenzseiten pruefen: S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09.
@@ -0,0 +1,471 @@
---
kind: subframe-build-plan
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
status: Bauplan / umgesetzt als Review-ready Subframe Draft
stand: 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
```text
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. |
| 80 | S01B Gefuehrter Fragen Editor | Spaetere Alternative fuer Nutzer, die noch mehr Fuehrung brauchen. |
| 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. |
| 90 | ADV-S01 Form-Builder Canvas | Aelterer Profi-Canvas als Referenz. |
| 90b | ADV-S01-2 Form-Builder Canvas 2 | Advanced-/Referenz-Builder; nicht mehr erste Nutzerrichtung. |
| 91 | D07 Logic Regel Detail | Advanced-Zustand fuer Sichtbarkeitsregeln. |
| 92 | D08 Action Detail mit Mapping | Advanced-Zustand fuer Nach-Submit-Aktionen. |
| 93 | D09 Publish Blocker Summary | Advanced-Zustand fuer Publish-Blocker. |
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 und werden fuer Review vor den alten Canvas-Entwuerfen einsortiert. S02L und E05 wurden nach Davids Lead-Feedback ergaenzt. 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
```text
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 |
| S01B | `S01B Gefuehrter Fragen Editor` | Spaeter / Referenz |
| S01C | `S01C Website Formular Editor` | Spaeter / Referenz |
| S01D | `S01D Umfrage Editor` | Spaeter / Referenz |
| S01E | `S01E Internes Formular Editor` | Spaeter / Referenz |
| ADV-S01-2 | `ADV-S01-2 Form-Builder Canvas 2` | Advanced Builder / Referenz |
| ADV-S01 | `ADV-S01 Form-Builder Canvas` | Aelterer Bespoke Builder / Referenz |
| D07 | `D07 Logic Regel Detail` | Advanced / Referenz |
| D08 | `D08 Action Detail mit Mapping` | Advanced / Referenz |
| D09 | `D09 Publish Blocker Summary` | Advanced / 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. S01B-E, ADV-S01 Canvas und D07-D09 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. ADV-S01 behaelt Builder, Logic, Actions, Sharing, Preview, Settings als Referenz. |
| 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:
- `D07 Logic Regel Detail` = Panel/Drawer im Builder, kein Modal.
- `D08 Action Detail mit Mapping` = Panel/Drawer im Builder, kein Modal.
- `D09 Publish Blocker Summary` = Inline Banner/Summary im Builder, kein Modal.
- Public V01/V02 duerfen zwar card-artig zentriert aussehen, sind aber trotzdem volle Public-Zustaende und keine Dialoge.
## 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
```text
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
```text
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. S01B-E, ADV-S01 Canvas und D07-D09 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.
### Modus-Tabs
| Modus | Was zeigen? |
|---|---|
| Builder | Palette + Canvas + Inspector. |
| Logic | Regel-Liste und D07 Detail. |
| Actions | Action-Liste und D08 Mapping. |
| Sharing | URL, QR, iFrame; Draft-Hinweis. |
| Preview | Vorschau von S04, kein PDF. |
| Settings | Slug, Success, Redirect, Branding, Limits. |
## 8. D07 Logic Regel Detail
Ziel: Eine einzelne Logic-Regel bauen.
Subframe-Zustand:
```text
Logic Mode
Left/Top: Regel-Liste
Detailpanel: D07 Logic Regel Detail
```
Inhalt:
- Regelname
- Wenn-Feld
- Operator
- Wert
- Dann-Aktion: anzeigen / verstecken
- Zielfeld
- Aktiv Switch
- Test / Save
- Inline `message` bei Fehler
Wichtig:
- `Neue Regel` oeffnet kein Modal.
- Operator steuert, ob Wert gebraucht wird.
- Wenn Operator `ist leer`, verschwindet das Wertfeld.
- Unvollstaendige aktive Regel blockiert Publish.
## 9. D08 Action Detail mit Mapping
Ziel: Nach Submit festlegen, was passieren soll.
Subframe-Zustand:
```text
Actions Mode
Action-Liste
Add Action Popover
Detailpanel: D08 Action Detail mit Mapping
```
Inhalt:
- Action-Typ
- Action-Name
- Status aktiv/inaktiv
- Ziel: Empfaenger, Pipeline, Webhook URL usw.
- Field-Mapping Tabelle: Ziel-Feld -> Form-Feld
- Pflichtmapping
- Teststatus
- Save / Test / Delete
Wichtig:
- Add Action oeffnet Popover/Auswahlpanel, kein grosses Modal.
- Mapping ist der Kern.
- Aktive Action ohne Pflichtmapping blockiert Publish.
- Inaktive unvollstaendige Action darf als Draft bleiben.
## 10. D09 Publish Blocker Summary
Ziel: Mitarbeiter versteht, warum Publish nicht geht.
Subframe-Zustand:
```text
ADV-S01 Header
Publish Button
ADV-S01 Body
D09 Summary Banner
Blocker-Liste mit Sprungzielen
```
Blocker:
- Formularname fehlt
- Slug fehlt oder Konflikt
- Kein sichtbares Feld
- Feld ohne Label
- Select ohne Optionen
- Kaputte Logic
- Pflichtmapping fehlt
- Webhook URL ungueltig
Wichtig:
- Publish bleibt im Builder, kein Wizard.
- Jeder Blocker hat ein Sprungziel.
- Warnungen duerfen getrennt von Blockern angezeigt werden.
## 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 D07/D08/D09 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
80. S01B Gefuehrter Fragen Editor
81. S01C Website Formular Editor
82. S01D Umfrage Editor
83. S01E Internes Formular Editor
90. ADV-S01 Form-Builder Canvas
90b. ADV-S01-2 Form-Builder Canvas 2
91. D07 Logic Regel Detail
92. D08 Action Detail mit Mapping
93. D09 Publish Blocker Summary
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.
@@ -0,0 +1,106 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V01
screen: Public Erfolg oder Redirect
typ: Public Feedback
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/{tenant}/{slug}
subframe: "https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit"
---
# V01 - Public Erfolg oder Redirect
## Ziel
Der Submitter versteht sicher, dass die Einreichung angekommen ist, oder wird sauber an ein konfiguriertes Redirect-Ziel weitergeleitet.
## Pattern / Archetyp
BESPOKE-Public Feedback.
## Daten
- Tenant-Logo/Fallback.
- Erfolgstitel.
- Erfolgstext aus Form-Konfiguration.
- Optionales Redirect-Ziel.
- Optionaler Link zur Website/zurueck.
## Detail-Brainstorming
Der wichtigste Punkt: Nach erfolgreichem Submit darf nichts so wirken, als sei die Anfrage unsicher oder verloren. Duch wenn Actions im Hintergrund fehlschlagen, bleibt die Public-Bestaetigung auf die gespeicherte Einreichung bezogen.
### Varianten
| Variante | Wann | UI |
|---|---|---|
| Success ohne Redirect | Kein Redirect konfiguriert. | Danke-Ansicht mit Erfolgstitel, Text und optionalem Zurueck-Link. |
| Success mit Auto-Redirect | Redirect URL konfiguriert. | Kurze Bestaetigung + Countdown/Weiterleitungshinweis. |
| Success mit manuellem Redirect | Auto-Redirect wird nicht sofort ausgefuehrt oder soll bestaetigt werden. | Button "Weiter" zur Zielseite. |
| Redirect fehlerhaft | Weiterleitung klappt nicht, Submission ist aber gespeichert. | Erfolg bleibt sichtbar; Link erneut oeffnen oder Anbieter kontaktieren. |
### Copy-Vorschlag
| Zustand | Copy-Richtung |
|---|---|
| Erfolg | "Danke, Ihre Dngaben wurden uebermittelt." |
| Naechster Schritt | "Wir melden uns, falls weitere Informationen benoetigt werden." |
| Redirect | "Sie werden gleich weitergeleitet." |
| Redirect-Fehler | "Ihre Dngaben sind angekommen. Die Weiterleitung konnte nicht geoeffnet werden." |
### Nicht zeigen
- Keine Action-Ausfuehrung.
- Kein Lead-/Projekt-/Task-Hinweis.
- Kein Webhook-/Automation-Status.
- Keine interne Submission-ID, ausser spaeter bewusst als Referenznummer geplant.
## Aktionen
- Bei Success ohne Redirect: Seite schliessen oder zur Website zurueck.
- Bei Redirect: automatisch oder per Button weiter.
## Banner / Hinweise
- Kein technischer ActionLog im Public UI.
- Keine internen Begriffe wie Lead, Projekt, Webhook oder Automation.
## Toasts / Action-Feedback
- Keine Toasts; Success-State ist die Rueckmeldung.
## Meldungsentscheidung
| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz |
|---|---|---|---|---|
| Submit erfolgreich | Success-State | nein | Bauen | Anfrage ist angekommen. |
| Redirect konfiguriert | Success + Weiterleitung | nein | Bauen | Falls Redirect dauert, klare Zwischenmeldung. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Erfolgstext | Danke-/Bestaetigungsansicht. | Bauen |
| Redirect | Nutzer wird weitergeleitet. | Bauen |
## Blockierende Error States
| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion |
|---|---|---|---|
| Redirect-Ziel nicht erreichbar | Kurzer Fehler nach Submit, Einreichung bleibt erfolgreich. | Link erneut oeffnen | Anbieter kontaktieren |
## Permissions / Gates
- Keine Rolle.
## Subframe
https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit
## Notizen
Wichtig: Wenn Submit gespeichert wurde, darf ein kaputter Redirect nicht so wirken, als sei die Einreichung verloren.
@@ -0,0 +1,115 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V02
screen: Public Formular nicht verfuegbar
typ: Public Blocker
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/{tenant}/{slug}
subframe: "https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit"
---
# V02 - Public Formular nicht verfuegbar
## Ziel
Externe Nutzer landen nicht auf einem rohen 404/500, sondern bekommen eine ruhige, verstaendliche Meldung mit naechster Handlung.
## Pattern / Archetyp
BESPOKE-Public Blocker / A7 Public Error.
## Daten
- Tenant-Logo/Fallback, falls Tenant noch aufloesbar ist.
- Kurzer Titel.
- Klartext-Grund, soweit sicher:
- Formular nicht veroeffentlicht
- Formular archiviert
- Formular geschlossen
- Link ungueltig
- Optionaler Kontakt-/Website-Link.
## Detail-Brainstorming
Dieser Zustand ersetzt rohe Fehlerseiten. Der Nutzer ist blockiert, deshalb braucht er eine ruhige Erklaerung und eine naechste Handlung.
### Blocker-Typen
| Zustand | Interner Grund | Public-Copy-Richtung | Primaeraktion |
|---|---|---|---|
| Nicht veroeffentlicht | `status=draft` oder `is_public=false` | "Dieses Formular ist aktuell nicht verfuegbar." | Anbieter kontaktieren oder zurueck |
| Drchiviert | `status=archived` | "Dieses Formular ist nicht mehr aktiv." | Anbieter kontaktieren |
| Geschlossen | `submission_close_at` vorbei | "Der Dnnahmezeitraum ist beendet." | Anbieter kontaktieren |
| Limit erreicht | `submission_limit` erreicht | "Dieses Formular nimmt aktuell keine weiteren Einreichungen an." | Anbieter kontaktieren |
| Link ungueltig | Tenant/Slug nicht gefunden | "Der Link ist ungueltig oder nicht mehr aktuell." | Link pruefen / Anbieter kontaktieren |
| Tenant nicht aufloesbar | Tenant fehlt/gesperrt | Neutraler Fehler ohne interne Details. | Zurueck |
### Was David zeigen sollte
| Element | Notiz |
|---|---|
| Logo/Fallback | Nur wenn sicher, dass Tenant aufloesbar ist. |
| Titel | Kurz, nicht alarmistisch. |
| Klartext | Kein 404, kein Stacktrace, keine internen IDs. |
| Kontakt/Zurueck | Nur wenn bekannt/konfiguriert. |
| Erneut laden | Nur bei potentiell temporaeren Fehlern. |
### Nicht zeigen
- Kein interner Form-Name, wenn Link/Tenant unsicher ist.
- Keine technischen Statuscodes.
- Keine Aussage, ob ein bestimmter Kunde/Tenant existiert, falls das Datenschutz-/Security-riskant ist.
## Aktionen
- Zur Anbieter-Website zurueck.
- Anbieter kontaktieren.
- Erneut laden.
## Banner / Hinweise
- Keine technischen Details.
- Keine Aussage, die interne Form-Namen oder IDs leakt.
## Toasts / Action-Feedback
- Keine Toasts.
## Meldungsentscheidung
| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz |
|---|---|---|---|---|
| Formular nicht veroeffentlicht | Screen | ja | Bauen | Dieses Formular ist aktuell nicht verfuegbar. |
| Formular geschlossen | Screen | ja | Bauen | Dnnahmezeitraum ist beendet. |
| Formular nicht gefunden | Screen | ja | Bauen | Link pruefen oder Anbieter kontaktieren. |
| Tenant nicht aufloesbar | Screen | ja | Bauen | Neutral, ohne interne Details. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Nicht veroeffentlicht | Entwurf/Unpublished. | Bauen |
| Drchiviert/geschlossen | Keine Einreichung mehr moeglich. | Bauen |
| Nicht gefunden | Slug/Tenant passt nicht. | Bauen |
## Blockierende Error States
| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion |
|---|---|---|---|
| Nicht verfuegbar | Ruhiger Public-Blocker. | Anbieter kontaktieren | Zurueck |
## Permissions / Gates
- Public Gate: `status=published` und `is_public=true`.
## Subframe
https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit
## Notizen
Dieser Zustand ist wichtig fuer Vertrauen. Ein externes Formular darf nicht wie eine kaputte App wirken.
@@ -0,0 +1,117 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
id: V03
screen: Public Captcha oder Submit Fehler
typ: Public Error
umsetzung: Bauen
status: Subframe Draft / Review offen
route: /f/{tenant}/{slug}
subframe: "https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit"
---
# V03 - Public Captcha oder Submit Fehler
## Ziel
Der Submitter kann einen Captcha- oder Submit-Fehler verstehen und korrigieren, ohne Vertrauen in das Formular zu verlieren.
## Pattern / Archetyp
BESPOKE-Public Error / A7 Error-State.
## Daten
- Aktuelle Feldwerte sollen erhalten bleiben, soweit technisch moeglich.
- Captcha-Status.
- Dllgemeiner Submit-Status.
## Detail-Brainstorming
V03 ist kein eigener neuer Flow, sondern ein Public-Fehlerzustand von S02. Er wird gebaut, weil die Copy und das Vertrauen wichtig sind.
### Fehlerarten
| Fehler | Ort | UI | Werte behalten? |
|---|---|---|---|
| Captcha fehlt | Captcha-Bereich | Inline-Hinweis | ja |
| Captcha fehlgeschlagen | Captcha-Bereich oder Banner nah am Submit | Erneut pruefen | ja |
| Netzwerkfehler | Submit-Bereich | Banner + Retry | ja |
| Serverfehler vor Speicherung | Submit-Bereich | Banner + Retry | ja |
| Serverfehler nach Speicherung | Success bevorzugen, falls Speicherung sicher war | Nicht als Verlust darstellen | ja |
| Datei-Upload fehlgeschlagen | Datei-Feld | Inline + Datei erneut waehlen | andere Werte ja |
### Copy-Richtung
| Zustand | Copy |
|---|---|
| Captcha fehlt | "Bitte bestaetigen Sie die Sicherheitspruefung." |
| Captcha fehlgeschlagen | "Die Sicherheitspruefung konnte nicht bestaetigt werden. Bitte versuchen Sie es erneut." |
| Submit Fehler | "Das Formular konnte gerade nicht gesendet werden. Bitte versuchen Sie es erneut." |
| Wiederholter Fehler | "Wenn der Fehler bestehen bleibt, kontaktieren Sie bitte den Anbieter." |
| Datei-Fehler | "Diese Datei konnte nicht hochgeladen werden. Bitte pruefen Sie Typ und Groesse." |
### Retry-Regeln
| Regel | Grund |
|---|---|
| Eingaben erhalten | Lange Public-Formulare duerfen nicht neu ausgefuellt werden muessen. |
| Submit waehrend Retry sperren | Doppel-Submit verhindern. |
| Ersten Fehler sichtbar machen | Nutzer soll nicht suchen muessen. |
| Technische Details verstecken | Vertrauen bewahren. |
| Kontakt nur als Fallback | Nicht sofort vom Formular wegschicken. |
## Aktionen
- Captcha erneut bestaetigen.
- Formular erneut senden.
- Seite neu laden.
- Anbieter kontaktieren, falls Fehler bleibt.
## Banner / Hinweise
- Captcha-Fehler in der Naehe des Captcha-Bereichs.
- Submit-Fehler als Banner oberhalb des Submit-Bereichs.
- Keine internen Begriffe wie ActionLog, Webhook, DB oder Queue.
## Toasts / Action-Feedback
- Keine Toasts im Public UI.
## Meldungsentscheidung
| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz |
|---|---|---|---|---|
| Captcha fehlt | Inline beim Captcha | ja | Bauen | Bitte bestaetigen, dass Sie kein automatisierter Zugriff sind. |
| Captcha fehlgeschlagen | Inline/Banner | ja | Bauen | Bitte erneut versuchen. |
| Netzwerkfehler beim Submit | Banner | ja | Bauen | Einreichung konnte nicht gesendet werden. |
| Serverfehler nach Submit | Banner | ja | Bauen | Keine technischen Details, erneut versuchen. |
## Zustaende
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Captcha Error | Bot-Schutz blockiert. | Bauen |
| Submit Error | Speicherung/Einreichung klappt nicht. | Bauen |
| Retry Loading | Nutzer sendet erneut. | Wiederverwenden |
## Blockierende Error States
| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion |
|---|---|---|---|
| Captcha fehlgeschlagen | Fehler am Captcha. | Captcha erneut pruefen | - |
| Submit mehrfach fehlgeschlagen | Banner mit Hilfehinweis. | Erneut versuchen | Anbieter kontaktieren |
## Permissions / Gates
- Public. Kein Login.
## Subframe
https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit
## Notizen
Wenn moeglich, sollen eingegebene Antworten erhalten bleiben. Das ist besonders wichtig bei langen SHK-Dufnahmeformularen mit Fotos oder Text.
@@ -0,0 +1,87 @@
{
"nodes":[
{"id":"group-states","type":"group","x":-120,"y":220,"width":4340,"height":680,"label":"Dokumentierte ADV-S01-Zustaende / Was-passiert-wenn-Cases"},
{"id":"group-internal","type":"group","x":-120,"y":-520,"width":3100,"height":600,"label":"S01 Interner Builder Hauptflow"},
{"id":"group-public","type":"group","x":-120,"y":1060,"width":2460,"height":620,"label":"Public Form Flow"},
{"id":"group-simple","type":"group","x":-120,"y":1840,"width":4380,"height":1120,"label":"Neue Simple Builder Alternative"},
{"id":"group-notes","type":"group","x":3220,"y":-520,"width":1000,"height":600,"label":"Scope / Subframe-Fokus"},
{"id":"package","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md","x":0,"y":-350,"width":420,"height":210},
{"id":"s01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md","x":620,"y":-350,"width":420,"height":210},
{"id":"d10","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md","x":1860,"y":-350,"width":460,"height":210},
{"id":"note-subframe-focus","type":"text","text":"# Subframe-Fokus\n\nAktueller Hauptfluss:\n- 01 S00 Verwaltung\n- 02/03 Empty States\n- 04 S01 Formularart\n- 05 S02 Haupt-Editor\n- 06 S03 Design\n- 07-10 Public Form/States\n- 11-13 Antworten/States\n\n80-93 bleiben spaeter/Referenz.\n\nM01/M02/M03/M04 und D10 bleiben dokumentiert.","x":3360,"y":-360,"width":720,"height":330},
{"id":"note-out-of-scope","type":"text","text":"# Nicht in D-FORM\n\n- Vollstaendige Submissions-Verwaltung\n- Submission-Detail\n- Booking\n- Kalender\n- Signatur\n- HR-Screens\n- Personalisierte Links\n- JS-Snippet\n\nS03 ist nur die schlanke Formular-Zentrale, nicht das ganze Forms-/Submissions-Modul.","x":3360,"y":-20,"width":720,"height":300},
{"id":"d01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md","x":0,"y":360,"width":420,"height":190},
{"id":"note-states","type":"text","text":"# ADV-S01-Zustaende\n\nD07, D08 und D09 sind als zusaetzliche Subframe-Zustaende gebaut.\n\nDie restlichen D-/M-Zustaende bleiben dokumentiert.\n\nSie klaeren:\n- welche UI-Ebene oeffnet\n- was im Dropdown/Popover/Modal steht\n- welche Folgefehler entstehen\n- was Publish/Test blockiert","x":3120,"y":330,"width":540,"height":260},
{"id":"note-builder-core","type":"text","text":"# Builder-Kern\n\nDauerhaft sichtbar:\n- Header / Status\n- Feld-Palette\n- Canvas\n- Feld-Inspector\n\nArbeitsmodi:\n- Logic\n- Actions\n- Sharing\n- Preview\n- Settings","x":1240,"y":-365,"width":420,"height":260},
{"id":"d02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md","x":520,"y":360,"width":420,"height":190},
{"id":"d03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md","x":1040,"y":360,"width":420,"height":190},
{"id":"d06","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md","x":1560,"y":360,"width":420,"height":190},
{"id":"m01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md","x":2080,"y":360,"width":420,"height":190},
{"id":"d07","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md","x":1040,"y":620,"width":420,"height":190},
{"id":"d08","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md","x":520,"y":620,"width":420,"height":190},
{"id":"d09","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md","x":2600,"y":360,"width":420,"height":190},
{"id":"m02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md","x":2600,"y":620,"width":420,"height":190},
{"id":"m03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md","x":3120,"y":620,"width":420,"height":190},
{"id":"m04","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md","x":3640,"y":620,"width":420,"height":190},
{"id":"s02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md","x":0,"y":1250,"width":420,"height":210},
{"id":"v01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md","x":620,"y":1120,"width":420,"height":210},
{"id":"v02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md","x":620,"y":1410,"width":420,"height":210},
{"id":"v03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md","x":1240,"y":1410,"width":420,"height":210},
{"id":"note-public","type":"text","text":"# Public-Regel\n\nKeine App-Shell.\n\nRuhiges Kundenformular:\n- Branding-Kopf\n- Intro\n- Felder\n- mCaptcha\n- Submit\n- Success/Error\n\nMobile zuerst mitdenken.","x":1240,"y":1120,"width":420,"height":250},
{"id":"note-public-reuse","type":"text","text":"# Public Renderer\n\nD-FORM baut das Public Form.\n\nDndere Bereiche wie HR oder Booking koennen den Renderer spaeter wiederverwenden, sind aber keine D-FORM-Screens.","x":1800,"y":1230,"width":420,"height":240},
{"id":"simple-direction","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Simple Builder Neuausrichtung.md","x":0,"y":1990,"width":420,"height":190},
{"id":"s00","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md","x":560,"y":1990,"width":420,"height":190},
{"id":"s01a","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md","x":1120,"y":1900,"width":420,"height":190},
{"id":"s01b","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md","x":1120,"y":2120,"width":420,"height":190},
{"id":"s01c","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md","x":1680,"y":1840,"width":420,"height":190},
{"id":"s01d","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md","x":1680,"y":2060,"width":420,"height":190},
{"id":"s01e","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md","x":1680,"y":2280,"width":420,"height":190},
{"id":"note-simple-builder","type":"text","text":"# Neue Richtung gebaut\n\nNicht mehr sofort Profi-Canvas.\n\nS00 ist die Formular-Zentrale.\nS01 fuehrt immer in S02.\n\nDie Formularart setzt nur Vorlage/Startfragen:\n- Website/Extern\n- Lead\n- Umfrage\n- Intern\n\nTabs im Formular:\n- Fragen\n- Design: S03\n- Antworten: S05\n\nS01B/C/D/E sind Referenz.\n\nLogic bleibt als einfache Bedingung an der Frage.\nActions bleiben als Lead-Hinweis/Automatik.","x":2320,"y":1990,"width":620,"height":420},
{"id":"s03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md","x":560,"y":2470,"width":420,"height":190},
{"id":"s04","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md","x":2320,"y":2440,"width":420,"height":190},
{"id":"s05","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md","x":2840,"y":2440,"width":420,"height":190}
],
"edges":[
{"id":"edge-package-s01","fromNode":"package","fromSide":"right","toNode":"s01","toSide":"left","label":"S01"},
{"id":"edge-s01-core","fromNode":"s01","fromSide":"right","toNode":"note-builder-core","toSide":"left","label":"Arbeitsbereiche"},
{"id":"edge-core-d10","fromNode":"note-builder-core","fromSide":"right","toNode":"d10","toSide":"left","label":"Was passiert wenn"},
{"id":"edge-s01-d01","fromNode":"s01","fromSide":"bottom","toNode":"d01","toSide":"top","label":"Share"},
{"id":"edge-s01-d02","fromNode":"s01","fromSide":"bottom","toNode":"d02","toSide":"top","label":"Actions"},
{"id":"edge-s01-d03","fromNode":"s01","fromSide":"bottom","toNode":"d03","toSide":"top","label":"Logic"},
{"id":"edge-s01-d06","fromNode":"s01","fromSide":"bottom","toNode":"d06","toSide":"top","label":"Feldmenue"},
{"id":"edge-d06-m01","fromNode":"d06","fromSide":"right","toNode":"m01","toSide":"left","label":"loeschen"},
{"id":"edge-d03-d07","fromNode":"d03","fromSide":"bottom","toNode":"d07","toSide":"top","label":"Regel Detail"},
{"id":"edge-d02-d08","fromNode":"d02","fromSide":"bottom","toNode":"d08","toSide":"top","label":"Action Detail"},
{"id":"edge-s01-d09","fromNode":"s01","fromSide":"bottom","toNode":"d09","toSide":"top","label":"Publish"},
{"id":"edge-d09-m02","fromNode":"d09","fromSide":"bottom","toNode":"m02","toSide":"top","label":"Unpublish"},
{"id":"edge-s01-m03","fromNode":"s01","fromSide":"bottom","toNode":"m03","toSide":"top","label":"Archive"},
{"id":"edge-s01-m04","fromNode":"s01","fromSide":"bottom","toNode":"m04","toSide":"top","label":"Dirty State"},
{"id":"edge-d10-d07","fromNode":"d10","fromSide":"bottom","toNode":"d07","toSide":"top","label":"Logic Cases"},
{"id":"edge-d10-d08","fromNode":"d10","fromSide":"bottom","toNode":"d08","toSide":"top","label":"Mapping Cases"},
{"id":"edge-d10-d09","fromNode":"d10","fromSide":"bottom","toNode":"d09","toSide":"top","label":"Blocker Cases"},
{"id":"edge-s01-s02","fromNode":"s01","fromSide":"bottom","toNode":"s02","toSide":"top","label":"publish + share"},
{"id":"edge-s02-v01","fromNode":"s02","fromSide":"right","toNode":"v01","toSide":"left","label":"Submit ok"},
{"id":"edge-s02-v02","fromNode":"s02","fromSide":"right","toNode":"v02","toSide":"left","label":"nicht verfuegbar"},
{"id":"edge-s02-v03","fromNode":"s02","fromSide":"right","toNode":"v03","toSide":"left","label":"Fehler"},
{"id":"edge-s02-public","fromNode":"s02","fromSide":"right","toNode":"note-public","toSide":"left","label":"Public-UX"},
{"id":"edge-public-reuse","fromNode":"note-public","fromSide":"right","toNode":"note-public-reuse","toSide":"left","label":"Reuse"},
{"id":"edge-focus-out","fromNode":"note-subframe-focus","fromSide":"bottom","toNode":"note-out-of-scope","toSide":"top","label":"Grenzen"},
{"id":"edge-package-simple","fromNode":"package","fromSide":"bottom","toNode":"simple-direction","toSide":"top","label":"neue Richtung"},
{"id":"edge-simple-s00","fromNode":"simple-direction","fromSide":"right","toNode":"s00","toSide":"left","label":"Einstieg"},
{"id":"edge-s00-s01a","fromNode":"s00","fromSide":"right","toNode":"s01a","toSide":"left","label":"Variante D"},
{"id":"edge-s00-s01b","fromNode":"s00","fromSide":"right","toNode":"s01b","toSide":"left","label":"Variante B"},
{"id":"edge-s00-s01c","fromNode":"s00","fromSide":"right","toNode":"s01c","toSide":"left","label":"Website"},
{"id":"edge-s00-s01d","fromNode":"s00","fromSide":"right","toNode":"s01d","toSide":"left","label":"Umfrage"},
{"id":"edge-s00-s01e","fromNode":"s00","fromSide":"right","toNode":"s01e","toSide":"left","label":"Intern"},
{"id":"edge-simple-s03","fromNode":"simple-direction","fromSide":"right","toNode":"s03","toSide":"left","label":"Verwaltung"},
{"id":"edge-s03-s00","fromNode":"s03","fromSide":"top","toNode":"s00","toSide":"bottom","label":"Neues Formular"},
{"id":"edge-s03-s01a","fromNode":"s03","fromSide":"right","toNode":"s01a","toSide":"bottom","label":"Bearbeiten"},
{"id":"edge-s01a-s04","fromNode":"s01a","fromSide":"right","toNode":"s04","toSide":"left","label":"Design"},
{"id":"edge-s01a-s05","fromNode":"s01a","fromSide":"right","toNode":"s05","toSide":"left","label":"Antworten"},
{"id":"edge-s01a-note","fromNode":"s01a","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Prinzip"},
{"id":"edge-s01b-note","fromNode":"s01b","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Prinzip"},
{"id":"edge-s01c-note","fromNode":"s01c","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"},
{"id":"edge-s01d-note","fromNode":"s01d","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"},
{"id":"edge-s01e-note","fromNode":"s01e","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"}
]
}
@@ -0,0 +1,571 @@
---
kind: wireframe-package
project: HiveGrid Screen Project
ticket: D-FORM
package: WF-D-FORM Form Builder
typ: Flow
status: Review-ready / Subframe Draft gebaut
subframe: "https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad"
canvas: "02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas"
---
# WF-D-FORM Form Builder
Status: Review-ready fuer David / Subframe Draft gebaut
Subframe-Link: https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad
Canvas: [[WF-D-FORM Form Builder.canvas]]
David-Review: [[David Review Checkliste]]
Subframe-Bauplan: [[Subframe Bauplan]]
Subframe-Bau-Log: [[Subframe Bau Log]]
Simple Builder: [[Simple Builder Neuausrichtung]]
Stand: 2026-07-09
Uebergabe: [[D-FORM David Uebergabe 2026-07-09]]
Start fuer Review: [[00 Start hier - David]]
---
## 1. Kurzfassung
Dieses Paket bereitet `D-FORM` fuer David vor: den internen Form-Builder-Canvas und das oeffentliche Formular.
Der Fokus liegt bewusst auf den zwei Bespoke-Erlebnissen:
- Form-Builder-Canvas fuer interne Nutzer
- Oeffentliches Formular fuer externe Submitter
Fuer den eigentlichen Subframe-Bau gilt [[Subframe Bauplan]] als konkrete Bau-Reihenfolge und Komponenten-Zuordnung. Interne Builder-Screens wie S01/D07/D08/D09 nutzen das vorhandene Default Page Layout; keine eigene Sidebar oder Header-Navigation nachbauen. Public-Screens bleiben ohne App-Shell.
Die vollstaendige Forms-/Submissions-Verwaltung, Booking, Kalender und Signatur werden nicht in diesem Paket gebaut. Als schlanker Einstieg wurde aber S00 `Formulare verwalten` ergaenzt, damit Nutzer vorhandene Formulare finden und in den Builder springen koennen.
**Wichtig:** Dieses Paket ist jetzt ein tragfaehiger Detail-Brainstorming-Entwurf fuer David. Davids Review vom 2026-07-06 hat den fachlichen Scope bestaetigt, aber fuer den Builder mehr Interaktionslogik verlangt. Diese "was passiert nach Klick?"-Ebene ist im Advanced-Builder nachgezogen. D-FORM ist in Subframe als Draft gebaut: S00 bis S05, die Public-Screens S04/V01/V02/V03 sowie D07 Logic Regel Detail, D08 Action Detail mit Mapping und D09 Publish Blocker Summary sind gebaut.
Vor einer echten Fertig-Markierung muss David die Subframe-Frames final reviewen. Danach koennen nur noch gezielte Korrekturen oder explizit nachgeforderte Zustands-/Modalframes folgen.
**Nachtrag 2026-07-07:** Fuer Handwerksbetriebe wirkt der bisherige S01 fachlich stark, aber zu komplex. Deshalb wurden einfachere Alternativen gebaut: zuerst [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] als Startseite, danach [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] und Google-Forms-artige Beispiel-Editoren je Formularart. Gebaute Varianten: [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]], [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]], [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]], [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]] und [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]]. Ergaenzt wurden ausserdem [[Screens/06 S03 Formular Design|S03 Formular Design]] und [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]]. Die bisherige Logic bleibt im Hintergrund erhalten, aber der Einstieg soll nicht mehr wie ein Profi-Builder wirken.
**Nachtrag 2026-07-08:** Die Simple-Builder-Richtung wurde nachgeschaerft: S00 nutzt Mehrfachfilter nach Status und Art, S02 hat mehrere editierbare Optionen und eine erweiterte Google-Forms-nahe Werkzeugleiste, S04 enthaelt eine Datenschutz-Checkbox, S03/S05 haben keinen eigenen Teilen-Tab mehr und S05 dient nur Antworten/Export.
**Nachtrag Lead-Zuweisung 2026-07-08:** David hat ergaenzt, dass Lead-Formulare einen sichtbaren Bereich `Felder zuweisen` brauchen. Deshalb bleibt S02 der einfache Haupteditor, bekommt aber den neuen Zustand [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]]. Wenn eine Zuweisung fehlt oder nicht moeglich ist, greift optional [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]]. Logic und Actions kommen damit in den Screen: `Bedingung` an der Frage, `Nach Absenden / Lead anlegen` als Card mit Dropdown-Zuweisung.
**Nachtrag 2026-07-09:** Fuer Davids Review wurde ein kompletter Obsidian-faehiger Paketordner vorbereitet. Die aktuelle Uebergabe liegt in [[D-FORM David Uebergabe 2026-07-09]]. Die S02/S02L-Lead-Hinweise sind optisch an die gruene `Lead anlegen`-Card angeglichen: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts.
---
## 2. Intent Check
| Frage | Antwort |
|---|---|
| Welches Ticket/Modul ist betroffen? | `D-FORM` / P16 / M05 Form Builder |
| Was soll der Nutzer am Ende schaffen? | Interne Nutzer bauen und veroeffentlichen Formulare; externe Nutzer reichen ein Formular sauber ein. |
| Ist es ein Flow, einzelner Screen, Zustand oder nur Dokumentation? | Bespoke-Flow mit zwei Hauptscreens und wenigen Public-Varianten. |
| Welche Planning-Quellen wurden geprueft? | `D-FORM.md`, `P16-kalender-booking-forms-signatur.md`, `M05-form-builder.md`, `ENTITY-MODEL.md` Domaene 9, `SCREEN-MAP.md` Paragraph 3, `DESIGNER-FIRST-PLAYBOOK.md` Rang 2, `ROADMAP.md` Phase 16. |
| Was ist sicher im Scope? | Drag-and-Drop-Builder, 12 Feldtypen, Conditional Logic, Field-Config, Live-Vorschau, Publish, URL/QR/iFrame-Sharing, Post-Submit-Actions, Public Form mit mCaptcha und 4 Zustaenden. |
| Was ist sicher nicht im Scope? | Booking-Page, Kalender, vollstaendige Submissions-Liste, Signatur-Wizard, personalisierte Links, JS-Snippet, Multi-Step-Forms, Repeater, A/B-Testing. S00 ist nur die schlanke Formular-Zentrale, nicht das komplette Submissions-Modul. |
| Gibt es Admin/Normalrolle-Unterschiede? | Ja: Builder/Publisher/Admin duerfen bauen und publishen; einfache Nutzer sehen ggf. nur Submission-/Basic-Rechte. |
| Welche Annahmen sind noch unsicher? | Ob David einzelne dokumentierte Zustands-/Modalframes aus S01 zusaetzlich in Subframe sehen will. |
---
## 3. Scope
| Punkt | Inhalt |
|---|---|
| Ticket/Modul | `D-FORM` / M05 Form Builder |
| Nutzerrolle | Interner Builder/Publisher/Admin; externer Submitter im Public Form. |
| Admin-Variante | Darf Form konfigurieren, Actions anlegen, publishen, Sharing nutzen. |
| Normale Rolle | Kann je nach Permission eventuell Formular bearbeiten oder nur Submissions sehen; Submissions sind nicht Teil dieses Pakets. |
| Startpunkt | Intern: `/forms/:id/edit`; Public: `/f/{tenant}/{slug}` |
| Ziel | Formulare robust bauen, veroeffentlichen und extern einreichbar machen. |
| Haupt-Archetyp | A4 Form/Input-Kit + A7 Zustands-Kit |
| Bespoke-Anteil | Sehr hoch: Canvas, Drag-and-Drop, Conditional Logic, Live Preview, Public Renderer. |
| Out of scope | Booking/Kalender/Signatur, Submission-Detail, personalisierte Links/JS-Snippet, komplexe v2-Logic. |
---
## 3a. Detailausbau vor Fertig
Diese Punkte fehlen noch, bevor D-FORM wirklich als fertig vorbereitet gelten sollte:
| Bereich | Was noch auszuarbeiten ist | Warum wichtig |
|---|---|---|
| Builder-Layout | Entscheidung fuer Canvas-Aufbau: Drei-Spalten, Tabs, Drawer, Preview-Mode, Mobile/Small-Viewport-Verhalten. | Der Builder ist die schwerste UI im Ticket. |
| Drag-and-Drop | Empty Dropzone, Drag Preview, Reorder, Drop zwischen Feldern, Feld-Auswahl, Undo/Cancel-Gefuehl. | Sonst bleibt der Canvas zu abstrakt. |
| Feldtypen | Properties je Feldtyp, Sonderfaelle fuer Datei/Foto, Datum/Datum-Range, Select/Multi-Select, Boolean. | David braucht konkrete Inspector-Inhalte. |
| Validation | Required, min/max, Regex, Datei-Typen/Groesse, Custom Error, Publish-Blocker. | Das Ticket verlangt Klartext-Validation. |
| Conditional Logic | Regel-Liste, Regel-Editor, kaputte Referenzen, Vorschau/Test, Limits fuer v1. | Pflicht laut Ticket, aber UX-riskant. |
| Form-Stammdaten | Name, Beschreibung, Slug, Status, Subtype, Success Message, Redirect, Close/Limit. | M05-Datenmodell ist groesser als nur Felder. |
| Templates | SHK-Templates sichtbar machen oder bewusst nur als Forms-Liste/Seed dokumentieren. | Ticket nennt geseedete Templates. |
| Publish / Unpublish | Publish-Flow, Blocker, Warnungen bei bereits oeffentlichem Formular, Unpublish-Folge. | Kritischer Arbeitsmoment fuer interne Nutzer. |
| Sharing / Embed | URL, QR, iFrame-Code, Copy-Feedback, Allowed Origins, v2-Abgrenzung JS-Snippet/personalisierte Links. | Public-Verteilung ist Teil von D-FORM. |
| Post-Submit-Actions | Action-Typen, Reihenfolge, Mapping-Zeilen, Pflichtmapping, Test/Preview, einfache Filter. | Sehr grosser Komplex im Builder. |
| Public Form | 4 Public-Zustaende, Mobile, mCaptcha, Datei-Upload, Success/Redirect, nicht verfuegbar. | Oeffentliche Screens brauchen hohen Polish. |
| Permissions | Builder, Publisher, Admin, Read-only/No-Permission-Zustand. | D-FORM hat eigene Permission-Bundles. |
| Abgrenzung | Was bleibt in D-FORM, was gehoert zu Submissions, Forms-Liste, D-BOOK, D-REST oder v2. | Verhindert Scope-Explosion. |
Empfehlung fuer die naechste Arbeitseinheit: David validiert die nachgezogene S01-Interaktionslogik. Danach kann Subframe-Bau oder letzte Korrektur erfolgen.
---
## 3b. SCREEN-MAP-Abgleich
Die `SCREEN-MAP.md` enthaelt deutlich mehr Screens, aber sie ist die Gesamt-Bauliste fuer HiveGrid v1. Fuer `D-FORM` zaehlen daraus nur die Form-Builder-bezogenen Zeilen.
| SCREEN-MAP-Screen | Gehoert zu D-FORM? | Umgang |
|---|---|---|
| Form-Builder-Canvas `/forms/:id/edit` | ja | In diesem Paket als S01 ausarbeiten. |
| Oeffentliches Formular `/f/{tenant}/{slug}` | ja | In diesem Paket als S04 plus Public-Varianten ausarbeiten. |
| Submissions `/forms/:id/submissions` | nein, Forms-Compose | Nicht D-FORM-Bespoke; spaeter eigenes Compose-/Submissions-Paket. |
| Forms-Liste `/forms` | teilweise | S00 als schlanke Formular-Zentrale im D-FORM-Paket; vollstaendige Forms-/Submissions-Compose bleibt spaeter. |
| Booking-Page `/b/{tenant}/{slug}` | nein | Eigenes Ticket/Paket `D-BOOK`. |
| Booking intern / Booking-Page-Editor / Verfuegbarkeit | nein | Eigenes Booking-Paket. |
| Kalender `/calendar` | nein | Eigenes Kalender-Paket. |
| Signatur-Wizard | nein | Eigenes Signatur-/D-REST-Paket. |
| HR Urlaub/Krankmeldung, Requests, Surveys | nein | HR nutzt M05/Form-Renderer wieder, ist aber nicht D-FORM. |
| Kampagnen-Editor, Kampagnen-Liste, Segmente, Sender | nein | Email-Marketing-Paket, nicht D-FORM. |
| Pipeline-Kanban, Projekt-Liste, Projekt-Detail, Pipeline-Config | nein | Projekt/Pipeline-Paket, nicht D-FORM. |
| Plattform-Admin-Screens | nein | Plattform-Admin-Paket, nicht D-FORM. |
Merksatz: D-FORM hat wenige eigene Routen, aber einen riesigen Detailumfang innerhalb des Builder-Screens und des Public-Renderers.
---
## 3c. Detailausbau-Fortschritt
| Bereich | Stand | Naechster Schritt |
|---|---|---|
| ADV-S01 Builder-Layout | Arbeitsentwurf in ADV-S01 ergaenzt und als Subframe-Frame gebaut. | David prueft Drei-Zonen-Builder in Subframe. |
| ADV-S01 Feld-Palette | Arbeitsentwurf in ADV-S01 ergaenzt. | Entscheiden, ob Content Blocks wie Section Header in v1 sichtbar werden. |
| ADV-S01 Canvas / Drag-and-Drop | Arbeitsentwurf in ADV-S01 ergaenzt. | Drag-Zustaende ggf. in Subframe besonders sichtbar machen. |
| ADV-S01 Feld-Inspector | Arbeitsentwurf in ADV-S01 ergaenzt. | Properties je Feldtyp reviewen. |
| ADV-S01 Interaktionslogik | Nach David-Feedback ergaenzt und als Zustandsdateien ausgearbeitet. D07/D08/D09 sind als zusaetzliche Subframe-Zustaende gebaut. | David prueft die Subframe-Frames und entscheidet nur noch ueber Feinschliff oder Zusatzframes. |
| ADV-S01 Validation / Publish | Arbeitsentwurf in ADV-S01 ergaenzt und als D09 gebaut. | David prueft Blocker-Copy, Warnungen und Sprungziele. |
| ADV-S01 Conditional Logic | Arbeitsentwurf in ADV-S01 ergaenzt. | V1-Grenzen final bestaetigen. |
| ADV-S01 Sharing | Arbeitsentwurf in ADV-S01 ergaenzt. | iFrame/QR/URL-Darstellung finalisieren. |
| ADV-S01 Post-Submit-Actions | Arbeitsentwurf in ADV-S01 ergaenzt. | Action-Typen und Mapping-Tiefe final reviewen. |
| ADV-S01 Permissions | Arbeitsentwurf in ADV-S01 ergaenzt. | Read-only/No-Permission-Zustand final entscheiden. |
| S04 Public Form | Arbeitsentwurf in S04 ergaenzt. | David validiert Public Layout, Mobile, Submit und Branding. |
| V01/V02/V03 Public-Varianten | Arbeitsentwurf in Varianten ergaenzt. | David validiert Copy und Public-Fehlerlogik. |
| Canvas/Tracker/Handoff | Nach P2-Auth-Referenz synchronisiert: Hauptflow plus ADV-S01-Zustaende/Case-Matrix im Canvas sichtbar. | Vor Subframe nur noch David-Freigabe bzw. Auswahl moeglicher Zusatzframes. |
---
## 3d. David-Feedback 2026-07-06
Review-Ergebnis: Der grobe fachliche Scope ist gut. D-FORM bleibt Builder plus oeffentliches Formular. Nicht nach D-FORM gehoeren Forms-Liste, Submissions, Booking, Kalender, Signatur und HR.
Nacharbeit: In S01 fehlte die Interaktionslogik fuer konkrete Aktionen. Die wichtigsten Klicks sind jetzt entschieden:
| Bereich | Entscheidung |
|---|---|
| Feld bearbeiten | Im rechten Inspector, kein Modal. |
| Feld duplizieren | Feldkarte oder 3-Punkte-Menue; kein Confirm. |
| Feld loeschen | 3-Punkte-Menue/Gefahrenzone; Confirm bei Abhaengigkeiten oder public-wirksamen Folgen. |
| Logic-Regel anlegen | Logic-Panel/Detailbereich im selben S01, kein Modal. |
| Post-Submit-Action hinzufuegen | Typauswahl als Popover/kleines Auswahlpanel, Konfiguration im Action-Panel/Drawer. |
| Sharing oeffnen | Sharing-Panel/Modus im ADV-S01, kein Modal. |
| Publish | Inline-Check mit Summary/Popover; Blocker springen zu Feld, Logic, Action oder Settings. |
| Unpublish | Confirm-Dialog, weil Public-Link danach nicht mehr erreichbar ist. |
Bewertung: Die 5 Hauptframes bleiben bestehen. Nach Empfehlung wurden zusaetzlich D07 Logic Regel Detail, D08 Action Detail mit Mapping und D09 Publish Blocker Summary als Subframe-Zustaende gebaut. M01/M02 und die restlichen D-/M-Zustaende bleiben vorerst dokumentiert.
Nachgezogene Vor-Subframe-Dateien: [[Screens/D01 Sharing Panel URL QR iFrame]], [[Screens/D02 Post-Submit Actions]], [[Screens/D03 Conditional Logic Editor]], [[Screens/D06 Feldkarten Menue]], [[Screens/M01 Feld loeschen Confirm]], [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]], [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]], [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]], [[Screens/D10 Builder Interaktionsfaelle]], [[Screens/M02 Unpublish Confirm]], [[Screens/M03 Archive Confirm]], [[Screens/M04 Unsaved Changes Confirm]].
Nach weiterer Rueckmeldung wurde D10 als Case-Matrix ergaenzt: Was passiert, wenn Nutzer etwas auswaehlen, eine Checkbox setzen, einen mittleren Pflichtschritt vergessen, Bild/Datei hinzufuegen, Optionen loeschen, Mapping halb setzen oder eine public-wirksame Aktion ausloesen.
---
## 3e. P2-Auth-Dbgleich 2026-07-06
P2 Auth ist als Referenz fuer Reifegrad genutzt worden. Dort sind nicht nur Hauptscreens, sondern auch D-/M-Zustaende, Modal-Inhalte, Subframe-Grid, Canvas-Notizen und Handoff-Checks konsequent dokumentiert.
Nachgezogen fuer D-FORM:
| P2-Muster | D-FORM-Umsetzung |
|---|---|
| Screen-Dateien mit Ziel, Daten, Aktionen, Verhalten, Zustaenden und Subframe-Hinweis | ADV-S01/S02/S04/V01-V03 sowie D01-D10 und M01-M04 entsprechend ausgearbeitet. |
| D-/M-Zustaende als eigene Dateien, auch wenn sie nicht gebaut werden | ADV-S01-Zustaende liegen als eigene Vor-Subframe-Dateien im `Screens`-Ordner; D07/D08/D09 sind als zusaetzliche Subframe-Zustaende gebaut. |
| Canvas zeigt Hauptflow plus dokumentierte Zustaende/Notizen | `WF-D-FORM Form Builder.canvas` wurde erweitert: Hauptflow, D-/M-Zustaende, D10 Case-Matrix, Public Flow und Scope-Notizen. |
| Tracker fuehrt dokumentierte Zustaende als eigene Zeilen | Tracker enthaelt D01-D10 und M01-M04; D07/D08/D09 stehen auf `Bauen`, M01/M02/M03/M04 bleiben dokumentiert. |
Bewertung: D-FORM ist auf dem gleichen Vor-Subframe-Dokumentationsniveau wie die besser ausgearbeiteten P2 Auth Pakete. Subframe ist als Draft gebaut und verlinkt; Review und Feinschliff folgen.
---
## 4. Brainstorming
### Flow-Frage
Wie bekommt David den Builder so vorbereitet, dass er nicht in zehn Unterseiten zerfaellt, aber trotzdem alle schweren Entscheidungen sichtbar sind?
### UX-Varianten
| Option | Beschreibung | Vorteil | Nachteil | Empfehlung |
|---|---|---|---|---|
| D | Ein grosser Builder-Screen mit Palette, Canvas, Properties, Preview und Tabs/Panels fuer Sharing/Actions/Logic. | Ein Arbeitsort, weniger Navigation, passt zum Bespoke-Canvas. | Kann sehr dicht werden. | Genommen fuer v1-Draft. |
| B | Mehrere Unterseiten: Felder, Design, Logic, Sharing, Actions, Preview. | Uebersichtlicher pro Thema. | Wirkt eher Settings als Canvas; mehr Route- und Handoff-Last. | Raus fuer v1-Draft. |
| C | Minimaler Builder plus separate Modals fuer jedes Feature. | Reduziert Hauptscreen. | Modal-Kaskade wird schwer wartbar; Field-Mapping leidet. | Nur fuer einzelne Confirm-/Blocker-Zustaende. |
### Entscheidung
| Entscheidung | Status | Notiz |
|---|---|---|
| Builder als ein Hauptscreen | genommen | Die Route `/forms/:id/edit` ist der Arbeitsort. |
| Public Form als eigener Screen | genommen | Extern sichtbar, eigener Polish, eigene Zustaende. |
| Sharing in Builder integrieren | genommen | URL, QR, iFrame als Panel/Tab im Builder. |
| Post-Submit-Actions in Builder integrieren | genommen | Field-Mapping gehoert zur Form-Konfiguration, kein eigener Screen. |
| Conditional Logic in v1 eng schneiden | genommen | Nur Anzeige/Ausblenden: Wenn Feld Y = Z, zeige Feld X. |
| 12 Feldtypen nach A4 verwenden | Empfehlung genommen | Text, Textarea, Zahl, Waehrung, Datum, Datum-Range, Select, Multi-Select, Boolean, Email, Telefon, Datei. |
| Code-Stand nicht als Design-Grenze nehmen | genommen | Der vorhandene Form-Widget-Code ist kleiner als D-FORM; Design folgt Planning/D4. |
| Personalisierte Links | raus fuer v1 | Laut Ticket v2. |
| JS-Snippet | raus fuer v1 | Laut Ticket v2, iFrame bleibt. |
### Arbeitsentscheidung: 12 Feldtypen
Fuer Davids D-FORM-Draft nehmen wir die A4-Liste als verbindliche v1-Designbasis:
| Feldtyp | Design-Hinweis |
|---|---|
| Text | Einzeiliger Text. |
| Textarea | Mehrzeiliger Text, optional Markdown-Anmutung fuer interne/langformatige Antworten. |
| Zahl | Ganze Zahl oder Dezimalwert. |
| Waehrung | Zahl mit Waehrungsformat, z. B. Auftragswert. |
| Datum | Einzelnes Datum. |
| Datum-Range | Start-/Enddatum oder Zeitraum. |
| Select | Eine Auswahl aus Optionen; Radio kann als Darstellungsvariante davon gelten. |
| Multi-Select | Mehrere Optionen, z. B. Chips oder Checkbox-Liste. |
| Boolean | Ja/Nein, Checkbox oder Toggle. |
| Email | Email mit Formatvalidierung. |
| Telefon | Telefonnummer mit Format-/Normalisierungs-Hinweis. |
| Datei | Datei-Upload; Foto ist fuer v1 eine Upload-/Kamera-Variante, kein eigener Feldtyp. |
Nicht als normale Feldtypen zaehlen: Honeypot/mCaptcha (Anti-Spam), Section Header/Description (Darstellungsbloecke), Signature (Abnahme/Signatur-Kontext), Hidden Field, Address-Autocomplete. Diese koennen spaeter als v2 oder Spezialbausteine dazukommen.
### Arbeitsentscheidung: Post-Submit-Actions
Der Builder zeigt Actions, aber baut keinen zweiten Automation-Editor.
| Tiefe | Inhalt | Entscheidung |
|---|---|---|
| Action-Liste | Reihenfolge, Typ, aktiv/inaktiv, kurzer Status, Warnungen. | In S01 sichtbar. |
| Action-Konfiguration | Ziel, Bedingung optional, Empfaenger/URL/Entity, Field-Mapping-Zeilen. | In S01 als Panel/Drawer/Tab sichtbar. |
| Field-Mapping | Form-Feld -> Ziel-Feld, Pflichtfeldwarnungen, fehlende Zuordnung. | In S01 sichtbar. |
| Test/Validation | Webhook-URL pruefen, Mapping-Warnungen, Preview was erzeugt wird. | In S01 dokumentieren. |
| ActionLog voll | Submission-bezogene Ausfuehrungen, Re-Run, Fehlerverlauf. | Nicht eigener D-FORM-Screen; gehoert zu Submissions-Compose. |
### Arbeitsentscheidung: Builder-Arbeitsbereiche
Der Form-Builder bleibt ein Hauptscreen, aber nicht alles muss gleichzeitig im Vordergrund sein.
| Arbeitsbereich | Gewichtung | Empfehlung fuer David |
|---|---|---|
| Header / Status | dauerhaft sichtbar | Name, Status Draft/Published, Save, Preview, Publish, Share. |
| Feld-Palette | Primaerbereich | 12 Feldtypen schnell scanbar, Drag + Klick. |
| Canvas | Primaerbereich | Reihenfolge der Felder, Drag-and-Drop, Empty State, Feldfehler. |
| Feld-Inspector | Primaerbereich | Ausgewaehltes Feld bearbeiten: Label, Key, Pflicht, Validation, Optionen. |
| Logic | Sekundaerbereich | Eigener Tab/Panel/Drawer; einfache Wenn-Dann-Regeln. |
| Actions | Sekundaerbereich | Eigener Tab/Panel/Drawer; Action-Liste + Mapping. |
| Sharing | Sekundaerbereich | Eigener Tab/Panel/Drawer; URL, QR, iFrame. |
| Preview | Umschaltbereich | Public-nahe Vorschau, ideal als eigener View/Tab oder rechte Preview-Fläche. |
| Settings | Sekundaerbereich | Slug, Success Message, Redirect, Branding/Theme, Allowed Origins. |
Empfehlung: David sollte **Palette + Canvas + Inspector** als Kernarbeit verstehen. Logic, Actions, Sharing, Preview und Settings sind eigene Arbeitsmodi um denselben Form-Datensatz herum.
### Happy Path
1. Nutzer oeffnet den Form-Builder.
2. Nutzer waehlt ein Feld aus der Palette und zieht es in den Canvas.
3. Nutzer konfiguriert Label, Pflichtfeld, Optionen und Validierung.
4. Nutzer setzt bei Bedarf Conditional Logic.
5. Nutzer prueft die Live-Vorschau.
6. Nutzer definiert Post-Submit-Actions mit Field-Mapping.
7. Nutzer published das Formular.
8. Nutzer kopiert Public URL, QR oder iFrame.
9. Externer Submitter oeffnet das Public Form, fuellt es aus und sendet ab.
10. System zeigt Erfolgstext oder leitet weiter.
### Varianten / Branches
- Feld ohne Label oder ungueltige Konfiguration.
- Conditional Logic referenziert ein geloeschtes Feld.
- Pflichtfeld ohne passende Validation.
- Webhook-URL ungueltig.
- Publish blockiert wegen fehlendem Namen, Slug oder sichtbaren Feldern.
- Public Form ist nicht veroeffentlicht, archiviert, geschlossen oder nicht erreichbar.
- Captcha oder Submit schlaegt fehl.
### Roadblocks
- Zu viele Funktionen im Builder koennen David ueberladen.
- 12 Feldtypen muessen aus A4 kommen, aber Builder braucht Feld-spezifische Properties.
- Post-Submit-Actions koennen sehr komplex werden; im Design sollte Field-Mapping sichtbar sein, ohne einen Automations-Editor nachzubauen.
- Public Form muss wiederverwendbar fuer HR, Booking-Intake, Urlaub/Krank und Requests sein.
### Meldungs-/Error-State-Brainstorming
| Ereignis | UI-Form | Blockiert? | Bauen? | Copy/Notiz |
|---|---|---|---|---|
| Keine Felder im Formular | Empty State im Canvas | nein | ja, in S01 | Klarer CTD: Feld aus Palette hinzufuegen. |
| Ungueltiges Feld | Inline + Summary-Banner | ja, fuer Publish | dokumentieren | Feldname nennen, nicht nur generisch. |
| Logic-Regel kaputt | Inline im Logic-Panel | ja, fuer Publish | dokumentieren | Ursache zeigen: referenziertes Feld fehlt. |
| Publish nicht moeglich | Banner im Builder | ja | dokumentieren | Liste der fehlenden Voraussetzungen. |
| Kopieren erfolgreich | Toast | nein | dokumentieren | URL/iFrame kopiert. |
| Public Form nicht verfuegbar | Public Blocker Screen | ja | ja, V02 | Externe Nutzer brauchen klare Erklaerung. |
| Captcha fehlgeschlagen | Inline/Banner im Public Form | ja, temporar | ja, V03 | Erneut versuchen. |
| Submit erfolgreich | Public Success State | nein | ja, V01 | Erfolgstext oder Redirect. |
### Offene Fragen
- Soll `date`, `datetime`, `time` spaeter als Varianten des Datumsfelds oder als eigene v2-Feldtypen behandelt werden?
- Soll `signature` im Form-Builder v1 als normales Feld verfuegbar sein oder nur im Abnahme-/Signatur-Kontext?
- Wie tief soll Field-Mapping fuer `create_projekt` in v1 sichtbar sein?
- Soll der Public Form Renderer mehrere Branding-Level haben oder nur Tenant-Logo plus einfache Theme-Werte?
---
## 5. Screen-Kandidaten nach Entscheidung
| Kandidat | Warum eventuell noetig? | Erste Einschaetzung |
|---|---|---|
| Form-Builder Canvas | Hauptarbeitsort, komplexe Sonder-UI. | Bauen |
| Oeffentliches Formular | Extern sichtbar, eigener Polish, eigener Renderer. | Bauen |
| Public Erfolg oder Redirect | Submit-Ende ist copy- und vertrauenskritisch. | Bauen |
| Public Formular nicht verfuegbar | Externer Blocker braucht klare Loesung. | Bauen |
| Public Captcha oder Submit Fehler | Hauefiger Public-Fehler, muss sauber wirken. | Bauen oder dokumentieren |
| Sharing-Panel | URL/QR/iFrame gehoeren in Builder. | In ADV-S01 integrieren |
| Post-Submit-Actions | Field-Mapping muss sichtbar sein. | In ADV-S01 integrieren |
| Conditional-Logic-Editor | v1-Pflicht, aber eng schneiden. | In ADV-S01 integrieren |
| Forms-Liste | Compose aus D2, nicht D-FORM. | Raus |
| Submissions | Compose aus A2/A3, nicht D-FORM. | Raus |
| Booking-Intake | Eigenes Ticket `D-BOOK`. | Raus |
| Signatur-Wizard | Eigenes Paket/Compose. | Raus |
---
## 6. Screen Validation Gate
| ID | Screen/Zustand | Ist eigener Arbeitsmoment? | Neue Struktur/Entscheidung/Risiko? | Entscheidung | Begruendung |
|---|---|---|---|---|---|
| ADV-S01 | [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] | ja | ja, schwerste P16-UI | Referenz behalten | Nicht mehr Hauptfluss; S02 ist die einfache Richtung. |
| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | ja | ja, Public Renderer und Branding | Bauen | Extern sichtbar, hoher Polish. |
| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | teilweise | ja, Submit-Ende und Copy | Bauen | Public Dbschluss soll nicht Dev-Default sein. |
| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | ja | ja, blockierender Public-State | Bauen | Nutzer kann nicht fortfahren. |
| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | teilweise | ja, Public Trust | Bauen | Fehler darf nicht technisch wirken. |
| D01 | [[Screens/D01 Sharing Panel URL QR iFrame]] | nein | nein, Bereich in S01 | Nur dokumentieren | Kein eigener Screen, aber UI-Bereich. |
| D02 | [[Screens/D02 Post-Submit Actions]] | nein | ja, Mapping-Komplexitaet | Nur dokumentieren | In S01 als Panel/Tab dokumentieren. |
| D03 | [[Screens/D03 Conditional Logic Editor]] | nein | ja, Regel-Editor | Nur dokumentieren | In S01 als Panel/Tab dokumentieren. |
| D06 | [[Screens/D06 Feldkarten Menue]] | nein | ja, Klick-Logik nach David-Feedback | Nur dokumentieren | 3-Punkte-Menue fuer Duplizieren, Loeschen, ggf. Deaktivieren. |
| M01 | [[Screens/M01 Feld loeschen Confirm]] | nein | ja, Abhaengigkeiten in Logic/Actions | Nur dokumentieren | Confirm nur bei Risiko, kein normaler Bearbeitungsdialog. |
| D07 | [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | teilweise | ja, Regelbearbeitung | Referenz behalten | Fuer S02 nicht Hauptfluss; bei Advanced-Bedarf pruefen. |
| D08 | [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | teilweise | ja, Field-Mapping | Referenz behalten | Fuer S02 nicht Hauptfluss; Mapping bleibt verborgen. |
| D09 | [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | ja | ja, Publish-Entscheidung | Referenz behalten | In S02 reicht Banner/Popover im selben Screen. |
| D10 | [[Screens/D10 Builder Interaktionsfaelle]] | nein | ja, Auswahlfolgen und Edge Cases | Nur dokumentieren | Case-Matrix fuer Dropdowns, Checkboxen, vergessene Zwischenschritte, Datei/Bild und Modal-Inhalte. |
| M02 | [[Screens/M02 Unpublish Confirm]] | nein | ja, public-wirksam | Nur dokumentieren | Confirm-Dialog wegen Public-Link. |
| M03 | [[Screens/M03 Archive Confirm]] | nein | ja, destruktiv/Statuswechsel | Nur dokumentieren | Confirm aus More-Menue. |
| M04 | [[Screens/M04 Unsaved Changes Confirm]] | nein | ja, Datenverlust-Risiko | Nur dokumentieren | Standard-Guard beim Verlassen mit Dirty State. |
| D04 | Forms-Liste | nein | nein | Raus | Compose, nicht Teil von D-FORM. |
| D05 | Submissions | nein | nein | Raus | Compose, nicht Teil von D-FORM. |
Entscheidung: `Bauen`, `Wiederverwenden`, `Nur dokumentieren`, `Spaeter`, `Raus`
### Validation-Ergebnis fuer David
Der urspruengliche Advanced-Subframe-Fokus lag auf diesen **8 Frames/Zustaenden**:
- ADV-S01 Form-Builder Canvas
- S04 Oeffentliches Formular
- V01 Public Erfolg oder Redirect
- V02 Public Formular nicht verfuegbar
- V03 Public Captcha oder Submit Fehler
- D07 Logic Regel Detail
- D08 Action Detail mit Mapping
- D09 Publish Blocker Summary
Nach der Simple-Builder-Neuausrichtung sind zusaetzlich gebaut und fuer Review nach vorne gezogen:
- S00 Formulare verwalten
- S01 Formularart auswaehlen
- S02 Einfacher Fragen Editor
- S01B Gefuehrter Fragen Editor
- S01C Website Formular Editor
- S01D Umfrage Editor
- S01E Internes Formular Editor
- S03 Formular Design
- S05 Antworten Tabelle
Nicht als eigene Frames bauen:
- Kein Sharing/Teilen als eigener Hauptreiter im Simple Builder; Public-Link/QR/Einbettung gehoeren in Veroeffentlichen/Public-Link-Kontext.
- Actions, Logic, Preview und Settings als Arbeitsbereiche von S01 bzw. einfache Zusatzoptionen im Simple Builder.
- Feldkarten-Menue, allgemeine Panels, D10 Case-Matrix und Confirm-Dialoge als dokumentierte ADV-S01-Zustaende.
- Vollstaendige Forms-Liste und Submissions, weil diese Compose aus A2/A3 sind. S00/S05 sind nur schlanke D-FORM-Einstiegs-/Antwortansichten.
- Booking/Kalender/Signatur, weil diese eigene Tickets haben.
Als zusaetzliche S01-Zustandsframes bauen:
- D07 Logic Regel Detail
- D08 Action Detail mit Mapping
- D09 Publish Blocker Summary
### Copy-kritische Zustaende
| Zustand | Bauen? | Warum / Copy-Entscheidung |
|---|---|---|
| Publish blockiert | dokumentieren | Interner Nutzer braucht konkrete fehlende Punkte. |
| Public Erfolg | ja | Externer Nutzer muss sicher wissen, dass die Anfrage angekommen ist. |
| Public nicht verfuegbar | ja | Externer Nutzer ist blockiert. |
| Captcha/Submit Fehler | ja | Vertrauen erhalten, einfache naechste Aktion. |
### Blockierende Error States
| Zustand | UI-Form | Primaeraktion | Sekundare Aktion | Inhalt/Copy-Richtung |
|---|---|---|---|---|
| Public Form nicht veroeffentlicht | Screen | Zur Website zurueck | Anbieter kontaktieren | Formular ist aktuell nicht verfuegbar. |
| Public Form geschlossen | Screen | Anbieter kontaktieren | - | Dnnahmezeitraum ist beendet. |
| Public Submit scheitert dauerhaft | Banner/Screen | Erneut versuchen | Anbieter kontaktieren | Keine technischen Details. |
| Builder Publish blockiert | Banner im Builder | Fehler beheben | Vorschau weiter nutzen | Konkrete Liste: Name, Slug, Feldfehler. |
---
## 7. Validierte Screen-Liste
| ID | Screen/Zustand | Typ | Umsetzung | Ort | Status |
|---|---|---|---|---|---|
| S00 | [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] | Formular-Zentrale | Bauen | `/forms` | Subframe Draft / Review offen |
| E01 | [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]] | Empty State | Bauen | `/forms` | Subframe Draft / Review offen |
| E02 | [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]] | Empty State | Bauen | `/forms` | Subframe Draft / Review offen |
| S01 | [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] | Einstieg / Auswahl | Bauen | `/forms/new` | Subframe Draft / Review offen |
| S02 | [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]] | Simple Builder | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| S02L | [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]] | Lead-Zustand | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| E05 | [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]] | Lead Error State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| S03 | [[Screens/06 S03 Formular Design|S03 Formular Design]] | Builder Tab | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | Public Form | Bauen | `/f/{tenant}/{slug}` | Subframe Draft / Review offen |
| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | Public Feedback | Bauen | nach Submit | Subframe Draft / Review offen |
| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | Public Blocker | Bauen | Variante von S04 | Subframe Draft / Review offen |
| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | Public Error | Bauen | Variante von S04 | Subframe Draft / Review offen |
| S05 | [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]] | Builder Tab | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| E03 | [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]] | Empty State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| E04 | [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]] | Error State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen |
| S01B | [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
| S01C | [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
| S01D | [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
| S01E | [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
| ADV-S01 | [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] | Advanced Builder / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
| S01 | [[Screens/90b ADV Form-Builder Canvas 2|ADV-S01-2 Form-Builder Canvas 2]] | Advanced Builder / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz |
### ADV-S01-Zustaende und Zusatzframes vor Subframe
Diese Eintraege sind ausgearbeitet. D07/D08/D09 wurden nach Empfehlung als zusaetzliche Subframe-Zustaende gebaut; die restlichen bleiben dokumentiert.
| ID | Zustand | Typ | Umsetzung |
|---|---|---|---|
| D01 | [[Screens/D01 Sharing Panel URL QR iFrame]] | Panel-Zustand | Nur dokumentieren |
| D02 | [[Screens/D02 Post-Submit Actions]] | Panel-Zustand | Nur dokumentieren |
| D03 | [[Screens/D03 Conditional Logic Editor]] | Panel-Zustand | Nur dokumentieren |
| D06 | [[Screens/D06 Feldkarten Menue]] | Inline-Zustand | Nur dokumentieren |
| M01 | [[Screens/M01 Feld loeschen Confirm]] | Confirm Modal | Nur dokumentieren |
| D07 | [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | Panel-Zustand | Bauen |
| D08 | [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | Panel-Zustand | Bauen |
| D09 | [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | Inline-Zustand | Bauen |
| D10 | [[Screens/D10 Builder Interaktionsfaelle]] | Case-Matrix | Nur dokumentieren |
| M02 | [[Screens/M02 Unpublish Confirm]] | Confirm Modal | Nur dokumentieren |
| M03 | [[Screens/M03 Archive Confirm]] | Confirm Modal | Nur dokumentieren |
| M04 | [[Screens/M04 Unsaved Changes Confirm]] | Confirm Modal / Browser Guard | Nur dokumentieren |
---
## 8. Subframe-Grid
Interner Hauptarbeitsort:
```text
ADV-S01 Form-Builder Canvas
- Header / Status / Save / Publish
- Feld-Palette
- Canvas
- Feld-Inspector
- Arbeitsmodi: Logic, Actions, Sharing, Preview, Settings
```
Dokumentierte ADV-S01-Zustaende:
```text
S01 -> D01 Sharing Panel
S01 -> D02 Post-Submit Actions -> D08 Action Detail mit Mapping
S01 -> D03 Conditional Logic Editor -> D07 Logic Regel Detail
S01 -> D06 Feldkarten Menue -> M01 Feld loeschen Confirm
S01 -> D09 Publish Blocker Summary -> M02 Unpublish Confirm
S01 -> M03 Archive Confirm
S01 -> M04 Unsaved Changes Confirm
S01 -> D10 Builder Interaktionsfaelle
```
Public Flow:
```text
S04 Oeffentliches Formular
|
+--> V01 Public Erfolg oder Redirect
|
+--> V02 Public Formular nicht verfuegbar
|
+--> V03 Public Captcha oder Submit Fehler
```
---
## 9. Screen-Pakete
- [[David Review Checkliste]]
- [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]]
- [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]]
- [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]]
- [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]]
- [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]]
- [[Screens/06 S03 Formular Design|S03 Formular Design]]
- [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]]
- [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]]
- [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]]
- [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]]
- [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]]
- [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]]
- [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]]
- [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]]
- [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]]
- [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]]
- [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]]
- [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]]
- [[Screens/90b ADV Form-Builder Canvas 2|ADV-S01-2 Form-Builder Canvas 2]]
- [[Screens/D01 Sharing Panel URL QR iFrame]]
- [[Screens/D02 Post-Submit Actions]]
- [[Screens/D03 Conditional Logic Editor]]
- [[Screens/D06 Feldkarten Menue]]
- [[Screens/M01 Feld loeschen Confirm]]
- [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]]
- [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]
- [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]]
- [[Screens/D10 Builder Interaktionsfaelle]]
- [[Screens/M02 Unpublish Confirm]]
- [[Screens/M03 Archive Confirm]]
- [[Screens/M04 Unsaved Changes Confirm]]
---
## 10. Handoff-Check
- [x] Jeder Screen ist mit Umsetzung markiert.
- [x] Jedes sichtbare Feld hat eine Datenquelle. Als Detail-Brainstorming dokumentiert.
- [x] Jeder Button hat eine Aktion. Nach David-Feedback um Interaktionslogik ergaenzt.
- [x] Die wichtigsten ADV-S01-Klickzustaende sind als eigene Vor-Subframe-Dateien dokumentiert.
- [x] Die wichtigsten Was-passiert-wenn-Faelle sind in D10 als Case-Matrix dokumentiert.
- [x] Canvas ist nach P2-Auth-Referenz erweitert: Hauptflow, ADV-S01-Zustaende, D10, Public Flow und Scope-Notizen.
- [x] Banner/Inline-Meldungen sind dokumentiert.
- [x] Toasts/Action-Feedback sind dokumentiert.
- [x] Meldungs-/Error-State-Matrix ist ausgefuellt.
- [x] Blockierende Error States sind mit naechster Aktion definiert.
- [x] Relevante Zustaende sind beschrieben.
- [x] Offene Fragen sind sichtbar.
- [x] Ticket-Handoff-Entwurf ist in `Tickets/Fertige Tickets/` angelegt.
- [x] Detail-Brainstorming fuer ADV-S01/S02/S04/V01/V02/V03 ist abgeschlossen.
- [x] David-Review-Rueckmeldung ist erfolgt.
- [x] S01-Interaktionslogik nach David-Feedback ist eingearbeitet.
- [ ] David-Freigabe nach S01-Nacharbeit ist erfolgt.
- [x] Subframe-Link fuer Flow, Hauptfluss 01-13 und Referenzseiten 80-93 ist eingetragen.
+38 -1
View File
@@ -48,6 +48,7 @@ Diese Datei ist der erste Ort, um zu sehen:
| WF-P9 Abnahme | D-ABN | Auftrag | Validiert | [MD](<P9 Auftrag/WF-P9 Abnahme/WF-P9 Abnahme.md>) | [Canvas](<P9 Auftrag/WF-P9 Abnahme/WF-P9 Abnahme.canvas>) | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; mehrstufiger Mobile-Workflow; immutable nach Abschluss |
| WF-P12 Flow-Editor | D-FLOW | Automationen | Validiert | [MD](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.md>) | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; Katalog links/Canvas Mitte/Konfig rechts; Start-Auswahl mit Vorlagen; Langlaeufer |
| WF-P12 Verwaltung | D-P12 | Automationen | Validiert | [MD](<P12 Automationen/WF-P12 Verwaltung/WF-P12 Verwaltung.md>) | [Canvas](<P12 Automationen/WF-P12 Verwaltung/WF-P12 Verwaltung.canvas>) | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; Klartext-Timeline + 24h-Undo; Konfig-Panels hier, Editor bettet ein |
| WF-D-FORM Form Builder | D-FORM | Termine & Formulare | Review | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) | [Subframe](<https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad>) | David Review / Handoff | Mitarbeiterinnen-Paket eingebaut 2026-07-09; S02 Simple Builder ist empfohlener Hauptfluss; Advanced-Canvas bleibt Referenz |
---
@@ -188,6 +189,39 @@ Diese Datei ist der erste Ort, um zu sehen:
| S03 | Lauf-Detail (Timeline, 24h-Undo) | WF-P12 Verwaltung | Detail | Bauen | Validiert | `.../executions/:id` | [MD](<P12 Automationen/WF-P12 Verwaltung/Screens/S03 Lauf-Detail.md>) | - | [Canvas](<P12 Automationen/WF-P12 Verwaltung/WF-P12 Verwaltung.canvas>) |
| S04 | Vorlagen-Katalog | WF-P12 Verwaltung | Karten-Liste | Bauen | Validiert | `/automations/templates` | [MD](<P12 Automationen/WF-P12 Verwaltung/Screens/S04 Vorlagen-Katalog.md>) | - | [Canvas](<P12 Automationen/WF-P12 Verwaltung/WF-P12 Verwaltung.canvas>) |
| S05 | Baustein-Konfig-Panels (Muster) | WF-P12 Verwaltung | Compose-Panel | Bauen | Validiert | im Flow-Editor | [MD](<P12 Automationen/WF-P12 Verwaltung/Screens/S05 Baustein-Konfig-Panels.md>) | - | [Canvas](<P12 Automationen/WF-P12 Verwaltung/WF-P12 Verwaltung.canvas>) |
| S00 | Formulare verwalten | WF-D-FORM Form Builder | Formular-Zentrale | Bauen | Subframe Draft / Review offen | `/forms` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| E01 | S00 Keine Formulare | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/02 E01 S00 Keine Formulare.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| E02 | S00 Keine Treffer | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/03 E02 S00 Keine Treffer.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S01 | Formularart auswaehlen | WF-D-FORM Form Builder | Einstieg / Auswahl | Alternative bauen | Subframe Draft / Review offen | `/forms/new` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S02 | Einfacher Fragen Editor | WF-D-FORM Form Builder | Simple Builder Alternative | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S02L | Lead Felder zuweisen | WF-D-FORM Form Builder | S02-Zustand / Lead Editor | Subframe Draft | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/05b S02L Lead Felder zuweisen.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| E05 | S02 Lead Zuweisung pruefen | WF-D-FORM Form Builder | Lead Mapping Error State | Subframe Draft | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/05c E05 S02 Lead Zuweisung pruefen.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S03 | Formular Design | WF-D-FORM Form Builder | Builder Tab | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S04 | Oeffentliches Formular | WF-D-FORM Form Builder | Public Form | Bauen | Subframe Draft / Review offen | `/f/{tenant}/{slug}` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| V01 | Public Erfolg oder Redirect | WF-D-FORM Form Builder | Public Feedback | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| V02 | Public Formular nicht verfuegbar | WF-D-FORM Form Builder | Public Blocker | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| V03 | Public Captcha oder Submit Fehler | WF-D-FORM Form Builder | Public Error | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S05 | Antworten Tabelle | WF-D-FORM Form Builder | Builder Tab | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| E03 | S05 Keine Antworten | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/12 E03 S05 Keine Antworten.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| E04 | S05 Export Fehler | WF-D-FORM Form Builder | Error State | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/13 E04 S05 Export Fehler.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S01B | Gefuehrter Fragen Editor | WF-D-FORM Form Builder | Simple Builder Alternative | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S01C | Website Formular Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S01D | Umfrage Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| S01E | Internes Formular Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| ADV-S01 | Form-Builder Canvas | WF-D-FORM Form Builder | Bespoke Builder | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| ADV-S01-2 | Form-Builder Canvas 2 | WF-D-FORM Form Builder | Advanced / Referenz | Referenz behalten | Subframe Draft / aktuell nicht Hauptfluss | `/forms/:id/edit` | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/90b ADV Form-Builder Canvas 2.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D07 | Logic Regel Detail | WF-D-FORM Form Builder | Panel-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 Logic-Modus, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D08 | Action Detail mit Mapping | WF-D-FORM Form Builder | Panel-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 Actions-Modus, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D09 | Publish Blocker Summary | WF-D-FORM Form Builder | Inline-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 nach Klick auf Publish | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit>) | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D01 | Sharing Panel URL QR iFrame | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D02 | Post-Submit Actions | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D03 | Conditional Logic Editor | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D06 | Feldkarten Menue | WF-D-FORM Form Builder | Inline-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| D10 | Builder Interaktionsfaelle | WF-D-FORM Form Builder | Case-Matrix in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| M01 | Feld loeschen Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 Feldkarte oder Inspector | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| M02 | Unpublish Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 Header oder More-Menue | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| M03 | Archive Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 More-Menue | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
| M04 | Unsaved Changes Confirm | WF-D-FORM Form Builder | Confirm Modal / Browser Guard | Nur dokumentieren | Vor Subframe / dokumentiert | beim Verlassen von S01 mit Dirty State | [MD](<D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md>) | - | [Canvas](<D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas>) |
---
@@ -273,7 +307,10 @@ Diese Datei ist der erste Ort, um zu sehen:
| WF-P9 Projekt-Akte | Board-Auftragsoptionen | Genommen | Abnahme-Pflicht je Spalte, Vorlagen-Zuweisung, Auto-Archiv -> erweitern WF-P8 S04 (kein neuer Screen). | Validiert 2026-07-09 |
| WF-P12 Flow-Editor | Editor-Anordnung | Genommen | Katalog links, Canvas Mitte, Konfig-Panel rechts (n8n-Muster); Katalog einklappbar. | Validiert 2026-07-09 |
| WF-P12 Flow-Editor | Anlegen-Flow | Genommen | Start-Auswahl-Modal: leer ODER Vorlage (Katalog eingebettet). | Validiert 2026-07-09 |
| WF-D-FORM | Formulare zurueckgestellt | Offen | Davids Mitarbeiter:in arbeitet daran; Infos folgen von David. | 2026-07-09 |
| WF-D-FORM Form Builder | Paket eingebaut | Genommen | Mitarbeiterinnen-Paket wurde als `WF-D-FORM Form Builder` in den Vault uebernommen. | Ursprungsname war `WF-P16 Form Builder`; wegen bestehendem `P16 Termine` bewusst auf D-FORM normalisiert |
| WF-D-FORM Form Builder | Simple Builder als Hauptfluss | Review | S02 ist der empfohlene Google-Forms-nahe Haupteditor fuer Handwerksbetriebe; ADV-S01/ADV-S01-2 bleiben Referenz. | David prueft Richtung und Subframe-Feinschliff |
| WF-D-FORM Form Builder | Lead-Feldzuweisung | Review | S02L ordnet Formularfragen per Dropdown Lead-Feldern zu; E05 deckt fehlende oder unmoegliche Zuweisungen ab. | Davids Feedback aus dem Mitarbeiterinnen-Paket uebernommen |
| WF-D-FORM Form Builder | Scope-Abgrenzung | Genommen | D-FORM umfasst Builder, Public Form, Public States, Design und Antworten-Tabelle; Booking, Kalender, Signatur und HR bleiben eigene Pakete. | Handoff-Datei angelegt |
---
+3 -2
View File
@@ -4,7 +4,7 @@
{"id":"88792c50986c93db","type":"group","x":1950,"y":960,"width":2587,"height":740,"color":"2","label":"VERTRIEB — vom Anruf zum Auftrag"},
{"id":"77c19412215a977c","type":"group","x":5037,"y":960,"width":2260,"height":740,"color":"2","label":"AUFTRAG & BAUSTELLE"},
{"id":"41b8d85d3bb8d47d","type":"group","x":-160,"y":0,"width":1850,"height":740,"color":"6","label":"BASIS — gilt für alle Features"},
{"id":"ca7223940f6e1d29","type":"group","x":2520,"y":2080,"width":2317,"height":520,"label":"TERMINE & FORMULARE"},
{"id":"ca7223940f6e1d29","type":"group","x":2520,"y":2080,"width":2317,"height":740,"label":"TERMINE & FORMULARE"},
{"id":"e97e13901e405fcd","type":"group","x":5037,"y":2080,"width":1540,"height":740,"label":"KOMMUNIKATION"},
{"id":"8acc5d7d61317076","type":"group","x":2110,"y":3020,"width":1450,"height":740,"label":"AUTOMATIONEN"},
{"id":"070f258760fab4e9","type":"group","x":760,"y":3020,"width":1190,"height":740,"label":"AUFGABEN & DATEIEN — stecken in jedem Feature"},
@@ -22,7 +22,8 @@
{"id":"a-leads-pkg","type":"file","file":"02 Wireframes/P7 Leads/WF-P7 Leads/WF-P7 Leads.canvas","x":2007,"y":1440,"width":460,"height":220},
{"id":"77ebfde5a3a05b8a","type":"text","text":"## Online-Terminbuchung 🌐\n**Ticket:** `D-BOOK` + `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** 🌐 Buchungslink + `/bookings`\n\n**Was drin ist:** 🌐 Buchungs-Seite für Kunden (freien Termin wählen → Formular → Bestätigung mit Kalender-Datei), intern: Buchungs-Liste (verschieben, stornieren, No-Show), Buchungsseiten-Editor, Verfügbarkeits-Zeiten\n\n**So funktioniert's:** Kunde bucht selbst, der erste freie Mitarbeiter bekommt den Termin, die Anfrage landet im Lead-Eingang. Muss am schönsten aussehen — ist öffentlich.","x":3067,"y":2160,"width":460,"height":360,"color":"2"},
{"id":"28bd46ecb4eaa069","type":"text","text":"## Kalender\n**Ticket:** `D-BOOK` + `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** `/calendar` + Einstellungen\n\n**Was drin ist:** Monats-/Wochen-Ansicht mit allen Terminen (Google-Kalender + Buchungen + Plantafel, je mit Herkunfts-Marker), Google-Kalender verbinden, Konflikt-Übersicht\n\n**So funktioniert's:** Läuft in beide Richtungen mit Google (Outlook kommt in v2). Fremde private Termine erscheinen nur als »belegt«.","x":3837,"y":2160,"width":460,"height":360,"color":"2"},
{"id":"6b8c7d3bc3ee7449","type":"text","text":"## Formulare (Baukasten) 🌐\n**Ticket:** `D-FORM` + `D-P16` (Teil) · **Status:** ⬜ zurückgestellt (Davids Mitarbeiter:in arbeitet daran, Infos folgen)\n**Wo:** `/forms` + öffentlicher Link\n\n**Was drin ist:** Formular-Baukasten (Felder per Ziehen anordnen, Wenn-Dann-Logik »zeige Feld X wenn …«, Live-Vorschau), 🌐 öffentliches Formular zum Teilen (Link, QR-Code, Einbetten), Antworten-Übersicht\n\n**So funktioniert's:** Was nach dem Absenden passiert, ist einstellbar: Anfrage/Aufgabe anlegen, Mail senden, Automation starten. Dieselben Formulare stecken auch in HR-Anträgen und der Terminbuchung.","x":2560,"y":2160,"width":460,"height":360,"color":"1"},
{"id":"6b8c7d3bc3ee7449","type":"text","text":"## Formulare (Baukasten) 🌐\n**Ticket:** `D-FORM` + `D-P16` (Teil) · **Status:** 🟡 Review-Draft (Mitarbeiterinnen-Paket eingebaut, David Review offen)\n**Wo:** `/forms` + öffentlicher Link\n\n**Was drin ist:** Formular-Zentrale, einfacher Google-Forms-naher Builder S02, Lead-Feldzuweisung S02L/E05, Design, Antworten-Tabelle, 🌐 öffentliches Formular mit Erfolg/Blocker/Submit-Fehler\n\n**So funktioniert's:** S02 ist der Hauptfluss für Handwerksbetriebe; Advanced-Canvas, Logic/Actions und Publish-Blocker bleiben als Referenz/Power-User-Richtung. D-FORM kann später in Terminbuchung, HR und Abnahme-Vorlagen eingesteckt werden.","x":2560,"y":2160,"width":460,"height":360,"color":"2"},
{"id":"a-d-form-pkg","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas","x":2560,"y":2560,"width":460,"height":220},
{"id":"4cce52e2e3bd8823","type":"text","text":"## Versand-Technik & Statistiken 🌐\n**Ticket:** `D-P14` · **Status:** ⬜ offen\n**Wo:** `/email-marketing` + Einstellungen\n\n**Was drin ist:** Eigene Absender-Domain einrichten (mit Copy-Paste-Anleitung), Kampagnen-Übersicht + Statistiken (zugestellt/geöffnet/geklickt), gesperrte Empfänger, Vorlagen, 🌐 Abmelde-Seite\n\n**So funktioniert's:** Mails an Kunden tauchen automatisch am Kontakt auf (BCC-Trick, kein Postfach-Anschluss nötig — der kommt in v2).","x":1850,"y":2160,"width":460,"height":360,"color":"2"},
{"id":"b789fc765f833f45","type":"text","text":"## Digital unterschreiben (E-Signatur)\n**Ticket:** `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** im Projekt-Detail\n\n**Was drin ist:** Angebot als PDF hochladen → Unterzeichner festlegen → Kunde unterschreibt per Link (mit SMS/Mail-Code) oder direkt auf dem Gerät → Status je Unterzeichner, Erinnerung, Widerruf\n\n**So funktioniert's:** Hängt direkt am Projekt (»Angebot zur Signatur senden«). Eigene Lösung, kein Pflicht-Drittanbieter.","x":4337,"y":2160,"width":460,"height":360,"color":"5"},
{"id":"903e3384b0a5e623","type":"text","text":"**Detail-Flows:** 9 Wireframe-Pakete mit eigenen Canvases in `02 Wireframes/P2 Auth/` (Login, Signup, Reset, Set Password, 2FA, RBAC …) — siehe Tracker","x":2777,"y":480,"width":460,"height":220},
+9 -9
View File
@@ -51,7 +51,7 @@ Gesamtkarte aller HiveGrid-v1-Features. Eine Karte = **ein Feature** (so benannt
| Abnahme (Baustellen-Protokoll) 📱 | Auftrag & Baustelle | D-ABN | 🔴 | 🟡 vorgeplant |
| Kampagnen & Empfängerlisten | E-Mail-Marketing | D-KAMP | 🟠 | ⬜ offen |
| Versand-Technik & Statistiken 🌐 | E-Mail-Marketing | D-P14 | 🟠 | ⬜ offen |
| Formulare (Baukasten) 🌐 | Termine & Formulare | D-FORM + D-P16 (Teil) | 🔴 | ⬜ zurückgestellt |
| Formulare (Baukasten) 🌐 | Termine & Formulare | D-FORM + D-P16 (Teil) | 🔴 | 🟡 Review-Draft |
| Online-Terminbuchung 🌐 | Termine & Formulare | D-BOOK + D-P16 (Teil) | 🟠 | ⬜ offen |
| Kalender | Termine & Formulare | D-BOOK + D-P16 (Teil) | 🔴 mittel | ⬜ offen |
| Digital unterschreiben (E-Signatur) | Termine & Formulare | D-P16 (Teil) | 🔵 | ⬜ offen |
@@ -284,14 +284,14 @@ Abhaken = in der groben Planung berücksichtigt (Screens/Flow verortet). Quelle:
### Termine & Formulare
#### Formulare (Baukasten) 🌐 — `D-FORM` + `D-P16` (Teil) — ⬜ zurückgestellt (2026-07-09: Davids Mitarbeiter:in arbeitet daran; Infos folgen von David)
- [ ] Formular-Baukasten: Felder per Ziehen anordnen (12 Feld-Typen), Feld-Einstellungen, Live-Vorschau
- [ ] Wenn-Dann-Logik (»zeige Feld X, wenn Y = Z«)
- [ ] Veröffentlichen + Teilen: Link, QR-Code, Website-Einbettung
- [ ] Nach dem Absenden: Anfrage/Kontakt/Projekt/Aufgabe anlegen, Mail senden, Webhook, Automation starten (mit Feld-Zuordnung)
- [ ] 🌐 Öffentliches Formular (Logik live, Spam-Schutz, Firmen-Logo, alle Zustände)
- [ ] Formular-Liste + Antworten-Übersicht (Tabelle, Filter, CSV, PDF-Export, Aktions-Protokoll mit »nochmal ausführen«)
- [ ] Renderer wiederverwendbar (steckt auch in HR-Anträgen, Buchungs-Fragen, Abnahme-Vorlagen)
#### Formulare (Baukasten) 🌐 — `D-FORM` + `D-P16` (Teil) — 🟡 Review-Draft (2026-07-09)
- [x] Formular-Zentrale, Formularart-Auswahl und einfacher Google-Forms-naher Haupteditor S02 als Subframe-Draft vorbereitet.
- [x] Lead-Feldzuweisung ergänzt: S02L ordnet Formularfragen per Dropdown Lead-Feldern zu; E05 deckt fehlende oder unmögliche Zuweisungen ab.
- [x] Advanced-Canvas, Logic, Actions und Publish-Blocker als Referenz-/Power-User-Richtung dokumentiert und verlinkt.
- [x] 🌐 Öffentliches Formular mit Erfolg, nicht verfügbar und Captcha-/Submit-Fehler als Public States vorbereitet.
- [x] Formular-Design und Antworten-Tabelle inklusive Empty-/Export-Fehlerzuständen vorbereitet.
- [ ] David Review und Feinschliff der Subframe-Frames abschließen.
- Paket: `02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/` (Mitarbeiterinnen-Paket eingebaut; Handoff erstellt)
#### Online-Terminbuchung 🌐 — `D-BOOK` + `D-P16` (Teil) — ⬜ offen
- [ ] 🌐 Buchungs-Seite: freien Termin wählen (Zeitzonen-fest) → Fragen-Formular → Bestätigung + Kalender-Datei (.ics); einbettbar
@@ -0,0 +1,78 @@
---
kind: ticket-handoff
project: HiveGrid Screen Project
ticket: D-FORM
area: Termine & Formulare / Form Builder / Public Forms
status: Review / Handoff
repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
stand: 2026-07-09
---
# D-FORM Form Builder
Repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
Zentrale Tracker-Datei: [Screen Paket Tracker](../../02%20Wireframes/Screen%20Paket%20Tracker.md)
Arbeitsbereich im Repo: [02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder)
Start fuer Review: [00 Start hier - David](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/00%20Start%20hier%20-%20David.md)
Uebergabe: [D-FORM David Uebergabe 2026-07-09](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/D-FORM%20David%20Uebergabe%202026-07-09.md)
Canvas: [WF-D-FORM Form Builder.canvas](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.canvas)
Subframe Flow: [WF-D-FORM Form Builder](https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad)
## Kurzfassung
Das D-FORM-Mitarbeiterinnen-Paket wurde in den Haupt-Vault uebernommen und auf `WF-D-FORM Form Builder` normalisiert. Es enthaelt einen reviewfaehigen Subframe-Draft fuer Formular-Zentrale, einfachen Form-Builder, Lead-Feldzuweisung, Public Form, Public States, Design und Antworten-Tabelle.
Der empfohlene Hauptfluss ist der einfache Google-Forms-nahe Editor `S02`. Der alte Advanced-Canvas bleibt als Referenz/Power-User-Richtung erhalten.
## Gemacht
- Paket unter `02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/` eingebaut.
- Paket-MD, Screens, Varianten, Canvas, Review-Checkliste, Bauplan, Bau-Log und David-Uebergabe uebernommen.
- Paketname von `WF-P16 Form Builder` auf `WF-D-FORM Form Builder` normalisiert, weil `P16` im Vault bereits Termine/Kalender/Signatur belegt.
- Canvas-Datei auf die neuen D-FORM-Pfade umgeschrieben und als JSON validiert.
- `Screen Paket Tracker` um Flow, Screen-/State-Zeilen und D-FORM-Entscheidungen erweitert.
- `HiveGrid Map` von `zurueckgestellt` auf `Review-Draft` aktualisiert.
## Review-Punkte
- Pruefen, ob `S02 Einfacher Fragen Editor` als Haupteditor fuer Handwerksbetriebe die richtige Richtung ist.
- Pruefen, ob `S02L Lead Felder zuweisen` und `E05 S02 Lead Zuweisung pruefen` fuer Davids Lead-Mapping-Anforderung reichen.
- Public-Strecke `S04`, `V01`, `V02`, `V03` auf Copy, mobile Nutzbarkeit und Trust pruefen.
- Entscheiden, ob `ADV-S01`, `ADV-S01-2`, `D07`, `D08`, `D09` nur Referenz bleiben oder spaeter als Power-User-Flow nachgezogen werden.
- Klaeren, ob die dokumentierten Modale `M01` bis `M04` als echte Dialog-Screens gebaut werden muessen.
## Flow-Paket
| Flow | Status | Repo | Canvas | Subframe |
|---|---|---|---|---|
| WF-D-FORM Form Builder | Review / Subframe Draft | [MD](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.md) | [Canvas](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.canvas) | [Flow](https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad) |
## Hauptscreens
| ID | Screen | Subframe |
|---|---|---|
| S00 | Formulare verwalten | [Subframe](https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit) |
| E01 | S00 Keine Formulare | [Subframe](https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit) |
| E02 | S00 Keine Treffer | [Subframe](https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit) |
| S01 | Formularart auswaehlen | [Subframe](https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit) |
| S02 | Einfacher Fragen Editor | [Subframe](https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit) |
| S02L | Lead Felder zuweisen | [Subframe](https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit) |
| E05 | S02 Lead Zuweisung pruefen | [Subframe](https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit) |
| S03 | Formular Design | [Subframe](https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit) |
| S04 | Oeffentliches Formular | [Subframe](https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit) |
| V01 | Public Erfolg oder Redirect | [Subframe](https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit) |
| V02 | Public Formular nicht verfuegbar | [Subframe](https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit) |
| V03 | Public Captcha oder Submit Fehler | [Subframe](https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit) |
| S05 | Antworten Tabelle | [Subframe](https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit) |
| E03 | S05 Keine Antworten | [Subframe](https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit) |
| E04 | S05 Export Fehler | [Subframe](https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit) |
## Hinweis fuer Ticket-System
Diese Datei ist der kompakte Handoff fuer `D-FORM`. Fuer Detailentscheidungen, zusaetzliche Referenzscreens, dokumentierte D-/M-Zustaende und offene Review-Fragen sind der [Screen Paket Tracker](../../02%20Wireframes/Screen%20Paket%20Tracker.md) und das Paket [WF-D-FORM Form Builder](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.md) massgeblich.
+1
View File
@@ -20,3 +20,4 @@ Die Detailwahrheit bleibt in den Wireframe-Paketen und im `Screen Paket Tracker`
|---|---|
| D-P2 | [D-P2 Auth Wireframes](<Fertige Tickets/D-P2 Auth Wireframes.md>) |
| D-D0b | [D-D0b Layout Standards](<Fertige Tickets/D-D0b Layout Standards.md>) |
| D-FORM | [D-FORM Form Builder](<Fertige Tickets/D-FORM Form Builder.md>) |