> 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/formulare-umfragen-und-quizze-mit-css-gestalten.md). # Formulare, Umfragen und Quizze mit CSS gestalten Passe Formulare, Umfragen und Quizze mit kleinen CSS-Regeln gezielt an, nutze zuerst die eingebauten Gestaltungseinstellungen und teste jede Änderung auf Desktop und Mobilgerät. ## Erst die eingebauten Einstellungen nutzen Für Abstand, Farben, Schrift und grundlegende Gestaltung verwendest du zuerst die Einstellungen im jeweiligen Builder. Eigenes CSS ist nur sinnvoll, wenn eine gewünschte visuelle Anpassung dort nicht verfügbar ist. CSS verändert das Aussehen, nicht die Felder, Logik oder Datenübernahme. Teste jede Regel zuerst an einer Kopie oder einem klar gekennzeichneten Testformular. Kleine, gezielte Regeln sind wartbarer als ein großer, unübersichtlicher Block. ## CSS direkt im Formular hinterlegen 1. Öffne das Formular, die Umfrage oder das Quiz im Builder. 2. Wechsle zu **Stile > Erweitert > Eigenes CSS**. 3. Füge eine kleine Regel ein. 4. Speichere und veröffentliche den Entwurf. 5. Prüfe Vorschau und Testeinsendung auf Desktop und Mobilgerät. Zum Beispiel macht dieser Code Eingabefelder klarer und gibt dem Absende-Button eine ruhige, einheitliche Form: ```css input, textarea, select { border: 1px solid #D0D5DD; border-radius: 8px; padding: 10px; } button[type="submit"] { background: #1A73E8; color: #FFFFFF; border: none; border-radius: 8px; padding: 12px 18px; } ``` Ändere Farben und Abstände nur bewusst und prüfe den Kontrast. Verwende zusätzliche Hervorhebungen sparsam; sie können die spätere Pflege erschweren. ## Unterschied zwischen Formular- und Seiten-CSS Wenn ein Formular in einer Website oder einem Funnel eingebettet ist, kannst du in den Seiteneinstellungen CSS für den **umgebenden Bereich** hinterlegen, etwa für Abstand, Hintergrund oder Ausrichtung. Die Felder und Schaltflächen innerhalb des eingebetteten Formulars lassen sich dort nicht zuverlässig gestalten, weil das Formular in einem eigenen eingebetteten Bereich geladen wird. Für Felder, Labels und den Absende-Button hinterlegst du CSS deshalb direkt im Formular-, Umfrage- oder Quiz-Builder. ## Sicher testen und Fehler beheben 1. Speichere und veröffentliche die Änderung. 2. Öffne die Seite in einem privaten Browserfenster oder aktualisiere ohne Cache. 3. Prüfe breite und schmale Bildschirmansichten. 4. Sende eine Testeinsendung ab. 5. Entferne die letzte Regel wieder, wenn ein Element nicht mehr lesbar oder bedienbar ist. Wenn eine Änderung nicht sichtbar wird, prüfe zuerst den richtigen Ablageort: Formularelemente werden im Formular selbst gestaltet, der Seitenrahmen in der Seite. Vermeide unnötig starke Überschreibungen und CSS-Regeln, die auf technische Klassennamen angewiesen sind; diese können sich bei einer Aktualisierung ändern. ## Praxisbeispiel Ein Team möchte Eingabefelder mit etwas mehr Innenabstand und einen deutlich sichtbaren Absende-Button. Es passt diese beiden Eigenschaften direkt im Kontaktformular an, testet die mobile Ansicht und sendet eine Testeinsendung. Der Seitenhintergrund wird getrennt in der Funnel-Seite gestaltet. Dadurch bleibt klar, welche Regel für den Rahmen und welche für das Formular selbst zuständig ist. ## Sicherheitsprüfung für eigenen HTML-Code verstehen In Formularen, Umfragen und Quizzen prüft der Editor eigenen HTML-Code bereits beim Eingeben. Erkennt er einen unsicheren Codebestandteil, erscheint unter dem Editor ein Hinweis und **Speichern** bleibt deaktiviert. Entferne oder ersetze den beanstandeten Teil, bevor du weiterarbeitest. Die Prüfung schützt besonders vor Code, der auf Anmeldedaten oder private Browserdaten zugreifen könnte. Dazu gehören direkter Zugriff auf Cookies, das Ausführen zusammengesetzter Textbefehle, zeitgesteuerte Befehle als Text und das Auslesen lokal gespeicherter Daten. Reines HTML, normale Gestaltung und sichere Funktionsaufrufe können weiterhin verwendet werden. ### Wenn dein Code nicht gespeichert werden kann 1. Lies die Fehlermeldung direkt unter dem HTML-Editor. 2. Entferne den beanstandeten Teil statt ihn zu verschleiern. 3. Nutze für wiederkehrende Abläufe eine normale Funktion statt eines Textbefehls. 4. Speichere erneut und prüfe die Vorschau. 5. Sende eine Testeinsendung ab, bevor du veröffentlichst. Die Prüfung unterscheidet nicht zwischen Groß- und Kleinschreibung. Wiederholte Vorkommen desselben Problems können in einer gemeinsamen Meldung erscheinen. Leere HTML-Bereiche und reines HTML ohne Skripte sind zulässig. > **Praxisbeispiel:** Ein Team ergänzt im Formular einen kleinen Hinweisbereich. Der Editor sperrt das Speichern, weil ein übernommenes Skript auf Daten im Browser zugreifen möchte. Das Team entfernt den Skriptteil, belässt die HTML-Struktur und testet die Darstellung sowie die Einsendung erneut. --- # 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/formulare-umfragen-und-quizze-mit-css-gestalten.md?ask=&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.