> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/formular-layouts-und-feldbreiten-gestalten.md).

# Formular-Layouts und Feldbreiten gestalten

Plane übersichtliche Formular- und Umfrage-Layouts, nutze Feldbreiten bewusst und prüfe Auswahlspalten zuverlässig auf Desktop und Mobilgerät.

## Was du mit dem Layout steuerst

Das Layout bestimmt die Grundordnung eines Formulars oder einer Umfrage: Stehen Felder untereinander, nebeneinander oder in einer kurzen gemeinsamen Zeile? Zusätzlich kannst du die Breite einzelner Felder als Anteil der verfügbaren Formularbreite festlegen.

Davon getrennt ist die Einstellung **Auswahl in Spalten verteilen**. Sie verteilt die Antworten *innerhalb eines Auswahlfelds* auf mehrere Spalten. Sie verändert weder die möglichen Antworten noch die gespeicherten Werte – nur deren sichtbare Anordnung.

Eine klare Anordnung senkt den Aufwand für Interessierte und hilft dem Team, vollständige, gut lesbare Antworten zu erhalten.

## Wann welches Layout passt

| Layout                           | Geeignet für                                                                                 | Wichtige Grenze                                                           |
| -------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| **Eine Spalte**                  | Längere Anfragen, Freitext, viele Pflichtfelder oder komplexe Fragen.                        | Benötigt mehr vertikalen Platz, bleibt aber am einfachsten lesbar.        |
| **Zwei Spalten**                 | Kurze, zusammengehörende Angaben wie Vorname und Nachname.                                   | Lange Feldnamen oder umfangreiche Antworten wirken schnell gedrängt.      |
| **Eine Zeile**                   | Sehr kurze Anmeldungen mit wenigen kompakten Feldern.                                        | Maximal fünf Felder in einer Zeile. Nicht für längere Eingaben verwenden. |
| **Auswahl in Spalten verteilen** | Mehrere kurze Auswahlmöglichkeiten in einer Einzelauswahl, Bildauswahl oder Mehrfachauswahl. | Die erlaubte Anzahl richtet sich nach dem übergeordneten Layout.          |

Nutze bei Unsicherheit zuerst eine Spalte. Zwei Spalten oder eine Zeile sind eine bewusste Verdichtung – keine Voraussetzung für ein professionelles Formular.

## Voraussetzungen

* Das Formular oder die Umfrage ist angelegt und kann im Editor geöffnet werden.
* Du weißt, welche Felder kurz genug sind, um nebeneinander zu stehen.
* Bei Auswahlfeldern sind die Antworttexte und gegebenenfalls Bilder bereits vorbereitet.
* Du kannst die Vorschau auf einem großen Bildschirm und einem Mobilgerät öffnen.
* Für bestehende ältere Formulare planst du nach einer Änderung einen eigenen Test ein.

## Formularlayout und Feldbreiten einstellen

1. Öffne **Websites & Leadgewinnung > Formulare & Umfragen** und wähle das Formular oder die Umfrage.
2. Öffne den Bearbeitungsmodus.
3. Wähle unter **Layout** eine Spalte, zwei Spalten oder eine Zeile.
4. Klicke nacheinander die Felder an, deren Größe du anpassen möchtest.
5. Lege bei **Feldbreite** den gewünschten Anteil der verfügbaren Formularbreite fest.
6. Speichere und öffne die Vorschau.
7. Wiederhole den Test auf dem Mobilgerät, bevor du die Seite veröffentlichst oder den Link teilst.

Die Feldbreite ist relativ zur verfügbaren Breite des Formulars. Ein Feld wirkt deshalb auf einem großen Bildschirm anders als auf einem schmalen Mobilbildschirm. Prüfe nicht nur, ob es „passt“, sondern ob Beschriftung, Eingabe und Fehlermeldung weiterhin gut lesbar bleiben.

## Auswahlantworten in Spalten verteilen

Diese Option steht bei folgenden Feldarten zur Verfügung:

* **Einzelauswahl**
* **Einzelauswahl mit Bildern**
* **Mehrfachauswahl**

So richtest du sie ein:

1. Klicke das gewünschte Auswahlfeld im Formular- oder Umfrage-Editor an.
2. Öffne die rechte Seitenleiste mit den Feldeinstellungen.
3. Aktiviere **Auswahl in Spalten verteilen**.
4. Trage die Anzahl der gewünschten Spalten ein.
5. Prüfe die Vorschau in allen relevanten Ansichten und speichere erst danach.

Die maximale Spaltenzahl für die Antworten hängt vom Formularlayout ab:

| Übergeordnetes Layout | Höchstzahl für Auswahlspalten |
| --------------------- | ----------------------------- |
| Eine Spalte           | 5                             |
| Zwei Spalten          | 2                             |
| Eine Zeile            | 5                             |

Wähle nicht automatisch die höchstmögliche Zahl. Zwei kurze Optionen pro Reihe können besser lesbar sein als fünf sehr schmale. Sobald Bezeichnungen umbrechen, Auswahlbilder zu klein werden oder die Auswahl auf dem Smartphone unklar wirkt, reduzierst du die Spaltenzahl.

Die Verteilung gilt auch in der mobilen Darstellung. Sie wird dort nicht automatisch zu einer einzelnen Liste zurückgesetzt. Kontrolliere deshalb bewusst, ob dieselbe Spaltenzahl auf dem schmalen Bildschirm noch schnell zu erfassen und zuverlässig anzutippen ist.

## Bestehende Formulare richtig behandeln

Bei älteren Formularen wird beim Öffnen im Editor abhängig von der bisherigen Inline-Einstellung automatisch ein ein- oder zweispaltiges Layout ausgewählt. Die bereits veröffentlichte Vorschau hält zunächst die frühere Darstellung ein.

Behandle jedes ältere Formular deshalb wie eine eigene Umstellung: Öffne es, prüfe die im Editor ausgewählte Anordnung und vergleiche Vorschau und veröffentlichte Seite. Speichere nicht nur deshalb, weil eine neue Layoutauswahl angezeigt wird. Entscheide bewusst, ob du die bestehende Darstellung beibehältst oder umstellst.

Die Einstellung für Auswahlspalten verändert ältere Formulare ebenfalls nicht rückwirkend. Sie wirkt erst, wenn du das konkrete unterstützte Auswahlfeld bearbeitest und die Änderung speicherst.

## Ergebnis prüfen

Nach dem Speichern kontrollierst du diese Punkte:

1. Die Felder erscheinen in der geplanten Reihenfolge und Breite.
2. Pflichtfelder, Hinweise und Fehlermeldungen bleiben sichtbar.
3. Auswahlmöglichkeiten sind klar voneinander getrennt und vollständig lesbar.
4. Auf dem Mobilgerät sind alle Eingaben und Auswahlflächen gut bedienbar.
5. Eine Testeinsendung lässt sich vollständig absenden und die Antworten stehen wie erwartet in der Einsendungsübersicht.

Teste besonders die Seiten, auf denen das Formular eingebettet ist. Eine passende Darstellung im Editor ist kein Ersatz für die echte Seitenvorschau.

## Grenzen und typische Fehler

### Zu viele Felder in einer Zeile

Eine einzelne Zeile ist auf maximal fünf Felder begrenzt. Schon darunter kann sie bei längeren Beschriftungen unverständlich werden. Teile die Eingaben auf mehrere Zeilen auf, statt Informationen schwer lesbar zu machen.

### Auswahlspalten fehlen in den Einstellungen

Prüfe, ob das ausgewählte Feld eine Einzelauswahl, Einzelauswahl mit Bildern oder Mehrfachauswahl ist. Die Option gehört nicht zum gesamten Formular, sondern nur zu diesen Auswahlfeldern.

### Die Auswahl wirkt auf dem Smartphone gedrängt

Reduziere zuerst die Zahl der Auswahlspalten. Erst wenn die Antwortbezeichnungen kurz und eindeutig bleiben, solltest du eine weitere Verdichtung beibehalten. Teste danach erneut in der Vorschau.

### Ein älteres Formular zeigt eine unerwartete Anordnung

Vergleiche die bisherige Veröffentlichung, die Editoransicht und die Vorschau. Ältere Inline-Einstellungen und die neuen Layoutoptionen müssen bewusst abgeglichen werden. Ändere nicht mehrere Felder gleichzeitig, wenn du die Ursache einer Abweichung nachvollziehen möchtest.

### Feldbreiten ergeben zusammen kein klares Bild

Passe Breiten schrittweise an und prüfe nach jeder Änderung. Ein ausgewogenes Layout ist wichtiger als eine exakt ausgenutzte Zeile.

## Praxisbeispiel: Anfrage nach einem Beratungstermin

Ein Team möchte in einer Anfrage zuerst Vorname, Nachname und E-Mail-Adresse abfragen. Die drei kurzen Angaben liegen im zweispaltigen Layout so, dass sie am Desktop kompakt bleiben. Das danach folgende Textfeld „Worum geht es?“ nimmt die ganze Breite ein.

Bei der Frage nach möglichen Terminen nutzt das Team eine Mehrfachauswahl mit kurzen Tagesbezeichnungen. Zunächst werden zwei Auswahlspalten eingerichtet. In der Mobilvorschau bleiben die Optionen eindeutig erkennbar, deshalb wird die Anordnung beibehalten.

Vor dem Teilen des Links sendet eine Testperson die Anfrage auf Desktop und Smartphone. Das Team prüft Felder, Fehlermeldungen, Auswahl und Einsendungsübersicht. Erst dann wird das Formular für Interessierte freigegeben.

Weiterführend: [Mobile Darstellung von Formularen und Umfragen gestalten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/mobile-darstellung-von-formularen-und-umfragen-gestalten).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/formular-layouts-und-feldbreiten-gestalten.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.