# Formular-Editor

Der Formular-Editor ist wie ein digitaler Baukasten für Fragebögen oder Formulare. Stellen Sie sich vor, Sie erstellen ein mehrseitiges Dokument: Sie fügen Abschnitte hinzu, ordnen Inhalte an und sehen sofort das fertige Ergebnis – ohne technische Vorkenntnisse.

Mit dem visuellen Editor können Sie professionelle Formulare erstellen, ohne programmieren zu müssen. Elemente lassen sich per Maus ziehen und an der gewünschten Stelle platzieren.

## Der Editor im Überblick

Wenn Sie den Formular-Editor öffnen, sehen Sie drei Bereiche:

### **Das Drei-Bereiche-Layout**

{% tabs fullWidth="false" %}
{% tab title="Elemente-Menü (Links)" %}
**Ihr Baukasten mit allen verfügbaren Elementen**

Hier finden Sie alle Bausteine für Ihr Formular:

**Grundlagen (Dateneingabe):**

* **Freitext** – Kurze Texteingaben wie Name oder E-Mail
* **Zahl** – Numerische Eingaben wie Alter oder Bewertungen
* **Datum** – Datumsauswahl mit Kalenderansicht
* **Langer Text** – Mehrzeilige Eingaben für Kommentare
* **Ja/Nein** – Umschalter für binäre Entscheidungen

**Erweitert (Auswahl):**

* **Mehrfachauswahl** – Ankreuzfelder für mehrere Optionen
* **Auswahlliste** – Ausklappmenü für Einzelauswahl
* **Einzelauswahl (Optionen)** – Optionsfelder für Einzelauswahl

**Struktur:**

* **Überschrift** – Abschnittstitel und Gliederung
* **Beschreibung** – Erklärende Texte und Hinweise
  {% endtab %}

{% tab title="Arbeitsfläche (Mitte)" %}
**Ihr Arbeitsbereich – hier entsteht das Formular**

Die Arbeitsfläche zeigt Ihr Formular genau so, wie es später die Ausfüllenden sehen werden:

**Funktionen:**

* **Echtzeitvorschau** – Sofortige Darstellung aller Änderungen
* **Einfügezonen** – Rechteckige Bereiche zeigen, wo Elemente eingefügt werden können
* **Element-Auswahl** – Klick auf ein Element öffnet die Konfiguration
* **Reihenfolge ändern** – Elemente nach oben/unten verschieben

**Navigation bei mehrseitigen Formularen:**

* **Seiten-Beschriftung** am oberen Rand
* **Vorschau-Navigation** zum Testen des Nutzerflusses
* **Fortschrittsanzeige** für bessere Übersicht

{% hint style="success" %}
**Vorteil:** Was Sie hier sehen, bekommen auch Ihre Nutzer zu sehen – ohne Überraschungen bei der Veröffentlichung.
{% endhint %}
{% endtab %}

{% tab title="Konfiguration (Rechts)" %}
**Ihr Werkzeugkasten für Details und Einstellungen**

Sobald Sie ein Element auswählen, öffnet sich hier das Konfigurationsmenü rechts:

**Allgemeine Einstellungen (für alle Elementtypen):**

* **Feldtitel** – Die sichtbare Beschriftung oder Frage
* **Beschreibung** – Optionaler Hilfetext unter dem Feld
* **Pflichtfeld** – Element als erforderlich markieren
* **Versteckt** – Element zunächst ausblenden (standardmäßig versteckt)

**Spezifische Einstellungen (je nach Elementtyp):**

* **Validierung** – Regeln für gültige Eingaben
* **Optionen** – Auswahlmöglichkeiten konfigurieren
* **Format** – Darstellung und Eingabeformat

{% hint style="warning" %}
**Wichtig:** Denken Sie daran, Ihre Änderungen manuell zu speichern. Strukturelle Änderungen nach der Veröffentlichung können die Datenintegrität beeinträchtigen.
{% endhint %}
{% endtab %}
{% endtabs %}

## Schritt-für-Schritt: Ihr erstes Formular

Lassen Sie uns gemeinsam ein einfaches Formular erstellen: Eine Bürgerbefragung zur Zufriedenheit mit öffentlichen Verkehrsmitteln

{% stepper %}
{% step %}
**Formular starten**

1. **Navigieren Sie zu Formularen:**
   * Öffnen Sie eine Lösung
   * Klicken Sie in der Seitenleiste auf **Formulare**
2. **Neues Formular erstellen:**
   * Im Fenster klicken Sie auf das **+** Symbol
3. **Grundinformationen eingeben:**
   * **Name:** "ÖPNV-Zufriedenheit 2024"
   * **Beschreibung:** "Befragung zur Verbesserung des öffentlichen Nahverkehrs"
   * Klicken Sie **"Erstellen"**

**Ergebnis:** Der Editor öffnet sich mit einem leeren Formular. Sie sehen die drei Bereiche und können loslegen.

{% hint style="info" %}
**Was passiert im Hintergrund:** Polyteia erstellt automatisch einen neuen Datensatz, der später alle Antworten sammelt. Der Name des Datensatzes basiert auf Ihrem Formularnamen.
{% endhint %}
{% endstep %}

{% step %}
**Begrüßung und Struktur anlegen**

1. **Überschrift hinzufügen:** "Ihre Meinung zum öffentlichen Nahverkehr"
2. **Beschreibung ergänzen:** "Helfen Sie uns dabei, Bus und Bahn zu verbessern. Die Befragung dauert etwa 5 Minuten und wird anonymisiert ausgewertet."
3. **Abschnittsüberschrift:** "Grundinformationen"
   {% endstep %}

{% step %}
**Erste Felder hinzufügen**

1. **Altersgruppe:** Einzelauswahl (Optionen) mit "18-25", "26-40", "41-60", "Über 60 Jahre" → Pflichtfeld
2. **Wohnort:** Auswahlliste mit Stadtteilen → Pflichtfeld
3. **Nutzungshäufigkeit:** Einzelauswahl mit "Täglich" bis "Nie oder fast nie" → Pflichtfeld
   {% endstep %}

{% step %}
**Bewertungen und Feedback sammeln**

1. **Abschnittsüberschrift:** "Ihre Bewertung"
2. **Gesamtzufriedenheit:** Einzelauswahl von "Sehr zufrieden" bis "Sehr unzufrieden" → Pflichtfeld
3. **Positive Aspekte:** Mehrfachauswahl (Pünktlichkeit, Sauberkeit, Personal, etc.) → Optional
4. **Verbesserungsvorschläge:** Langer Text → Optional
   {% endstep %}

{% step %}
**Formular abschließen und testen**

1. **Abschluss:** Überschrift "Vielen Dank!" + Beschreibung mit Dank für die Teilnahme
2. **Optionale Kontaktdaten:** Freitext für E-Mail-Adresse → Optional
3. **Datenschutz-Hinweis:** Beschreibung zur vertraulichen Behandlung
4. **Formular testen:** Klicken Sie auf "Vorschau" und testen Sie alle Felder und Validierungen
   {% endstep %}
   {% endstepper %}

{% hint style="success" %}
**Herzlichen Glückwunsch!** Sie haben Ihr erstes Formular erstellt.
{% endhint %}

## Erweiterte Editor-Funktionen

### **Mehrseitige Formulare erstellen**

Längere Formulare teilen Sie am besten auf mehrere Seiten auf – das macht das Ausfüllen angenehmer und übersichtlicher.

{% tabs %}
{% tab title="Neue Seite hinzufügen" %}
**Wann neue Seiten sinnvoll sind:**

* Bei mehr als 7-10 Feldern pro Seite
* Bei thematischen Wechseln (z.B. Grunddaten → Bewertung → Vorschläge)
* Bei komplexen Anträgen mit verschiedenen Bereichen

**So fügen Sie eine neue Seite hinzu:**

1. **Seite erstellen:**
   * Klicken Sie auf das **"+ Seite hinzufügen"** unten im Arbeitsbereich
2. **Seiteninhalte festlegen:**
   * Geben Sie eine Überschrift ein
   * Fügen Sie eine Beschreibung hinzu (optional)
3. **Navigation testen:**
   * Verwenden Sie die Vorschau
   * Prüfen Sie die "Weiter"/"Zurück"-Buttons
   * Achten Sie auf die Fortschrittsanzeige

{% hint style="info" %}
**Faustregel:** Pro Seite maximal 5-7 Felder oder ein thematisch zusammengehöriger Block. Nutzer sehen automatisch ihren Fortschritt.
{% endhint %}
{% endtab %}

{% tab title="Seiten organisieren" %}
**Logische Seitenaufteilung:**

**Seite 1: Begrüßung und Grunddaten**

* Erklärung des Zwecks
* Datenschutzhinweise
* Demografische Grunddaten (Alter, Wohnort, etc.)

**Seite 2-X: Hauptinhalt thematisch gruppiert**

* Je Themenbereich eine Seite
* Ähnliche Elementtypen zusammenfassen
* Von einfach zu komplex

**Letzte Seite: Abschluss**

* Optionale Zusatzfragen
* Kontaktdaten bei Bedarf
* Dankesnachricht

**Seiten verwalten:**

1. **Seiten löschen:**
   * Bewegen Sie die Maus über die gewünschte Seite
   * Klicken Sie auf das Papierkorb-Symbol rechts über der Seite
   * ⚠️ Achtung: Alle Elemente der Seite gehen verloren

**Fortschrittsanzeige:**

* Nutzer sehen ihren Fortschritt als Fortschrittsbalken
* Bereits ausgefüllte Seiten werden markiert
* Zurück-Navigation ist immer möglich
  {% endtab %}

{% tab title="Seitenübergänge optimieren" %}
**Benutzerfreundliche Übergänge:**

* **Vorschau der nächsten Seite:** Kurze Zusammenfassung und Zeitschätzung
* **Beispiel:** "Im nächsten Schritt bewerten Sie verschiedene Aspekte – ca. 3 Minuten."
* **Speicherhinweis:** "Ihre Antworten werden automatisch gespeichert"
* **Validierung:** Pflichtfelder müssen ausgefüllt sein, bevor "Weiter" funktioniert
  {% endtab %}
  {% endtabs %}

### **Drag-and-Drop Tipps**

**Elemente positionieren:**

* **Einfügezonen:** Rechteckige Bereiche zeigen, wo Elemente eingefügt werden können
* **Reihenfolge ändern:** Zieh-Symbol links am Element verwenden
* **Präzise platzieren:** Über, unter oder zwischen bestehenden Elementen

## Validierung und Fehlerbehebung

### **Automatische Prüfungen**

Das System prüft kontinuierlich auf:

* ❌ Formular ohne Felder
* ❌ Auswahllisten ohne Optionen
* ❌ Leere Überschriften oder Felder

### **Häufige Probleme**

**Auswahlliste ohne Optionen:** → Element anklicken → "Optionen" → Mindestens 2 Optionen hinzufügen

**Zu viele Pflichtfelder:** → Faustregel: Maximal 30-40% Pflichtfelder → Optionale Felder mit "(optional)" kennzeichnen

**Formular zu lang:** → Bei mehr als 10-12 Elementen: Neue Seite anlegen

### **Barrierefreiheit**

* **Beschreibende Feldtitel:** ❌ "Name" → ✅ "Ihr vollständiger Name"
* **Hilfreiche Beschreibungen:** Beispiele für erwartete Eingaben geben
* **Logische Reihenfolge:** Verwandte Felder nacheinander, wichtige Felder zuerst


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.polyteia.com/formulare/erstellen/formular-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.