# Den Editor verstehen

Ein kurzer Überblick über den Formular-Builder und wo du jede Funktion findest.

## Den Editor verstehen

Ein Überblick über den Formular-Builder — wo alles zu finden ist und wie du schnell navigierst.

<h2 id="layout">Layout auf einen Blick</h2>

  <p>
    Der Editor ist eine einzige, dokumentartige Arbeitsfläche — tippe, füge Blöcke ein und ordne sie wie in einem Dokument an. Drei Bereiche
    übernehmen die Arbeit:
  </p>
  <ul>
    <li>
      <strong>Obere Symbolleiste</strong> — <strong>Bearbeiten</strong>, <strong>Übersetzen</strong> und <strong>Vorschau</strong>, dann
      Einstellungen, Design, die Problemanzeige und <strong>Veröffentlichen</strong>. Veröffentlichen erscheint, sobald es etwas zu
      veröffentlichen gibt. Nach deiner ersten Veröffentlichung kommen <strong>Einreichungen</strong>, <strong>Teilen</strong> und{' '}
      <strong>Veröffentlichungsverlauf</strong> hinzu, und <strong>Unveröffentlichte Änderungen rückgängig machen</strong> erscheint, sobald
      sich ein Entwurf von der Live-Version unterscheidet
    </li>
    <li>
      <strong>Arbeitsfläche (Mitte)</strong> — dein Formular, wie es Befragte sehen werden, mit einer optionalen Titelseite und einem Logo
      oben
    </li>
    <li>
      <strong>KI-Chat</strong> — schwebende Schaltfläche unten rechts; öffnet ein Seitenpanel, in dem du die KI bitten kannst, dein Formular
      zu erstellen oder zu bearbeiten
    </li>
  </ul>
  <p>Die Workspace-Seitenleiste auf der linken Seite enthält die Navigation über alle deine Formulare hinweg.</p>

<p>
  Neben Veröffentlichen sitzt die <strong>Problemanzeige</strong>, eine Ampel für die Bereitschaftsprüfung: grün, wenn das Formular bereit
  ist, gelb bei Warnungen, rot bei Fehlern. Klicke darauf, um zu sehen, was sie gefunden hat — jeder Eintrag verlinkt zu der Stelle, an der
  du ihn behebst. Fehler blockieren die Veröffentlichung. Warnungen nicht, aber Formstep fragt zuerst nach und bietet an, sie für dich zu
  beheben. <a href="/de/building-forms/publish-checks">Veröffentlichungsprüfungen</a> listet jeden Befund und wie du ihn behebst.
</p>

<h2 id="cover-logo">Titelseite und Logo</h2>
<p>
  Über dem Formulartitel verwendest du <strong>Titelseite hinzufügen</strong> und <strong>Logo hinzufügen</strong>. Die Auswahl hat vier
  Tabs — <strong>Hochladen</strong> (PNG, JPG oder WebP bis zu 5&nbsp;MB), <strong>Farben</strong> für eine einfarbige Fläche,{' '}
  <strong>Unsplash</strong> und <strong>Icons</strong>. Ziehe eine Titelseite nach oben oder unten, um sie neu zu positionieren. Nur Uploads
  zählen zu deinem Speicherplatz.
</p>

<h2 id="adding-blocks">Eine Frage oder Inhalt hinzufügen</h2>

  <p>
    Klicke auf eine leere Zeile in der Arbeitsfläche und tippe <kbd>/</kbd> — oder drücke <kbd>Cmd/Ctrl + /</kbd> —, um das Blockmenü zu
    öffnen. Tippe weiter, um zu filtern. Vier Kategorien, in dieser Reihenfolge:
  </p>
  <ul>
    <li>
      <strong>Basisblöcke</strong> — Überschrift 1–3, Aufzählungsliste, Nummerierte Liste
    </li>
    <li>
      <strong>Formularfelder</strong> — jeder Fragetyp, von Texteingabe bis Zahlung und „Termin planen"
    </li>
    <li>
      <strong>Layout</strong> — Tabelle, 2 Spalten, Wiederholungsgruppe, Logik, Verstecktes Feld, Berechnetes Feld, Seitenumbruch,
      Dankesseite
    </li>
    <li>
      <strong>Medien</strong> — Bild, YouTube-Einbettung, Google Maps-Einbettung, Beliebiges einbetten
    </li>
  </ul>
  <p>
    Das Menü bietet nur an, was an der Cursorposition passt: keine Fragen oder Logik auf einer Dankesseite, keine nur für die Wurzelebene
    gedachten Blöcke innerhalb einer Spalte. Den vollständigen Katalog findest du unter{' '}
    <a href="/de/building-forms/field-types">Fragetypen</a>, und was der Ziehpunkt bietet, unter{' '}
    <a href="/de/building-forms/form-structure#block-menu">Formularstruktur → Block-Menü</a>.
  </p>

> 💡 **Beschreibe einfach, was du brauchst**
> <p>
>     Keine Lust, das Menü zu durchsuchen? Öffne den KI-Chat und sage{' '}
>     <em>&ldquo;füge eine Telefonnummer und eine Datumsauswahl hinzu&rdquo;</em>. Die Felder werden für dich eingefügt.
>   </p>

<h2 id="block-actions">Blöcke auswählen und ändern</h2>

<p>
  Klicke auf den Ziehpunkt eines Blocks, um sein Menü zu öffnen. Was es bietet, hängt vom Block ab: <strong>Umwandeln in</strong>,{' '}
  <strong>Optionen</strong>, <strong>Validierung</strong>, ausrichten, Wiederholungsgruppe erstellen, einfügen, duplizieren, verschieben,
  ausblenden und löschen.
</p>

<p>
  Wähle mehrere Blöcke aus, indem du ein Rechteck um sie ziehst, per Umschalt-Klick einen zweiten Block anklickst, um den Bereich zu
  übernehmen, oder indem du <kbd>Cmd/Ctrl+A</kbd> einmal für den Text des aktuellen Blocks und erneut für jeden Block drückst. Das
  Ziehpunkt-Menü wirkt dann auf die gesamte Auswahl: kompatible Blöcke in einen anderen Typ umwandeln, Fragen als Pflicht oder optional
  markieren, Titel aus- oder einblenden, eine Wiederholungsgruppe erstellen, duplizieren, verschieben, ausblenden oder löschen.
</p>

<h2 id="shortcuts">Tastenkombinationen</h2>

<p>Auf einem Mac verwendest du Cmd, unter Windows und Linux Ctrl.</p>

<h2 id="format-text">Text formatieren</h2>

  <p>
    Markiere einen beliebigen Text, um eine schwebende Symbolleiste zu sehen: Fett, Kursiv, Unterstrichen, Durchgestrichen, Inline-Code,
    Formel, Link, Schriftart, Schriftgröße und Farbe. Siehe{' '}
    <a href="/de/building-forms/content-blocks#text-formatting">Inhaltsblöcke → Textformatierung</a> für die vollständige Liste.
  </p>

<h2 id="pages-columns">Seiten &amp; Spalten</h2>

  <p>
    Formulare können eine einzelne Seite sein oder in viele aufgeteilt werden. Füge einen <strong>Seitenumbruch</strong> ein, um einen
    mehrstufigen Ablauf mit einem Fortschrittsbalken zu erstellen, und <strong>2 Spalten</strong>, um Blöcke nebeneinander zu platzieren.
    Beide verhalten sich wie jeder andere Block — ziehe sie zum Neuanordnen, lösche sie über das Block-Menü. Siehe{' '}
    <a href="/de/building-forms/form-structure">Formularstruktur</a> für die vollständige Anleitung.
  </p>

<h2 id="translate">Übersetzen</h2>

  <p>
    Der Tab <strong>Übersetzen</strong> öffnet einen nebeneinander angeordneten Editor für jede sichtbare Zeichenkette in deinem Formular.
    Füge Sprachen hinzu, übersetze jede Frage und veröffentliche. Siehe{' '}
    <a href="/de/building-forms/translating-form-content">Formularinhalte übersetzen</a> für die vollständige Anleitung.
  </p>

<h2 id="ai-chat">KI-Chat</h2>

  <p>
    Die schwebende Schaltfläche unten rechts öffnet den <strong>KI-Chat</strong> — einen Assistenten, der dein Formular schreiben, prüfen
    und bearbeiten kann. Wähle eine Startvorlage oder beschreibe einfach, was du möchtest. Die Nutzung wird von deinem KI-Kreditsaldo
    abgezogen, der über der Eingabe angezeigt wird.
  </p>

<h2 id="theme">Design</h2>

  <p>
    Die Schaltfläche <strong>Design</strong> (Paletten-Symbol) öffnet ein angedocktes Panel mit einem Hell-/Dunkel-Modus-Umschalter,
    voreingestellten Designs und Steuerelementen für Schriftarten, Farben, Eingabefelder, Auswahlmöglichkeiten, Schaltflächen und mehr nach
    Abschnitt. Voreinstellungen funktionieren in jedem Tarif; eigene Farben und Schriftarten erfordern Pro. Siehe{' '}
    <a href="/de/branding-domains/appearance-theming">Erscheinungsbild & Design</a> für Details.
  </p>

<h2 id="share">Teilen</h2>

  <p>
    Die Schaltfläche <strong>Teilen</strong> öffnet ein Panel mit zwei Kanälen. <strong>Öffentlicher Link</strong> enthält deine
    Freigabelinks — erstelle mehrere, um Kampagnen zu unterscheiden oder unterschiedliche Sprachen und Limits festzulegen — mit{' '}
    <strong>Einbettung</strong>, <strong>Popup</strong> und <strong>QR-Code</strong> neben der URL. <strong>Anfragen</strong> sendet das
    Formular jeweils an eine benannte Person. Siehe <a href="/de/sharing-publishing/sharing-embedding">Freigabelinks</a>,{' '}
    <a href="/de/sharing-publishing/embedding-popups">Einbetten &amp; Popups</a> und{' '}
    <a href="/de/requests/creating-requests">Einen Request erstellen</a>.
  </p>

<h2 id="settings">Einstellungen</h2>

  <p>
    Die Schaltfläche <strong>Einstellungen</strong> (Zahnrad-Symbol) öffnet ein Dialogfeld mit sechs Tabs. Für eine ausführliche Erläuterung
    siehe <a href="/de/building-forms/form-settings">Formulareinstellungen</a>.
  </p>
  <ul>
    <li>
      <strong>Allgemein</strong> — Formularname, Standardsprache, Branding-Umschalter
    </li>
    <li>
      <strong>Zugriff</strong> — Authentifizierung, Passwort, Bot-Schutz (nur öffentlicher Link)
    </li>
    <li>
      <strong>Antworten</strong> — Einreichungen schließen, Weiterleitungs-URL, Aufbewahrung; Bearbeitung nach dem Absenden und weitere
      Antwort erlauben für den öffentlichen Link
    </li>
    <li>
      <strong>E-Mail-Benachrichtigungen</strong> — Versanddomain, Benachrichtigung bei neuer Einreichung, Bestätigung für Befragte,
      Erinnerungen und die Request-Einladung
    </li>
    <li>
      <strong>Integrationen</strong> — GA4/Axiom-Analytics-Streaming; Google Sheets, Airtable, Notion, Slack, Discord, Linear, GitHub Issues
      und Webhook-Einreichungszustellung. Zapier und Make sind als „Demnächst" markiert
    </li>
    <li>
      <strong>Gefahrenbereich</strong> — alle Einreichungen löschen, Analysedaten löschen oder das Formular löschen
    </li>
  </ul>

<h2 id="preview-publish">Vorschau &amp; veröffentlichen</h2>

  <p>
    Wechsle zu <strong>Vorschau</strong>, um das Formular genau so auszufüllen, wie es ein Befragter tun würde: Logik greift, Variablen
    lösen auf, und du kannst Einträge zu Wiederholungsgruppen hinzufügen. Nichts wird gespeichert — Antworten leben nur im Speicher und
    werden beim Neuladen zurückgesetzt, und Uploads sowie Zahlungen sind simuliert. Klicke auf <strong>Veröffentlichen</strong>, wenn du
    zufrieden bist; Formstep hält deinen Entwurf getrennt, sodass Änderungen erst live gehen, wenn du veröffentlichst. Um Bearbeitungen vor
    der Veröffentlichung rückgängig zu machen, klicke auf <strong>Unveröffentlichte Änderungen rückgängig machen</strong>, um zur letzten
    veröffentlichten Version zurückzukehren.
  </p>

<h2 id="version-history">Veröffentlichungsverlauf</h2>

  <p>
    Die Schaltfläche <strong>Veröffentlichungsverlauf</strong> (Uhr-Symbol) listet jede veröffentlichte Version mit einem Zeitstempel auf
    und zeigt zu jeder die Tabs <strong>Formular</strong>, <strong>E-Mails</strong> und <strong>Übersetzungen</strong>, so wie sie bei der
    Veröffentlichung eingefroren wurden. Das Durchsuchen funktioniert in jedem Tarif. Für die Wiederherstellung brauchst du{' '}
    <em>Business</em>: Wähle eine Version, klicke auf <strong>Auf diese Version zurücksetzen</strong> und dann auf{' '}
    <strong>Als Entwurf öffnen</strong> (in den Editor laden, ohne zu veröffentlichen) oder <strong>Jetzt veröffentlichen</strong> (sofort
    live schalten).
  </p>

> ℹ️ **Schnellsuche**
> <p>
>     Drücke <kbd>Cmd K</kbd> (oder <kbd>Ctrl K</kbd>) außerhalb der Arbeitsfläche, um zu einem beliebigen Formular, Ordner, Workspace oder
>     einer Einstellung zu springen. Innerhalb der Arbeitsfläche fügen dieselben Tasten stattdessen einen Link ein.
>   </p>

<h2 id="next-steps">Nächste Schritte</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Formularstruktur & Seiten](/de/building-forms/form-structure) — Seiten, Spalten, Drag-and-Drop
  - [Fragetypen](/de/building-forms/field-types) — Jeder Fragetyp im Blockmenü
  - [Erscheinungsbild & Design](/de/branding-domains/appearance-theming) — Design, Titelseite, Logo, Dunkel-Modus
  - [Freigabelinks](/de/sharing-publishing/sharing-embedding) — Freigabelink-URLs erstellen und verwalten
</div>
