Branding & Domains
Erscheinungsbild & Design
Farben, Schriften, Vorlagen, Titelbilder und Dark Mode. Lass jedes Formular wie ein natürlicher Teil deiner Marke wirken.
Design-Panel
Klicke in der oberen Symbolleiste auf Design (Paletten-Symbol). Das Panel dockt rechts an und zeigt Änderungen sofort in der Vorschau.
Der Schalter Modus (Hell / Dunkel) oben im Panel legt fest, welches Farbschema du gerade bearbeitest. Jeder Modus speichert eigene Design-Werte, sodass du beide unabhängig voneinander optimieren kannst.
Die Design-Auswahl darunter listet zuerst deine Arbeitsbereichs-Themes für diesen Modus und danach die integrierten Voreinstellungen. Die Fußzeile zeigt Alle Änderungen gespeichert, bis du etwas änderst; danach erscheinen Verwerfen und Speichern.
Vorlagen
Die Design-Auswahl bietet sieben Vorlagen für den Hellmodus und neun für den Dunkelmodus. Jede wendet mit einem Klick ein vollständig abgestimmtes Set aus Farben, einer Schrift und Eckenrundung an.
formbase-Standard — wird automatisch auf jedes neue Formular angewendet, je eines pro Modus
Vorlagen — die unten aufgeführten kuratierten Designs
Benutzerdefiniert — „Nur dieses Formular”. Was die Auswahl zeigt, sobald du einen Wert von Hand änderst
Im Free-Plan verfügbar
Benutzerdefinierte Designs, einschließlich Vorlagen und separater Hell-/Dunkel-Gestaltung, sind in jedem Plan verfügbar. Siehe Pläne & Preise.
Hellmodus-Vorlagen
| Vorlage | Stil |
|---|---|
| Solarized Light | Warm, geringer Kontrast mit Bernsteintönen |
| Atom One Light | Klarer Kontrast mit blauen Akzenten |
| Catppuccin Latte | Warme Pastellfarben mit Mauve und Pfirsich |
| Rosé Pine Dawn | Gedämpfte Rosen- und Kiefern-Pastelle mit Iris-Akzenten |
| Mint Paper | Frisches Blaugrün auf Elfenbein mit Smaragd-Highlights |
| Coral Reef | Warmes Pfirsich und Koralle mit sonnigen Akzenten |
| Sunny | Warmes Goldgelb auf einer Elfenbeinbasis |
Dunkelmodus-Vorlagen
| Vorlage | Stil |
|---|---|
| Dracula | Dunkel mit lebhaften Akzentfarben |
| Monokai | Klassische dunkle Palette mit warmem Grün und Orange |
| Midnight Synth | Tiefes Mitternacht mit Neon-Synthwave-Leuchten |
| Vulcan | Elegantes Dunkel mit kühlen Grautönen und elektrischem Blau |
| Tokyo Night | Dunkles Stadtgefühl mit Neon und Indigo |
| Gruvbox Dark | Retro-Erdtöne mit Senf und verbranntem Orange |
| Rosé Pine Moon | Dunkles, staubiges Pflaumennacht mit Iris-Akzenten |
| Forest Night | Tiefes Kieferngrün mit Moos- und Waldtönen |
| Black | Tiefschwarz mit Graustufen — von Vercel inspiriert |
Arbeitsbereichs-Themes
Ein Arbeitsbereichs-Theme ist ein benanntes Design für einen Modus, hell oder dunkel, das sich mehrere Formulare teilen. Nutze eines, um jedes Formular markenkonform zu halten: Ändere das Theme einmal, und jedes Formular, das es verwendet, übernimmt die Änderung. Um beide Modi zu gestalten, pflege zwei Themes, etwa Acme Light und Acme Dark.
Ein Arbeitsbereichs-Theme erstellen
Öffne das Design-Panel für ein Formular, wähle Hell oder Dunkel und dann eine Vorlage, oder passe die Farben an, bis das Formular passt.
Klicke unter der Design-Auswahl auf Als Arbeitsbereichs-Theme speichern und gib ihm einen Namen, zum Beispiel den Namen deines Unternehmens.
Dieser Modus des Formulars ist jetzt mit dem neuen Theme verknüpft. Die Auswahl zeigt seinen Namen und wie viele Formulare es verwenden.
Auf einem anderen Formular verwenden
Öffne das Design-Panel auf dem anderen Formular, wähle das Theme unter Arbeitsbereichs-Themes aus und klicke auf Speichern. Die Auswahl listet nur Arbeitsbereichs-Themes für den Modus, den du gerade bearbeitest, verknüpfe Hell- und Dunkelmodus daher separat.
Ein verknüpftes Formular bearbeiten
Ein verknüpftes Formular lässt sich wie jedes andere Formular bearbeiten. Sobald deine Änderungen vom Arbeitsbereichs-Theme abweichen, fragt die Fußzeile, wohin sie gespeichert werden sollen:
In [Theme-Name] speichern aktualisiert das Arbeitsbereichs-Theme und jedes damit verknüpfte Formular.
Nur für dieses Formular speichern behält die Änderung nur in diesem Formular. Dieser Modus folgt dem Arbeitsbereichs-Theme nicht mehr und wird zu einem benutzerdefinierten Design.
Das Anwenden einer Vorlage auf einen verknüpften Modus hebt ebenfalls die Verknüpfung auf. Um ihn erneut zu verknüpfen, wähle das Arbeitsbereichs-Theme in der Auswahl aus und speichere.
Veröffentlichte Formulare aktualisieren sich bei der nächsten Veröffentlichung
Das Speichern eines Arbeitsbereichs-Themes ändert den Entwurf jedes verknüpften Formulars sofort. Befragte sehen das neue Aussehen erst, nachdem jedes Formular erneut veröffentlicht wurde, genau wie bei jeder anderen Änderung. Verknüpfte Formulare zeigen bis dahin Änderungen veröffentlichen.
Umbenennen oder löschen
Öffne bei einem verknüpften Formular das Menü ⋯ neben der Design-Auswahl. Umbenennen ändert den Namen überall, wo das Theme verwendet wird. Löschen entfernt das Theme; Formulare, die es verwendet haben, behalten ihr aktuelles Aussehen als benutzerdefiniertes Design.
Design-Steuerelemente
Wähle eine Vorlage oder ein Arbeitsbereichs-Theme und feintune dann Typografie und Farben. Jede Farbe beschreibt einen Zweck statt einer einzelnen Komponente. Wenn du zum Beispiel Text änderst, werden Seitentext, Fragetitel, Feldtext und Optionstext gemeinsam aktualisiert. Bewege den Mauszeiger über den Namen einer Farbe, um zu sehen, was sie steuert. Ein Punkt markiert Farben, die du geändert, aber noch nicht gespeichert hast.
Typografie
| Einstellung | Was sie steuert |
|---|---|
| Schrift | Schriftart für Formularfelder, Seitentext und gemeinsame Blöcke. Elf Familien, unten aufgeführt |
| Größe | Basis-Textgröße, 12–22 px. Zugehörige Beschriftungen und Steuerelemente skalieren mit ihr |
| Eckenradius | Gemeinsame Eckenrundung für Eingabefelder, Karten, Optionen und Schaltflächen, 0–32 px |
Farben
Farben sind danach gruppiert, wo sie im Formular erscheinen.
| Gruppe | Farbe | Was sie steuert |
|---|---|---|
| Seite | Hintergrund | Fläche hinter Formularen, Seiten, Medienbereichen und Fokusabständen |
| Seite | Text | Haupttext, Fragetitel, Feldtext und Optionstext |
| Seite | Gedämpft | Flächen mit geringer Betonung, etwa Tabellenköpfe und dezente Hover-Zustände |
| Seite | Gedämpfter Text | Beschreibungen, Hilfetexte, Platzhalter und Bildunterschriften |
| Seite | Link | Inline-Links in Rich-Text, geteilten Seiten und Formulartexten |
| Felder und Auswahl | Feld | Eingabefelder, Karten, Popovers, Dateizeilen und Optionsflächen |
| Felder und Auswahl | Rand | Umrandungen von Eingabefeldern, Karten, Optionen, Tabellen und Uploads |
| Felder und Auswahl | Ausgewählt | Füllung ausgewählter Optionen sowie sanfte Hervorhebungen bei Hover und Drag |
| Felder und Auswahl | Ausgewählter Text | Text und Symbole auf ausgewählten oder hervorgehobenen Flächen |
| Felder und Auswahl | Fokusring | Fokusringe, Umrandungen für Auswahl und Hover sowie aktive Rahmen |
| Schaltflächen und Fehler | Schaltfläche | Sende-Schaltflächen, Fortschrittsbalken und andere primäre Aktionen |
| Schaltflächen und Fehler | Schaltflächentext | Text auf primären Schaltflächen |
| Schaltflächen und Fehler | Fehler | Validierungsfehler, ungültige Rahmen und fehlgeschlagene Uploads |
| Bewertung | Sternumriss | Inaktive Bewertungssterne |
| Bewertung | Sternfüllung | Ausgewählte Bewertungssterne |
| Bewertung | Pflichtmarkierung | Pflicht-Sternchen bei Formularfragen |
Die Gruppe Bewertung hat außerdem Sterngröße, die Größe der Bewertungssterne in Pixeln, von 12 bis 48.
Schriften
formbase enthält elf Schriftfamilien. Die unter Typografie gewählte Schrift gilt für den gesamten Text im Formular.
| Schriftfamilie | Stil |
|---|---|
| Cal Sans UI | Standard-Sans-Serif für formbase |
| Inter | Klare geometrische serifenlose Schrift |
| Manrope | Moderne geometrische serifenlose Schrift |
| Arial | Neutrale System-Serifenlose |
| Tahoma | Kompakte serifenlose Schrift |
| Times New Roman | Klassische Serifenschrift |
| Georgia | Elegante Bildschirm-Serifenschrift |
| Lora | Zeitgenössische kalligrafische Serifenschrift |
| Palatino Linotype | Buchähnliche Serifenschrift im Altstil |
| JetBrains Mono | Entwicklerfreundliche Monospace-Schrift |
| Comic Sans MS | Lässige, handgezeichnete Schrift |
Titelbild und Logo
Titelbild und Logo befinden sich oben auf der Arbeitsfläche. Du richtest sie direkt auf der Arbeitsfläche ein — nicht im Design-Panel. Eine Anleitung findest du unter Den Editor verstehen → Titelbild und Logo.
Dark Mode
formbase unterstützt den Dark Mode an zwei Stellen: im Dashboard und bei veröffentlichten Formularen.
Dashboard
Schalte den Dark Mode über das Benutzermenü unten in der Seitenleiste um. Die Einstellung gilt für dein Konto auf allen Geräten.
Veröffentlichte Formulare
Veröffentlichte Formulare folgen standardmäßig den Systemeinstellungen der ausfüllenden Person. Wenn deren Gerät im Dunkelmodus ist, wird das Formular im Dunkelmodus angezeigt.
Beide Modi gestalten
Wenn du nur ein helles Design einrichtest, verwendet das Formular die Standard-Dunkelfarben von formbase, wenn der Dark Mode aktiv ist. Für volle Kontrolle richtest du beide Farbschemata über den Hell-/Dunkel-Umschalter oben im Design-Panel ein.
Wenn du im Design-Panel zwischen Hell und Dunkel wechselst, passt sich das Dashboard entsprechend an. So kannst du dein Design beim Bearbeiten im Kontext in der Vorschau sehen.
Häufige Design-Muster
Zur Marke passend — wähle deine Markenschrift, setze die Schaltflächenfarbe auf deine primäre Markenfarbe und lade dein Logo hoch. Nutze eine Vorlage als Ausgangspunkt und speichere das Ergebnis dann als Arbeitsbereichs-Theme, damit jedes Formular es teilt.
Dark-Mode-first-Umfrage — erzwinge den Dark Mode über die Einbettungseinstellungen beim Teilen und passe dann das dunkle Farbschema für bessere Lesbarkeit an. Verwende einen kontrastreichen Akzent für die aktive Bewertungsfarbe, damit Sterne auf dunklen Hintergründen hervorstechen.
Minimalistisches Einbetten — stelle die Hintergrundfarbe auf die Farbe deiner Website ein, blende Titelbild und Logo in den Einbettungseinstellungen aus, verwende eine dezente Rahmenfarbe und reduziere den Eckenradius auf 0.
Verspieltes Quiz — wähle Comic Sans MS, schiebe den Eckenradius Richtung 32 für Pill-Form, verwende eine kräftige Farbe für „Ausgewählt” und füge ein Titelbild aus dem Unsplash-Tab der Titelbild-Auswahl hinzu.
Branding
Standardmäßig zeigen veröffentlichte Formulare ein kleines formbase-Badge. Schalte es mit formbase-Branding anzeigen in Formulareinstellungen → Allgemein aus. Das Entfernen des Badges erfordert einen Pro- oder Business-Plan — siehe Pläne & Preise.
Teste beide Modi vor dem Veröffentlichen
Sieh dir dein Formular mit aktiviertem System-Dunkelmodus in der Vorschau an, bevor du veröffentlichst. Logo-Kontrast und Akzentfarben brauchen oft eine Anpassung für die dunkle Variante — besonders Titelbilder und Schaltflächenfarben, die auf hellem Hintergrund gut aussehen, aber auf dunklem verblassen.