> 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/schaltflachen-in-formularen-umfragen-und-quizzen-gestalten.md). # Schaltflächen in Formularen, Umfragen und Quizzen gestalten Gestalte Schaltflächen in Formularen, Umfragen und Quizzen mit einer einfarbigen Fläche oder einem Farbverlauf und prüfe die Darstellung. ## Welches Problem diese Einstellung löst Schaltflächen zeigen Besuchern, wie sie in einem Formular, einer Umfrage oder einem Quiz weitermachen: zum nächsten Schritt, zurück oder zum Absenden. Eine klare Beschriftung und eine gut lesbare Gestaltung verhindern, dass Besucher den entscheidenden Klick übersehen oder die Eingabe abbrechen. Im Editor kannst du für jede ausgewählte Schaltfläche eine einzelne Hintergrundfarbe oder einen Farbverlauf festlegen. Ein Farbverlauf verbindet zwei oder mehr Farben miteinander; dafür brauchst du keinen eigenen Code. Bestehende einfarbige Schaltflächen bleiben unverändert, bis du sie selbst umstellst. ## Wann eine einfarbige Fläche und wann ein Farbverlauf passt Eine **einfarbige Fläche** ist die ruhige, einfache Wahl. Sie eignet sich besonders für längere Formulare oder wenn die Schaltfläche unauffällig zum übrigen Auftritt passen soll. Ein **Farbverlauf** kann den nächsten Schritt stärker hervorheben und mehrere Farben aus dem visuellen Auftritt verbinden. Verwende ihn gezielt – nicht als Ersatz für eine klare Beschriftung. „Weiter“, „Termin anfragen“ oder „Anmeldung abschließen“ sagt Besuchern mehr als ein auffälliger Hintergrund allein. > **Entscheidungshilfe:** Gibt es auf der Seite eine einzige wichtige Aktion, kann ein zurückhaltender Farbverlauf sinnvoll sein. Gibt es mehrere gleichwertige Aktionen, hilft eine einfarbige, konsistente Gestaltung meist besser bei der Orientierung. ## Was du vorab brauchst * Ein Formular, eine Umfrage oder ein Quiz, das bereits im Editor geöffnet werden kann. * Die Berechtigung, das jeweilige Element zu bearbeiten und zu speichern. * Eine Beschriftung, die den nächsten Schritt eindeutig benennt. * Mindestens zwei passende Farben, falls du einen Farbverlauf verwenden möchtest. * Zeit für einen Test in der veröffentlichten Darstellung auf Desktop und Mobilgerät. ## Schaltfläche auswählen und Hintergrund festlegen 1. Öffne im Bereich **Websites und Leadgewinnung** das gewünschte Formular, die Umfrage oder das Quiz. 2. Wähle bei einem bestehenden Element das Menü mit den drei Punkten und anschließend **Bearbeiten**. 3. Klicke im Editor die Schaltfläche an, die du gestalten möchtest. 4. Öffne ihre Stileinstellungen. 5. Suche den Bereich **Schaltflächen-Hintergrund**. 6. Wähle **Einfarbig** für eine einzelne Farbe oder **Farbverlauf** für mehrere ineinander übergehende Farben. 7. Richte die gewählte Variante ein. 8. Öffne die Vorschau und speichere oder veröffentliche erst nach der Prüfung. Die Einstellung gilt für die ausgewählte Schaltfläche. Prüfe daher einzeln, ob auch Schaltflächen für „Zurück“, „Weiter“ oder „Absenden“ eine passende und unterscheidbare Gestaltung haben. ## Felder eines Farbverlaufs verstehen Nachdem du **Farbverlauf** ausgewählt hast, bestimmst du, wie die Farben auf der Schaltfläche ineinander übergehen. | Feld | Bedeutung | Wann sinnvoll | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | Verlaufsart | Legt fest, wie sich Farben verteilen. Zur Auswahl stehen ein gerader Verlauf, ein Verlauf von einem Mittelpunkt aus und ein kreisförmiger Verlauf entlang eines Winkels. | Ein gerader Verlauf wirkt meist am ruhigsten und ist ein guter Ausgangspunkt. | | Winkel | Steuert die Richtung bei Verlaufsarten, die eine Ausrichtung unterstützen. | Verändere den Winkel nur, wenn die Richtung den umgebenden Aufbau unterstützt. | | Farbpunkte | Jeder Farbpunkt legt eine Farbe und ihre Position im Übergang fest. Du kannst mehrere hinzufügen oder vorhandene anpassen. | Starte mit zwei Farben. Zusätzliche Farbpunkte sind nur sinnvoll, wenn der Übergang dadurch wirklich klarer wird. | | Vorschau | Zeigt die Auswirkung der Einstellungen im Formular, der Umfrage oder im Quiz. | Prüfe sie bei jeder Änderung, bevor du speicherst. | ### Die Verlaufsarten praktisch wählen * **Gerader Verlauf:** Die Farben gehen in einer klaren Richtung ineinander über, zum Beispiel von links nach rechts oder diagonal. Diese Variante ist für die meisten Schaltflächen am leichtesten lesbar. * **Verlauf vom Mittelpunkt:** Die Farben breiten sich von einem zentralen Punkt nach außen aus. Er kann stärker auffallen, sollte aber sparsam eingesetzt werden. * **Kreisförmiger Verlauf:** Die Farben folgen einem Verlauf um einen Mittelpunkt. Diese Variante eignet sich nur, wenn Beschriftung und Kontrast trotz der bewegteren Fläche klar bleiben. Ein Winkel ist nur bei unterstützten Verlaufsarten verfügbar. Wenn er nicht angezeigt wird, ist das für die gerade gewählte Art normal und keine Fehlermeldung. Im selben Gestaltungsbereich legst du die **Textfarbe** der Schaltfläche fest. Wenn deine Schaltfläche einen Untertext verwendet, gibt es dafür eine getrennte Untertextfarbe. Ändere diese Farben bewusst nach dem Hintergrund: Beide Textzeilen müssen über jedem Teil des Verlaufs klar lesbar bleiben. ## Lesbarkeit und Zugänglichkeit prüfen Eine Schaltfläche muss vor allem lesbar und eindeutig sein. Prüfe deshalb nicht nur, ob die Farben zum Auftritt passen: * Ist der Text klar vom Hintergrund zu unterscheiden? * Bleibt die Beschriftung vollständig sichtbar, auch auf einem kleinen Bildschirm? * Ist die Schaltfläche groß genug, um sie zuverlässig anzutippen? * Erkennen Besucher den nächsten Schritt allein an der Beschriftung? * Ist die Schaltfläche von weniger wichtigen Elementen unterscheidbar, ohne andere Inhalte zu überdecken? Vermeide sehr helle Schrift auf einem hellen Teil des Verlaufs und sehr kleine Texte. Wenn der Kontrast bei einem Farbpunkt schwächer wird, ändere zuerst die Farben oder wähle wieder eine einfarbige Fläche. ## Ergebnis vollständig testen 1. Speichere die Gestaltung im Editor. 2. Öffne die Vorschau und prüfe die ausgewählte Schaltfläche bei der normalen Ansicht. 3. Wechsle in die mobile Ansicht und kontrolliere Text, Größe und Abstand erneut. 4. Öffne die veröffentlichte Formular-, Umfrage- oder Quizseite in einem privaten Browserfenster. 5. Führe den Ablauf bis zum Klick auf die Schaltfläche aus. 6. Prüfe, ob der Klick weiterhin zum erwarteten nächsten Schritt führt. 7. Wiederhole den Test für jede Schaltfläche, deren Gestaltung du verändert hast. Die Vorschau ist eine schnelle Gestaltungskontrolle. Die veröffentlichte Testansicht ist zusätzlich wichtig, weil dort der gesamte Ablauf und die tatsächliche Bildschirmgröße zusammenkommen. ## Typische Fehler und ihre Lösung ### Die neue Gestaltung erscheint nicht Prüfe, ob du die richtige Schaltfläche im richtigen Formular, in der richtigen Umfrage oder im richtigen Quiz ausgewählt hast. Speichere im Editor und lade die veröffentlichte Seite neu. Bestehende einfarbige Schaltflächen wechseln nicht automatisch zu einem Farbverlauf. ### Der Verlauf wirkt unruhig Entferne zusätzliche Farbpunkte und beginne mit zwei Farben. Ein gerader Verlauf ist meist leichter zu beurteilen als die anderen Varianten. Wenn der Inhalt dadurch nicht klarer wird, verwende eine einfarbige Fläche. ### Die Beschriftung ist schwer lesbar Wähle Farben mit stärkerem Kontrast oder passe die Textgestaltung an. Prüfe den Text über die gesamte Fläche des Verlaufs, nicht nur an einer Stelle. ### Die Schaltfläche sieht im Editor gut aus, auf dem Mobilgerät aber nicht Wechsle gezielt in die mobile Ansicht. Prüfe die Zeilenumbrüche, die Größe der Antippfläche und die Lesbarkeit. Kürze bei Bedarf die Beschriftung, ohne die Handlung unklar zu machen. ### Es werden weitergehende Gestaltungseffekte erwartet Diese Einstellung deckt die eingebauten Hintergrundoptionen für Schaltflächen in Formularen, Umfragen und Quizzen ab. Für besondere Layouts außerhalb dieser sichtbaren Bedienelemente ist hier kein zusätzlicher Ablauf belegt. Plane solche Anforderungen getrennt und teste sie vor einer Veröffentlichung. ## Praxisbeispiel: Anfrage übersichtlich abschließen Ein Studio verwendet in einer Umfrage die Schaltfläche „Termin anfragen“. Das Team wählt einen geraden Verlauf mit zwei Farben aus dem eigenen Auftritt und lässt die Schrift gut lesbar. Danach prüft es die Vorschau auf Desktop und Mobilgerät. Anschließend sendet eine Person die Umfrage als Test ab. Sie kontrolliert, dass die Schaltfläche gut zu treffen ist, den erwarteten Abschluss auslöst und die Bestätigung nach der Einsendung erscheint. Erst danach veröffentlicht das Team die Gestaltung für Besucher. Weiterführend: [Bestätigung nach einer Einsendung gestalten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/bestatigung-nach-einer-einsendung-gestalten)