We use cookies and similar technologies to improve your experience, analyse traffic, and personalise content. You can accept all cookies or reject non-essential ones.
Passen Sie das visuelle Erscheinungsbild Ihrer Umfrage an — wählen Sie aus vier Layout-Typen, wenden Sie Themes an und feinjustieren Sie Farben, Schriftarten und Abstände passend zu Ihrer Marke.
SurveyAnalytica bietet vier verschiedene Layout-Typen, die steuern, wie Fragen den Befragten präsentiert werden. Jedes Layout ist für unterschiedliche Anwendungsfälle optimiert — von klassischen mehrseitigen Formularen bis hin zu modernen, dialogorientierten Erlebnissen. Layouts funktionieren über alle Verteilungskanäle hinweg (Direktlink, E-Mail-Einbettung, QR-Code, Website-Widget und mehr).
Öffnen Sie das Style-Panel im Umfrage-Builder und klappen Sie den Abschnitt Layout aus. Klicken Sie auf einen Layout-Typ, um ihn sofort anzuwenden. Ein Tooltip erklärt beim Hover jedes Layout.
Klassisches Formular-Layout mit mehreren Fragen pro Seite. Enthält eine Seitennavigation am unteren Rand. Am besten geeignet für lange Umfragen mit vielen Fragen, bei denen verwandte Fragen in logische Seiten gruppiert werden.
Jeweils eine Frage mit einer eigenen Startseite. Ideal für mobile Befragte. Studien zeigen, dass dieses Layout durch geringere kognitive Belastung höhere Abschlussraten erzielt.
Ein gesprächsähnliches Chat-Erlebnis mit scrollbasierter Navigation. Fragen erscheinen als Sprechblasen. Sehr ansprechend für Kundenfeedback, NPS-Umfragen und informelle Umfragen.
Wischbare, kartenbasierte Umfrage mit Touch-Gesten und flüssigen Animationen. Touch-freundlich und modern. Perfekt für interaktive Erlebnisse auf Tablets und Mobilgeräten.
| Funktion | Paginiert | Einzelfrage | Dialog | Karussell |
|---|---|---|---|---|
| Fragen pro Bildschirm | Mehrere | Eine | Scrollbasiert | Eine (Karte) |
| Navigation | Weiter/Zurück-Schaltflächen | Weiter-Schaltfläche | Scrollen + Eingabe | Wischen / Pfeile |
| Fortschrittsanzeige | Fortschrittsbalken + Seitenzahl | Fortschrittsbalken + Prozentangabe | Scrollposition | Punkteanzeige |
| Am besten geeignet für | Lange, strukturierte Umfragen | Mobilgeräte, schnelle Umfragen | Feedback, NPS | Interaktiv, Tablets |
| Mobil optimiert | Ja | Ausgezeichnet | Ausgezeichnet | Ausgezeichnet |
| Startseite | Optional | Ja (integriert) | Optional | Optional |
Verändern Sie das Erscheinungsbild Ihrer Umfrage sofort, indem Sie ein vorgefertigtes Theme anwenden. SurveyAnalytica bietet eine kuratierte Theme-Bibliothek mit 13 Kategorien — von professionellen Corporate-Themes bis hin zu lebendigen kreativen Designs, dunklen Themes und Themes mit Hintergrundbild. Jedes Theme legt Farben, Typografie, Schaltflächenstile, das Erscheinungsbild des Fortschrittsbalkens und mehr mit einem einzigen Klick fest.
| Kategorie | Beschreibung | Beispiel-Themes |
|---|---|---|
| Professionell | Klare, geschäftstaugliche Themes mit neutralen Farbtönen | Ocean Blue, Slate Pro, Navy Classic |
| Modern | Zeitgemäße Designs mit markanten Akzenten und klaren Linien | Neo Mint, Urban Chic, Gradient Wave |
| Minimalistisch | Reduzierte Ästhetik mit großzügigem Weißraum | Mint Fresh, Paper White, Zen Garden |
| Lebendig | Kräftige, farbenfrohe Themes, die ins Auge stechen | Sunset Glow, Coral Reef, Tropical |
| Dunkel | Dunkle Hintergründe mit kontrastreichen Akzenten | Midnight, Obsidian, Dark Matter |
| Corporate | Themes im Unternehmensformat für formelle Umfragen | Corporate Steel, Executive, Trust Blue |
| Kreativ | Ausdrucksstarke Themes mit verspielten Elementen | Electric Purple, Neon Pop, Art Deco |
| Gesundheitswesen | Beruhigende, barrierefreie Themes für medizinische Kontexte | Clinical Blue, Wellness Green, Care Soft |
| Bildung | Freundliche, gut lesbare Themes für den akademischen Einsatz | Campus Gold, Scholar, Classroom |
| Technologie | Technikorientierte Designs mit digitaler Ästhetik | Cyber Teal, DevOps Dark, Silicon |
| Finanzen | Vertrauenswürdige, konservative Themes für Finanzumfragen | Bank Green, Trust Gold, Fiscal Blue |
| Einzelhandel | Kundenorientierte Themes für E-Commerce und Einzelhandel | Shop Red, Cart Orange, Brand Pop |
| Foto | Themes mit Hintergrundbild und Overlay-Effekten | Mountain Vista, City Lights, Nature |
Jede Theme-Karte in der Galerie zeigt eine lebendige Miniatur-Vorschau, die Folgendes anzeigt:
Über Themes hinaus haben Sie detaillierte Kontrolle über jedes visuelle Element Ihrer Umfrage. Mit dem Style-Panel im Umfrage-Builder können Sie Farben, Schriftarten, Größen, Schriftstärken und Abstände für jedes Element unabhängig anpassen. Benutzerdefinierte Stile können auf ein Theme aufgesetzt oder von Grund auf erstellt werden.
Farbwähler sind für jedes Text- und Hintergrundelement verfügbar. Klicken Sie auf ein beliebiges Farbfeld, um einen Farbwähler mit Hex-Eingabe zu öffnen. Die folgenden Farben können angepasst werden:
SurveyAnalytica lässt sich mit Google Fonts integrieren und gibt Ihnen Zugriff auf Hunderte von Schriftarten. Wählen Sie eine Schriftart aus dem Dropdown-Menü im Style-Panel. Die Schriftart gilt global für den gesamten Umfragetext — Titel, Fragen, Optionen, Schaltflächen und Beschreibungen verwenden alle die ausgewählte Schriftfamilie.
Umfrageinhalte können links, zentriert oder rechts ausgerichtet werden. Die Ausrichtungseinstellung steuert die horizontale Platzierung aller Umfrageinhalte innerhalb des Containers. Die Linksausrichtung ist die Standardeinstellung und wird für längere Umfragen empfohlen. Die zentrierte Ausrichtung eignet sich gut für kurze, fokussierte Umfragen.
Das Style-Panel organisiert die Steuerelemente in einklappbaren Abschnitten für jeden Elementtyp. Erweitern Sie einen Abschnitt, um dessen spezifische Eigenschaften zu konfigurieren:
| Eigenschaft | Was sie steuert | Beispielwerte |
|---|---|---|
| Fragestil | Schriftgröße, Farbe und Schriftstärke des Fragetexts | 16px, #2C2D5F, Medium (500) |
| Optionsstil | Schriftgröße, Farbe, Schriftstärke und Hintergrund der Antwortoptionen | 14px, #A0A0AE, Regular (400), Hintergrund #F4F6F7 |
| Schaltflächenstil | Hintergrund der Weiter/Absenden-Schaltfläche, Textfarbe, Randradius | Hintergrund #32DEFF, Text #33344B, abgerundet 4px |
| Beschreibungsstil | Hilfetext unter Umfragetitel und Fragen | 16px, #666666, Regular (400) |
| Fragebox | Containergestaltung für jede Fragekarte | Transparenter Hintergrund, 8px Randradius, 20px Innenabstand |
| Fragenummer | Anzeige, Farbe und Größe der Nummernbeschriftung | Sichtbar/ausgeblendet, #A0A0AE, 14px |
| Umfragetitel | Haupttiteltext am Anfang der Umfrage | 28px, #2C2D5F, Semi-Bold (600) |
| Seitentitel | Abschnitts-/Seitenüberschrifttext | 22px, #2C2D5F, Semi-Bold (600) |
| Fußzeile / AGB | Textfarbe und Hintergrund der Fußzeile | 14px, #ffffff Text, #2C2D5F Hintergrund |
| Eigenschafts-/Bewertungsbeschriftungen | Beschriftungen für NPS, Bewertungen und Matrix-Eigenschaften | 14px, #A0A0AE, Regular (400) |
Jedes Textelement unterstützt vier Stufen der Schriftstärke:
| Stärke | Wert | Am besten geeignet für |
|---|---|---|
| Light | 300 | Dezente Beschreibungen, Hilfetext |
| Regular | 400 | Fließtext, Optionen, allgemeine Inhalte |
| Medium | 500 | Fragen, Beschriftungen, Hervorhebung |
| Bold | 600 | Titel, Überschriften, Call-to-Action-Elemente |
Jede in Ihrer Umfrage gerenderte Frage besteht aus mehreren gestalteten Ebenen. Das Verständnis der Anatomie einer Fragekarte hilft Ihnen, gezielte Anpassungen vorzunehmen. Das folgende Diagramm zeigt, wie jede Stileigenschaft einem sichtbaren Element zugeordnet ist.
Das Theme-System folgt einem kaskadierenden Prioritätsmodell. Wenn Sie den Stil einer Umfrage anpassen, werden die Eigenschaften in dieser Reihenfolge aufgelöst:
Für schnelles, ganzheitliches Styling bietet SurveyAnalytica Preset-Skalen, die sich gleichzeitig über mehrere Umfrageelemente erstrecken. Anstatt einzelne Schriftgrößen und Abstandswerte anzupassen, wählen Sie eine Skalenstufe aus und alle zugehörigen Eigenschaften werden gemeinsam aktualisiert. Dies wird als Einfacher Modus bezeichnet — schalten Sie ihn oben im Style-Panel um.
| Preset-Kategorie | Optionen | Was es beeinflusst |
|---|---|---|
| Typografie | Kompakt (12-20px), Klein (14-24px), Mittel (16-28px), Groß (18-36px), Extra Groß (20-48px) | Umfragetitel, Seitentitel, Fragetitel, Beschreibung, Option, Schaltfläche, Fragenummer und Schriftgrößen der Fußzeile |
| Abstand | Kompakt (8-12px), Klein (12-16px), Mittel (16-24px), Groß (20-32px), Großzügig (28-48px) | Fragenabstand, Optionsabstand, Abschnittsinnenabstand, Inhaltsinnenabstand, Innenabstand und Außenabstand der Fragebox |
| Randradius | Keiner (0px), Dezent (4-6px), Mittel (8-12px), Abgerundet (12-16px), Pill (24-50px) | Ecken der Schaltfläche, Ecken der Option, Ecken der Fragebox, Ecken des Eingabefelds, Kartenecken |
| Dichte | Kompakt, Komfortabel, Großzügig | Gesamtinnenabstand-Multiplikator, Abstands-Multiplikator, Touch-Zielgröße (40-56px), Options- und Schaltflächen-Innenabstand |
| Element | Kompakt | Klein | Mittel | Groß | Extra groß |
|---|---|---|---|---|---|
| Umfragetitel | 20px | 24px | 28px | 36px | 48px |
| Seitentitel | 16px | 18px | 20px | 24px | 32px |
| Fragentitel | 14px | 16px | 18px | 20px | 24px |
| Beschreibung | 12px | 14px | 16px | 18px | 20px |
| Optionen | 12px | 14px | 16px | 18px | 20px |
| Schaltflächen | 12px | 14px | 16px | 18px | 20px |
| Fragennummer | 11px | 12px | 14px | 16px | 18px |
| Fußzeile / AGB | 10px | 12px | 14px | 16px | 18px |
Presets liefern Basiswerte. Jeder explizite Wert, den Sie im erweiterten Modus festlegen (zum Beispiel eine Änderung der Fragen-Schriftgröße auf 22px), überschreibt den Preset-Wert für diese bestimmte Eigenschaft. Andere Eigenschaften verwenden weiterhin die Preset-Skala. Das bietet Ihnen das Beste aus beiden Welten: schnelle globale Anpassungen über Presets und gezielte Kontrolle über explizite Überschreibungen.
Machen Sie Ihre Umfrage unverkennbar zu Ihrer eigenen. Laden Sie ein Firmenlogo hoch, legen Sie ein gebrandetes Hintergrundbild fest oder passen Sie die Hintergrundfarbe mit Deckkraft-Steuerung fein an. Alle Branding-Elemente werden im Style-Panel konfiguriert und wirken sich sofort in der Umfragevorschau aus.
Laden Sie Ihr Firmenlogo hoch (PNG, JPG, SVG). Legen Sie die Position auf oben-links, oben-mittig oder oben-rechts fest. Passen Sie die Logogröße (Standard 180px) und die Deckkraft (0-100) an. Das Logo erscheint für alle Befragten am oberen Rand der Umfrage.
Laden Sie ein Hintergrundbild hoch oder geben Sie eine URL an. Das Bild füllt den Umfragehintergrund mit Cover-Skalierung, fester Position und zentrierter Ausrichtung aus. Kombinieren Sie es mit einem Overlay-Deckkraft-Regler für bessere Lesbarkeit.
Legen Sie eine einfarbige Hintergrundfarbe mit Deckkraft-Steuerung (0-100) fest. Wählen Sie eine beliebige Hex-Farbe und passen Sie die Transparenz an, um dezente oder dramatische Effekte zu erzielen. Funktioniert unabhängig oder unter einem Hintergrundbild.
Definieren Sie Ihre Primär-, Sekundär- und Akzentfarben. Diese werden auf Schaltflächen, ausgewählte Optionen, Fortschrittsbalken und Hervorhebungen in der gesamten Umfrage für ein konsistentes Branding übertragen.
| Eigenschaft | Standardwert | Beschreibung |
|---|---|---|
| Größe | cover | Bild wird skaliert, um den gesamten Hintergrundbereich zu füllen |
| Wiederholung | no-repeat | Bild wird nicht gekachelt |
| Position | center center | Bild ist sowohl horizontal als auch vertikal zentriert |
| Anheftung | fixed | Bild bleibt fixiert, während der Inhalt scrollt (Parallax-Effekt) |
| Deckkraft | 100 | Volle Deckkraft (0 = vollständig transparent, 100 = vollständig deckend) |
Der Fortschrittsbalken gibt Befragten eine visuelle Anzeige, wie weit sie in der Umfrage vorangeschritten sind. Er erscheint oben in der Umfrage und aktualisiert sich automatisch, sobald Fragen beantwortet oder Seiten gewechselt werden.
Der Fortschrittsbalken kann über den Sichtbarkeits-Schalter im Style-Panel ein- oder ausgeblendet werden. Wenn sichtbar, wird er als horizontaler Balken mit einer Füllung dargestellt, die von links nach rechts wächst.
| Eigenschaft | Standardwert | Beschreibung |
|---|---|---|
| Track-Hintergrund | #5657AA | Der ungefüllte Teil des Fortschrittsbalkens |
| Füllfarbe | #32DEFF | Die Farbe des gefüllten/abgeschlossenen Teils |
| Höhe | 12px | Vertikale Dicke des Fortschrittsbalkens |
| Eckenradius | 50px (Pillenform) | Eckenrundung des Fortschrittsbalkens |
| Deckkraft | 100 | Transparenz des Fortschrittsbalkens (0-100) |
| Kopfzeilen-Hintergrund | #2C2D5F | Hintergrundfarbe des Containers, der den Fortschrittsbalken enthält |
| Layout | Fortschrittsberechnung | Anzeigestil |
|---|---|---|
| Paginiert | Aktuelle Seite / Seiten gesamt | Horizontaler Balken oben, Seitenzahl-Beschriftung |
| Einzelfrage | Aktuelle Frage / Fragen gesamt | Horizontaler Balken oben mit Prozentangabe |
| Dialog | Beantwortete Fragen / Fragen gesamt | Horizontaler Balken oben |
| Karussell | Aktuelle Karte / Karten gesamt | Punktanzeige am unteren Rand der Karte |
Legen Sie im Detail fest, welche Elemente in Ihrer Umfrage sichtbar sind. Mit Sichtbarkeitsschaltern können Sie bestimmte Komponenten ein- oder ausblenden, ohne sie zu löschen — nützlich, um ein klares, ablenkungsfreies Umfrageerlebnis zu schaffen.
| Element | Standard | Beschreibung |
|---|---|---|
| Fortschrittsbalken | Sichtbar | Fortschrittsanzeige oben ein- oder ausblenden |
| Fragenummern | Sichtbar | Nummern-Badge neben jeder Frage ein- oder ausblenden |
| Pflichtfeld-Kennzeichnung | Sichtbar | Rotes Sternchen (*) bei Pflichtfragen ein- oder ausblenden |
| Umfragetitel | Sichtbar | Haupttitel der Umfrage ein- oder ausblenden |
| Umfragebeschreibung | Sichtbar | Beschreibungstext unter dem Titel ein- oder ausblenden |
| Timer | Ausgeblendet | Countdown-Timer ein- oder ausblenden (falls konfiguriert) |
| Seitentitel | Sichtbar | Abschnitts-/Seitenüberschriften ein- oder ausblenden |
| Seitenbeschreibungen | Sichtbar | Abschnitts-/Seitenbeschreibungen ein- oder ausblenden |
| Logo | Sichtbar | Hochgeladenes Logo ein- oder ausblenden |
| Fußzeile | Sichtbar | Fußzeile/AGB-Leiste ein- oder ausblenden |
| Powered By | Sichtbar | SurveyAnalytica-Branding ein- oder ausblenden |
SurveyAnalytica unterstützt sanfte Übergänge zwischen Seiten und Fragen. Animationen sind standardmäßig aktiviert und können in den Design-Einstellungen konfiguriert werden.
| Einstellung | Standard | Optionen |
|---|---|---|
| Animationen aktiviert | Ja | Alle Animationen aktivieren oder deaktivieren |
| Dauer | 0,3 s | Geschwindigkeit der Übergangsanimationen |
| Easing | ease-out | Easing-Kurve der Animation |
| Seitenübergang | fade | fade, slide, none |
| Fragenübergang | fade | fade, slide, none |
| Kartenschatten | Deaktiviert | Schlagschatten auf Fragekarten aktivieren |
| Eigenschaft | Standardwert | Ort |
|---|---|---|
| Layout-Typ | paginated | Style > Layout |
| Schriftart | Poppins | Style > Font |
| Ausrichtung | left | Style > Layout |
| Hintergrundfarbe | #ffffff (weiß) | Style > Colours |
| Primäre Textfarbe | #2C2D5F | Style > Text |
| Sekundäre Textfarbe | #A0A0AE | Style > Text |
| Schaltflächen-Hintergrund | #32DEFF | Style > Button |
| Schaltflächen-Textfarbe | #33344B | Style > Button |
| Optionshintergrund | #F4F6F7 | Style > Options |
| Hintergrund ausgewählter Option | #32DEFF | Style > Options |
| Füllfarbe Fortschrittsbalken | #32DEFF | Style > Progress Bar |
| Schiene des Fortschrittsbalkens | #5657AA | Style > Progress Bar |
| Hintergrund der Fußzeile | #2C2D5F | Style > Footer |
| Hintergrund der Fragebox | transparent | Style > Question Box |
| Eckenradius der Fragebox | 8px | Style > Question Box |
| Farbe der Pflichtfeld-Kennzeichnung | #FF4444 | Style > Required |
| Maximale Inhaltsbreite | 800px | Style > Layout |