Feedback-Formular anpassen
Es gibt zwei Wege über die Standardkonfiguration hinauszugehen: das mitgelieferte Formular per CSS-Klassen umstylen, oder mit sendFeedback eine komplett eigene Feedback-Oberfläche bauen.
Formular stylen
Jeder sichtbare Teil des Formulars akzeptiert eine eigene CSS-Klasse. Sie wird mit der vorhandenen Standardklasse zusammengeführt (über tailwind-merge) — eine Tailwind-Utility wie text-center kannst du direkt durch eine widersprüchliche Klasse wie text-left ersetzen, ganz ohne !important.
| Prop | Betrifft |
|---|---|
className | äußerer Container des gesamten Formulars |
headlineClassName | Überschrift |
descriptionClassName | Beschreibungstext |
inputLabelClassName | Feldbeschriftungen |
inputClassName | Text-, E-Mail-, Auswahl- und Mehrfachauswahlfelder |
textareaClassName | mehrzeilige Textfelder (u. a. das Nachrichtenfeld) |
checkboxClassName | Datenschutz-Checkbox |
btnClassName | Absende-Schaltfläche und die „Issue öffnen"-Schaltfläche nach dem Absenden |
Ergänze die gewünschten Klassen im feedback-Block der theme.config.tsx — unabhängig davon, ob das Formular automatisch am Seitenende erscheint oder manuell per <Feedback /> eingebunden ist:
Eigene Feedback-UI mit sendFeedback bauen
Für ein komplett eigenes UI — z. B. ein einfaches „War diese Seite hilfreich?"-Widget statt des vollständigen Formulars — exportiert das Theme die zugrunde liegende Sendefunktion direkt:
sendFeedback übernimmt automatisch den Proof-of-Work-Ablauf gegen den Feedback-Server (siehe Feedback-System) und wirft einen Fehler, wenn die Anfrage fehlschlägt. Formularfelder, Validierung und Fehleranzeige liegen bei deiner eigenen UI.
sendFeedback ersetzt keine eigene Formularvalidierung — E-Mail-Format, Pflichtfelder und Datenschutz-Einwilligung musst du in deiner eigenen UI selbst prüfen.
Nächste Schritte
- Feedback einrichten — Grundkonfiguration in Easy Mode und Developer Mode
- Feedback-System — wie Proof-of-Work und GitLab-Issue-Erstellung funktionieren
- Theme-Konfiguration — alle
feedback.*-Felder inklusive der ClassName-Props