> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.flowella.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Best Practices für das Formulardesign von WhatsApp Flows

> Gestalten Sie HubSpot-Formulare, die sauber als WhatsApp Flows gerendert werden: Label-Limits, Auswahl des richtigen Fragetyps und Vermeidung abgeschnittener Labels auf dem iPhone.

Jedes Feld in Ihrem HubSpot-Formular wird zu einer Komponente in einem WhatsApp Flow, und Meta begrenzt, wie viel Label-Text jede Komponente anzeigen kann. Labels, die länger als das Limit sind, werden auf dem Telefon des Kunden abgeschnitten, am auffälligsten auf dem iPhone.

Der Flow wird trotzdem veröffentlicht, und die Antworten erreichen HubSpot weiterhin korrekt. Die einzige Folge ist visuell, weshalb dies leicht übersehen wird, bis ein echter Kunde das Formular öffnet.

Diese Seite behandelt, wie Sie HubSpot-Formulare erstellen, die auf jedem Gerät gut lesbar sind.

## Die Kurzfassung

<CardGroup cols={2}>
  <Card title="Labels kurz halten" icon="type">
    Zielen Sie auf 20 Zeichen oder weniger bei Dropdown- und Textfeldern. Das sind ungefähr drei kurze Wörter.
  </Card>

  <Card title="Radiobuttons für kurze Listen verwenden" icon="circle-dot">
    Unter acht Optionen liest sich besser als Radiobuttons denn als Dropdown und gibt Ihnen ein längeres Label.
  </Card>

  <Card title="Lange Fragen über das Feld setzen" icon="layers">
    Verwenden Sie ein Rich-Text-Element für die Frage und halten Sie das Feldlabel selbst kurz.
  </Card>

  <Card title="Auf einem iPhone testen" icon="smartphone">
    Android ist verzeihender. Wenn es sich auf dem iPhone korrekt liest, liest es sich überall korrekt.
  </Card>
</CardGroup>

## Was mit Ihren Feldlabels passiert

Jeder HubSpot-Feldtyp wird einer WhatsApp Flow-Komponente zugeordnet, und jede Komponente hat ihr eigenes Label-Kontingent. Die meistgenutzten Felder haben das knappste Kontingent.

| HubSpot-Feld               | Wird gerendert als     | Label-Kontingent        |
| -------------------------- | ---------------------- | ----------------------- |
| Dropdown-Auswahl           | Dropdown               | 20 Zeichen              |
| Einzeiliger Text           | Texteingabe            | 20 Zeichen              |
| Mehrzeiliger Text          | Textbereich            | 20 Zeichen              |
| Radio-Auswahl              | Radiobuttons           | 30 Zeichen              |
| Mehrere Kontrollkästchen   | Kontrollkästchengruppe | 30 Zeichen              |
| Datumsauswahl              | Datumsauswahl          | 40 Zeichen              |
| Einzelnes Kontrollkästchen | Opt-in                 | 120 Zeichen             |
| Rich-Text                  | Rich-Text              | Keine praktische Grenze |

Options-Labels innerhalb eines Dropdowns, einer Radiogruppe oder einer Kontrollkästchengruppe erhalten jeweils 30 Zeichen, mit 300 Zeichen für eine optionale Beschreibung darunter.

<Note>
  Dies sind Richtlinien und keine harten Grenzen. Metas eigener Flow-Builder zeigt eine Warnung, keinen Fehler, und ein Flow mit langen Labels validiert und veröffentlicht normal. Nichts ist kaputt, und keine Daten gehen verloren. Das Label wird einfach auf dem Bildschirm gekürzt.
</Note>

## Warum es auf einem Telefon gut aussieht und auf einem anderen falsch

Die oben genannten Zeichenzahlen sind eine Richtlinie, kein genauer Schwellenwert. Was tatsächlich entscheidet, ob ein Label abgeschnitten wird, ist, wie viel Platz der Text hat, nachdem das Gerät seinen Anteil für Abstände, das Chevron in einem Dropdown und die eigene Schriftgrößeneinstellung des Kunden genommen hat.

Das variiert stark. Dieselbe 33-Zeichen-Frage kann auf einem Android-Handy vollständig gerendert werden, ihr letztes Wort auf einem anderen verlieren und auf einem iPhone mitten im Wort in zwei Zeilen umgebrochen werden.

Die praktischen Konsequenzen:

* **Das iPhone ist die strikteste Oberfläche.** Entwerfen Sie dafür, und der Rest folgt.
* **Das Testen auf einem Gerät reicht nicht aus.** Ein Formular, das auf Ihrem eigenen Telefon korrekt aussieht, kann für einen großen Teil Ihres Publikums dennoch abgeschnitten werden.
* **Nicht-lateinische Schriften und breite Zeichen gehen früher aus.** Wenn Sie auf Arabisch, Hindi, Thailändisch oder Türkisch sammeln, behandeln Sie die obigen Zeichenzahlen als großzügig und zielen Sie kürzer.

## Den richtigen Fragetyp wählen

Die meisten Abschneideprobleme entstehen durch die Verwendung eines Dropdowns, wo ein Dropdown nie das richtige Steuerelement war.

<AccordionGroup>
  <Accordion title="Zwei bis sieben Optionen: Radiobuttons verwenden">
    Setzen Sie das Feld in HubSpot auf **Radio-Auswahl**. Sie erhalten ein 30-Zeichen-Label statt 20, das Label sitzt als Textblock über den Optionen, der umbricht, anstatt in das Steuerelement gequetscht zu werden, und der Kunde antwortet mit einem Tap statt Öffnen, Scrollen, Auswählen, Schließen.

    Dies ist Metas eigene Empfehlung und löst die Mehrheit der abgeschnittenen Labels von selbst.
  </Accordion>

  <Accordion title="Acht oder mehr Optionen: Dropdown verwenden">
    Lange Listen gehören in ein Dropdown. Eine Länderliste oder ein Produktkatalog als zwanzig Radiobuttons ist eine Wand aus Text.

    Ein Dropdown fasst bis zu 200 Optionen. Radio- und Kontrollkästchengruppen sind auf 20 begrenzt, sodass alles Längere unabhängig davon, wie das Label lautet, ein Dropdown sein muss.
  </Accordion>

  <Accordion title="Mehrere Antworten: Kontrollkästchen verwenden">
    **Mehrere Kontrollkästchen** in HubSpot wird zu einer Kontrollkästchengruppe, mit demselben 30-Zeichen-Label-Kontingent wie Radiobuttons und derselben Obergrenze von 20 Optionen.
  </Accordion>

  <Accordion title="Ja oder Nein: Radiobuttons, nicht Dropdown">
    Ein Zwei-Optionen-Dropdown ist der schlechteste Fall: das engste Label-Kontingent auf der kürzestmöglichen Liste und zwei Taps, um eine Frage zu beantworten, die einen verdient.
  </Accordion>
</AccordionGroup>

## Labels schreiben, die passen

Ein WhatsApp Flow ist eine Konversation, kein Papierformular. Kurze Labels lesen sich hier besser, auch wenn Platz für mehr wäre.

| Anstelle von                                               | Versuchen Sie     |
| ---------------------------------------------------------- | ----------------- |
| Was ist Ihre bevorzugte Kontaktmethode?                    | Kontaktmethode    |
| An welchen unserer Dienstleistungen sind Sie interessiert? | Dienstleistung    |
| Was ist Ihr ungefähres Jahresbudget?                       | Jahresbudget      |
| Bitte wählen Sie Ihr bevorzugtes Termin-Datum              | Bevorzugtes Datum |

Einige Regeln, die Labels knapp halten, ohne Bedeutung zu verlieren:

* Lassen Sie das höfliche Beiwerk weg. „Bitte wählen Sie Ihr" und „Was ist Ihr" tragen auf einem Telefon nichts bei.
* Verwenden Sie ein Substantiv, keine Frage, wo immer die Antwort aus den Optionen offensichtlich ist.
* Verschieben Sie Details in den Hilfetext des Felds oder eine Optionsbeschreibung anstatt in das Label.
* Setzen Sie gemeinsamen Kontext in die Bildschirmüberschrift, anstatt ihn in jedem Label zu wiederholen.

## Wenn die Frage wirklich lang sein muss

Einige Fragen können nicht gekürzt werden, ohne zu ändern, was Sie fragen. Eine Qualifikationsfrage, eine Einwilligungsfrage oder alles mit einer rechtlichen Formulierungsanforderung benötigt seinen vollen Text.

Setzen Sie dafür die Frage über das Feld und halten Sie das Feldlabel minimal:

<Steps>
  <Step title="Rich-Text-Element hinzufügen">
    Ziehen Sie im HubSpot-Formular-Editor ein Rich-Text-Element an die richtige Stelle und geben Sie die vollständige Frage ein.
  </Step>

  <Step title="Das Feld darunter hinzufügen">
    Platzieren Sie das Dropdown, die Radiogruppe oder das Textfeld direkt darunter.
  </Step>

  <Step title="Dem Feld ein minimales Label geben">
    Ein einzelner Punkt funktioniert. Die Frage steht bereits darüber, sodass das Label keine Arbeit leistet.
  </Step>

  <Step title="Für jede lange Frage wiederholen">
    Wechseln Sie Rich-Text und Feld im Formular ab, damit das Muster konsistent bleibt.
  </Step>
</Steps>

Das Ergebnis liest sich als Frage mit einem Antwortsteuerelement darunter, was Kunden erwarten, und es rendert identisch auf jedem Gerät, weil der Rich-Text keine Längenbeschränkung hat.

<Warning>
  Verwenden Sie dieses Muster nur, wo Sie es benötigen. Jedes Rich-Text-Element ist eine zusätzliche Komponente, und ein Bildschirm fasst maximal 50. Bei sehr großen Formularen behält Flowella jede Eingabe und entfernt Rich-Text-Blöcke vom Ende des Bildschirms, um unter Metas Obergrenze zu bleiben, sodass einige Fragetexte möglicherweise nicht auf dem Bildschirm erscheinen. Das Vermischen des Musters in einem Formular, in dem die meisten Labels bereits kurz sind, macht das Layout auch uneben.
</Warning>

<Note>
  Wenn Sie bereits HubSpot-Formulare mit diesem Muster haben, **synchronisieren** Sie sie von der [Flows-Detailseite](/de/app/flows#form-detail) neu, um den Rich-Text an Meta zu veröffentlichen. Sync-Läufe vor dieser Änderung erfassten nur Feldlabels, sodass der Fragetext im Flow fehlte.
</Note>

## Wie viele Fragen stellen

Die Abschlussrate sinkt stark, je länger Formulare werden, und WhatsApp ist eine ungeduldigere Oberfläche als eine Webseite.

* **Drei oder vier Fragen pro Formular** sind ein gutes Ziel für einen ersten Kontakt. Fragen Sie den Rest später in der Konversation.
* **Eine Aufgabe pro Bildschirm.** Wenn Sie eine Adresse und eine Lieferpräferenz erfassen, verwenden Sie zwei Bildschirme.
* **Höchstens zehn Optionen pro Bildschirm.** Mehr als das, und Kunden hören auf zu lesen und beginnen zu raten.
* **Lange Formulare in zwei teilen.** Ein kurzes qualifizierendes Formular gefolgt von einem bedingten zweiten Formular schlägt in der Regel ein langes und lässt Sie auf der ersten Antwort verzweigen.

Siehe [Lead-Erfassung und Qualifizierung](/de/hubspot/workflows/lead-capture-qualify) für ein ausgearbeitetes Beispiel des Zwei-Formulare-Musters.

## Vor der Synchronisierung

<Steps>
  <Step title="Lesen Sie jedes Label so, wie es erscheinen wird">
    Zählen Sie die Zeichen in Ihren Dropdown- und Textfeld-Labels. Alles über 20 ist gefährdet.
  </Step>

  <Step title="Prüfen Sie Ihre Feldtypen">
    Jedes Dropdown mit weniger als acht Optionen ist ein Kandidat für Radiobuttons.
  </Step>

  <Step title="Synchronisieren Sie das Formular und öffnen Sie es in Meta">
    Synchronisieren Sie den Flow von der [Flows](/de/app/flows)-Detailseite und öffnen Sie ihn in der Meta Business Suite. Die Flow-Builder-Vorschau markiert Labels, die wahrscheinlich gekürzt werden.
  </Step>

  <Step title="Senden Sie es an ein echtes iPhone">
    Die Builder-Vorschau ist eine Richtlinie. Ein Handy ist der einzige echte Test, und das iPhone ist das strikteste.
  </Step>

  <Step title="Prüfen Sie WhatsApp Web, wenn Ihr Publikum es verwendet">
    Steuerelemente werden auf einem Laptop anders gerendert. Siehe [WhatsApp Web und Desktop](/de/app/whatsapp-web-desktop).
  </Step>
</Steps>

## Verwandt

<CardGroup cols={2}>
  <Card title="Flows" icon="file-text" href="/de/app/flows">
    Synchronisieren Sie Ihre HubSpot-Formulare mit WhatsApp Flows und prüfen Sie deren Status.
  </Card>

  <Card title="WhatsApp Web und Desktop" icon="monitor" href="/de/app/whatsapp-web-desktop">
    Wie Flows gerendert werden, wenn Kunden von einem Laptop antworten.
  </Card>

  <Card title="Workflow-Anleitungen" icon="book-open" href="/de/hubspot/workflow-guides">
    End-to-End-Rezepte, die diese Muster in die Praxis umsetzen.
  </Card>

  <Card title="HubSpot-Sync-Fehler" icon="bug" href="/de/troubleshooting/hubspot-sync-failures">
    Diagnostizieren Sie Formulare, die nicht synchronisiert werden, oder Übermittlungen, die nie ankommen.
  </Card>
</CardGroup>

Meta veröffentlicht die zugrunde liegenden Einschränkungen in seiner eigenen Dokumentation. Für die vollständige Komponentenreferenz siehe [WhatsApp Flows-Komponenten](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/components), und für Metas Designrichtlinien siehe [Flows-Best-Practices](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/bestpractices).
