# Erscheinungsbild & Design

Gestalte dein Formular mit Farben, Schriften, Vorlagen, gemeinsamen Arbeitsbereichs-Themes, Titelbildern und Dark Mode.

## Erscheinungsbild & Design

Farben, Schriften, Vorlagen, Titelbilder und Dark Mode. Lass jedes Formular wie ein natürlicher Teil deiner Marke wirken.

<h2 id="theme-panel">Design-Panel</h2>
<p>
  Klicke in der oberen Symbolleiste auf <strong>Design</strong> (Paletten-Symbol). Das Panel dockt rechts an und zeigt Änderungen sofort in
  der Vorschau.
</p>
<p>
  Der Schalter <strong>Modus</strong> (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.
</p>
<p>
  Die <strong>Design</strong>-Auswahl darunter listet zuerst deine Arbeitsbereichs-Themes für diesen Modus und danach die integrierten
  Voreinstellungen. Die Fußzeile zeigt <strong>Alle Änderungen gespeichert</strong>, bis du etwas änderst; danach erscheinen{' '}
  <strong>Verwerfen</strong> und <strong>Speichern</strong>.
</p>

<h2 id="presets">Vorlagen</h2>
<p>
  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.
</p>
<ul>
  <li>
    <strong>formbase-Standard</strong> — wird automatisch auf jedes neue Formular angewendet, je eines pro Modus
  </li>
  <li>
    <strong>Vorlagen</strong> — die unten aufgeführten kuratierten Designs
  </li>
  <li>
    <strong>Benutzerdefiniert</strong> — „Nur dieses Formular". Was die Auswahl zeigt, sobald du einen Wert von Hand änderst
  </li>
</ul>

> ℹ️ **Im Free-Plan verfügbar**
> <p>
>     Benutzerdefinierte Designs, einschließlich Vorlagen und separater Hell-/Dunkel-Gestaltung, sind in jedem Plan verfügbar. Siehe{' '}
>     <a href="/de/subscription-billing/plans-pricing">Pläne & Preise</a>.
>   </p>

<h3 id="light-presets">Hellmodus-Vorlagen</h3>

<h3 id="dark-presets">Dunkelmodus-Vorlagen</h3>

<h2 id="workspace-themes">Arbeitsbereichs-Themes</h2>
<p>
  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 <em>Acme Light</em> und <em>Acme Dark</em>.
</p>

<h3 id="create-workspace-theme">Ein Arbeitsbereichs-Theme erstellen</h3>
<ol>
  <li>
    Ö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.
  </li>
  <li>
    Klicke unter der Design-Auswahl auf <strong>Als Arbeitsbereichs-Theme speichern</strong> und gib ihm einen Namen, zum Beispiel den Namen
    deines Unternehmens.
  </li>
</ol>
<p>
  Dieser Modus des Formulars ist jetzt mit dem neuen Theme verknüpft. Die Auswahl zeigt seinen Namen und wie viele Formulare es verwenden.
</p>

<h3 id="use-workspace-theme">Auf einem anderen Formular verwenden</h3>
<p>
  Öffne das Design-Panel auf dem anderen Formular, wähle das Theme unter <strong>Arbeitsbereichs-Themes</strong> aus und klicke auf{' '}
  <strong>Speichern</strong>. Die Auswahl listet nur Arbeitsbereichs-Themes für den Modus, den du gerade bearbeitest, verknüpfe Hell- und
  Dunkelmodus daher separat.
</p>

<h3 id="edit-workspace-theme">Ein verknüpftes Formular bearbeiten</h3>
<p>
  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:
</p>
<ul>
  <li>
    <strong>In [Theme-Name] speichern</strong> aktualisiert das Arbeitsbereichs-Theme und jedes damit verknüpfte Formular.
  </li>
  <li>
    <strong>Nur für dieses Formular speichern</strong> behält die Änderung nur in diesem Formular. Dieser Modus folgt dem
    Arbeitsbereichs-Theme nicht mehr und wird zu einem benutzerdefinierten Design.
  </li>
</ul>
<p>
  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.
</p>

> ℹ️ **Veröffentlichte Formulare aktualisieren sich bei der nächsten Veröffentlichung**
> <p>
>     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{' '}
>     <strong>Änderungen veröffentlichen</strong>.
>   </p>

<h3 id="manage-workspace-themes">Umbenennen oder löschen</h3>
<p>
  Öffne bei einem verknüpften Formular das Menü <strong>⋯</strong> neben der Design-Auswahl. <strong>Umbenennen</strong> ändert den Namen
  überall, wo das Theme verwendet wird. <strong>Löschen</strong> entfernt das Theme; Formulare, die es verwendet haben, behalten ihr
  aktuelles Aussehen als benutzerdefiniertes Design.
</p>

<h2 id="theme-sections">Design-Steuerelemente</h2>

<p>
  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 <strong>Text</strong> ä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.
</p>

<h3 id="typography">Typografie</h3>

<h3 id="colors">Farben</h3>

<p>Farben sind danach gruppiert, wo sie im Formular erscheinen.</p>

<p>
  Die Gruppe Bewertung hat außerdem <strong>Sterngröße</strong>, die Größe der Bewertungssterne in Pixeln, von 12 bis 48.
</p>

<h2 id="fonts">Schriften</h2>
<p>formbase enthält elf Schriftfamilien. Die unter Typografie gewählte Schrift gilt für den gesamten Text im Formular.</p>

<h2 id="cover-logo">Titelbild und Logo</h2>
<p>
  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{' '}
  <a href="/de/building-forms/understanding-the-editor#cover-logo">Den Editor verstehen → Titelbild und Logo</a>.
</p>

<h2 id="dark-mode">Dark Mode</h2>
<p>formbase unterstützt den Dark Mode an zwei Stellen: im Dashboard und bei veröffentlichten Formularen.</p>

<h3 id="dark-mode-dashboard">Dashboard</h3>
<p>Schalte den Dark Mode über das Benutzermenü unten in der Seitenleiste um. Die Einstellung gilt für dein Konto auf allen Geräten.</p>

<h3 id="dark-mode-published">Veröffentlichte Formulare</h3>
<p>
  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.
</p>

<h3 id="dark-mode-theming">Beide Modi gestalten</h3>
<p>
  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.
</p>
<p>
  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.
</p>

<h2 id="examples">Häufige Design-Muster</h2>

<ul>
  <li>
    <strong>Zur Marke passend</strong> — 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.
  </li>
  <li>
    <strong>Dark-Mode-first-Umfrage</strong> — 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.
  </li>
  <li>
    <strong>Minimalistisches Einbetten</strong> — 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.
  </li>
  <li>
    <strong>Verspieltes Quiz</strong> — 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.
  </li>
</ul>

<h2 id="branding">Branding</h2>
<p>
  Standardmäßig zeigen veröffentlichte Formulare ein kleines formbase-Badge. Schalte es mit <strong>formbase-Branding anzeigen</strong> in{' '}
  <strong>Formulareinstellungen → Allgemein</strong> aus. Das Entfernen des Badges erfordert einen Pro- oder Business-Plan — siehe{' '}
  <a href="/de/subscription-billing/plans-pricing">Pläne & Preise</a>.
</p>

> 💡 **Teste beide Modi vor dem Veröffentlichen**
> <p>
>     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.
>   </p>

<h2 id="next-steps">Nächste Schritte</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Spracheinstellung](/de/building-forms/language-setting) — Dein Formular in jeder Sprache anbieten
  - [Datei-Uploads & Unterschriften](/de/building-forms/file-uploads-signatures) — Dokumente und elektronische Signaturen akzeptieren
  - [Bot-Schutz](/de/building-forms/captcha-bot-protection) — Spam mit Cloudflare Turnstile blockieren
  - [Freigabe-Links](/de/sharing-publishing/sharing-embedding) — Freigabe-Link-URLs erstellen und verwalten
</div>
