Help

Styling & Layouts

Customize your survey’s visual appearance — choose from four layout types, apply themes, and fine-tune colors, fonts, and spacing to match your brand.

1. Survey Layouts

SurveyAnalytica offers four distinct layout types that control how questions are presented to respondents. Each layout is optimised for different use cases — from traditional multi-page forms to modern conversational experiences. Layouts work across all distribution channels (direct link, email embed, QR code, website widget, and more).

Choosing a Layout

Open the Style panel in the survey builder and expand the Layout section. Click on a layout type to apply it immediately. A tooltip description explains each layout on hover.

Paginated (Classic)

Classic form layout with multiple questions per page. Includes page navigation at the bottom. Best for long surveys with many questions, grouping related questions into logical pages.

Single Question

One question at a time with a dedicated start page. Ideal for mobile respondents. Studies show this layout achieves higher completion rates by reducing cognitive load.

Dialogue (Conversational)

Conversational, chat-like experience with scroll-based navigation. Questions appear as message bubbles. Highly engaging for customer feedback, NPS surveys, and informal polls.

Carousel

Swipeable card-based survey with touch gestures and smooth animations. Touch-friendly and modern. Perfect for interactive experiences on tablets and mobile devices.

Tip: The layout you choose applies across all distribution channels — link sharing, email embeds, QR codes, and website widgets. For website-specific display modes (popup, slider, bottom widget), configure those separately under Share > Website. These embed modes wrap around the base layout.

Layout Comparison

Feature	Paginated	Single Question	Dialogue	Carousel
Questions per screen	Multiple	One	Scroll-based	One (card)
Navigation	Next/Previous buttons	Continue button	Scroll + type	Swipe / arrows
Progress indicator	Progress bar + page count	Progress bar + percentage	Scroll position	Dot indicator
Best for	Long, structured surveys	Mobile, quick polls	Feedback, NPS	Interactive, tablets
Mobile optimised	Yes	Excellent	Excellent	Excellent
Start page	Optional	Yes (built-in)	Optional	Optional

2. Themes

Instantly transform the look of your survey by applying a pre-built theme. SurveyAnalytica ships with a curated theme library spanning 13 categories — from professional corporate themes to vibrant creative designs, dark themes, and photo-background themes. Each theme sets colours, typography, button styles, progress bar appearance, and more in a single click.

Applying a Theme

1Open the Style panel in the survey builder sidebar.
2Click Themes to open the theme gallery.
3Browse themes by category using the filter tabs, or scroll through the full collection.
4Hover over a theme card to see a live preview with colour swatches, sample text, and a miniature question box mockup.
5Click a theme card to apply it instantly. All style properties (colours, fonts, button appearance, progress bar, and more) update in real time on the survey canvas.

Tip: Applying a theme overwrites all style properties. If you have custom tweaks you want to preserve, duplicate your survey before experimenting with themes.

Theme Categories

Category	Description	Example Themes
Professional	Clean, business-appropriate themes with neutral tones	Ocean Blue, Slate Pro, Navy Classic
Modern	Contemporary designs with bold accents and clean lines	Neo Mint, Urban Chic, Gradient Wave
Minimal	Stripped-down aesthetics with generous whitespace	Mint Fresh, Paper White, Zen Garden
Vibrant	Bold, colourful themes that pop	Sunset Glow, Coral Reef, Tropical
Dark	Dark backgrounds with high-contrast accents	Midnight, Obsidian, Dark Matter
Corporate	Enterprise-grade themes for formal surveys	Corporate Steel, Executive, Trust Blue
Creative	Expressive themes with playful elements	Electric Purple, Neon Pop, Art Deco
Healthcare	Calming, accessible themes for medical contexts	Clinical Blue, Wellness Green, Care Soft
Education	Friendly, readable themes for academic use	Campus Gold, Scholar, Classroom
Technology	Tech-forward designs with digital aesthetics	Cyber Teal, DevOps Dark, Silicon
Finance	Trustworthy, conservative themes for financial surveys	Bank Green, Trust Gold, Fiscal Blue
Retail	Customer-oriented themes for e-commerce and retail	Shop Red, Cart Orange, Brand Pop
Photo	Background image themes with overlay effects	Mountain Vista, City Lights, Nature

Theme Preview

Each theme card in the gallery renders a live miniature preview that shows:

Background — The theme’s background colour or image (with overlay opacity)
Sample text — A simulated survey title and description using the theme’s font family and text colours
Question box — A mini question card with fake options showing option styling
Colour swatches — Small circles for the primary text, secondary text, option background, and button/accent colours
Image badge — For photo-background themes, a small image icon appears in the top-right corner of the preview card

3. Custom Styling

Beyond themes, you have granular control over every visual element in your survey. The Style panel in the survey builder lets you customise colours, fonts, sizes, weights, and spacing for each element independently. Custom styles can be applied on top of a theme or built from scratch.

Colour Customisation

Colour pickers are available for every text and background element. Click any colour swatch to open a colour picker with hex input. The following colours can be customised:

Background colour — The overall survey background with opacity control (0-100)
Question text colour — Primary colour for question labels
Option text colour — Colour for answer choice labels
Button background — Next, Previous, and Submit button fills
Button text colour — Automatically calculated or manually overridden
Option background — Default and selected states for answer options
Progress bar colours — Track background and fill colour
Footer background — Bottom bar and terms-and-conditions section

Font Selection

SurveyAnalytica integrates with Google Fonts, giving you access to hundreds of typefaces. Select a font from the dropdown in the Style panel. The font applies globally to all survey text — titles, questions, options, buttons, and descriptions all use the selected font family.

Tip: Poppins is the default font. For maximum readability across devices, choose a sans-serif font like Inter, Roboto, Open Sans, or Lato. For a more distinctive brand feel, consider Playfair Display, Merriweather, or Montserrat.

Alignment Options

Survey content can be aligned left, centre, or right. The alignment setting controls the horizontal placement of all survey content within the container. Left alignment is the default and recommended for longer surveys. Centre alignment works well for short, focused surveys.

Per-Element Styling

The Style panel organises controls into collapsible sections for each element type. Expand a section to configure its specific properties:

Property	What It Controls	Example Values
Question Style	Font size, colour, and weight of question text	16px, #2C2D5F, Medium (500)
Option Style	Font size, colour, weight, and background of answer options	14px, #A0A0AE, Regular (400), bg #F4F6F7
Button Style	Next/Submit button background, text colour, border radius	Background #32DEFF, text #33344B, rounded 4px
Description Style	Helper text below survey title and questions	16px, #666666, Regular (400)
Question Box	Container styling for each question card	Transparent bg, 8px border-radius, 20px padding
Question Number	Number label display, colour, and size	Visible/hidden, #A0A0AE, 14px
Survey Title	Main title text at the top of the survey	28px, #2C2D5F, Semi-Bold (600)
Page Title	Section/page heading text	22px, #2C2D5F, Semi-Bold (600)
Footer / T&C	Footer text colour and background	14px, #ffffff text, #2C2D5F background
Property/Rating Labels	Labels for NPS, ratings, and matrix properties	14px, #A0A0AE, Regular (400)

Font Weight Options

Each text element supports four font weight levels:

Weight	Value	Best For
Light	300	Subtle descriptions, helper text
Regular	400	Body text, options, general content
Medium	500	Questions, labels, emphasis
Bold	600	Titles, headings, call-to-action elements

4. Style Properties Deep Dive

Every question rendered in your survey is composed of several styled layers. Understanding the anatomy of a question card helps you make targeted customisations. The diagram below shows how each style property maps to a visible element.

Style Inheritance

The theme system follows a cascading priority model. When you customise a survey’s style, properties are resolved in this order:

1Preset defaults are calculated first based on your chosen typography, spacing, border-radius, and density presets.
2Theme values override presets when a prebuilt theme is applied — setting colours, fonts, and component styles.
3Explicit overrides take highest priority. Any property you change directly in the Style panel overrides both theme and preset values.

Tip: If a style looks unexpected, check whether a preset or theme is setting a value you did not intend. Use the Simple Mode presets to quickly reset baseline sizing, then apply granular overrides in Advanced Mode.

5. Style Presets (Simple Mode)

For quick, holistic styling, SurveyAnalytica provides preset scales that cascade across multiple survey elements simultaneously. Instead of adjusting individual font sizes and spacing values, select a scale level and all related properties update together. This is called Simple Mode — toggle it at the top of the Style panel.

Preset Categories

Preset Category	Options	What It Affects
Typography	Compact (12-20px), Small (14-24px), Medium (16-28px), Large (18-36px), Extra Large (20-48px)	Survey title, page title, question title, description, option, button, question number, and footer font sizes
Spacing	Compact (8-12px), Small (12-16px), Medium (16-24px), Large (20-32px), Spacious (28-48px)	Question gap, option gap, section padding, content padding, question box padding and margin
Border Radius	None (0px), Subtle (4-6px), Medium (8-12px), Rounded (12-16px), Pill (24-50px)	Button corners, option corners, question box corners, input field corners, card corners
Density	Compact, Comfortable, Spacious	Overall padding multiplier, gap multiplier, touch target size (40-56px), option and button padding

Typography Scale Detail

Element	Compact	Small	Medium	Large	Extra Large
Survey Title	20px	24px	28px	36px	48px
Page Title	16px	18px	20px	24px	32px
Question Title	14px	16px	18px	20px	24px
Description	12px	14px	16px	18px	20px
Options	12px	14px	16px	18px	20px
Buttons	12px	14px	16px	18px	20px
Question Number	11px	12px	14px	16px	18px
Footer / T&C	10px	12px	14px	16px	18px

How Presets and Explicit Styles Merge

Presets provide baseline values. Any explicit value you set in Advanced Mode (for example, changing the question font size to 22px) overrides the preset value for that specific property. Other properties continue to use the preset scale. This gives you the best of both worlds: quick global adjustments via presets and surgical control via explicit overrides.

Tip: The default preset configuration is Typography: Medium, Spacing: Medium, Border Radius: Medium, Density: Comfortable. These defaults provide a balanced look suitable for most surveys.

6. Background & Branding

Make your survey unmistakably yours. Upload a company logo, set a branded background image, or fine-tune the background colour with opacity control. All branding elements are configured in the Style panel and take effect immediately in the survey preview.

Branding Elements

Logo Upload

Upload your company logo (PNG, JPG, SVG). Set the position to top-left, top-centre, or top-right. Adjust the logo size (default 180px) and opacity (0-100). The logo appears at the top of the survey for all respondents.

Background Image

Upload a background image or provide a URL. The image fills the survey background with cover sizing, fixed attachment, and centre positioning. Pair it with an overlay opacity slider for readability.

Background Colour

Set a solid background colour with opacity control (0-100). Choose any hex colour and adjust transparency to create subtle or dramatic effects. Works independently or underneath a background image.

Brand Colours

Define your primary, secondary, and accent colours. These propagate to buttons, selected options, progress bars, and highlights throughout the survey for consistent branding.

Adding Branding to Your Survey

1Open the Style panel in the survey builder sidebar.
2Upload your logo by clicking the logo upload area. The logo appears instantly in the survey preview.
3Choose the logo position — left, centre, or right — using the alignment selector. Adjust the size slider if needed.
4Set a background image by uploading a file or entering a URL. The image applies as a full-bleed background with cover sizing.
5Adjust the background opacity slider to control how transparent the background colour overlay appears over the image (lower opacity reveals more of the image).
6Preview your changes in real time on the survey canvas. Switch between desktop and mobile preview to verify the branding looks good across devices.

Background Image Properties

Property	Default Value	Description
Size	cover	Image scales to fill the entire background area
Repeat	no-repeat	Image does not tile
Position	center center	Image is centred both horizontally and vertically
Attachment	fixed	Image stays fixed while content scrolls (parallax effect)
Opacity	100	Full opacity (0 = fully transparent, 100 = fully opaque)

Note: Large, high-resolution background images (above 2MB) can increase survey load time. Optimise images to 1920×1080 at 80% JPEG quality for the best balance of visual quality and performance.

7. Progress Bar

The progress bar gives respondents a visual indication of how far they have progressed through the survey. It appears at the top of the survey and updates automatically as questions are answered or pages are navigated.

Display Options

The progress bar can be shown or hidden using the visibility toggle in the Style panel. When visible, it renders as a horizontal bar with a fill that grows from left to right.

Styling the Progress Bar

Property	Default Value	Description
Track Background	#5657AA	The unfilled portion of the progress bar
Fill Colour	#32DEFF	The filled/completed portion colour
Height	12px	Vertical thickness of the progress bar
Border Radius	50px (pill shape)	Corner rounding of the progress bar
Opacity	100	Transparency of the progress bar (0-100)
Header Background	#2C2D5F	Background colour of the container holding the progress bar

Progress Bar Behaviour by Layout

Layout	Progress Calculation	Display Style
Paginated	Current page / total pages	Horizontal bar at top, page count label
Single Question	Current question / total questions	Horizontal bar at top with percentage
Dialogue	Questions answered / total questions	Horizontal bar at top
Carousel	Current card / total cards	Dot indicator at bottom of card

Tip: Research shows that progress bars improve survey completion rates by 10-15%. For longer surveys (10+ questions), always show the progress bar. For very short surveys (1-3 questions), hiding it can create a cleaner appearance.

Performance note: If you are using a photo-background theme with heavy image assets, the progress bar header background may appear slightly transparent on slower connections while the background image loads. Use a solid, dark header background colour (like the default #2C2D5F) for the most reliable visual contrast.

8. Visibility Controls

Fine-tune which elements are visible in your survey. Visibility toggles let you show or hide specific components without deleting them — useful for creating clean, distraction-free survey experiences.

Element	Default	Description
Progress Bar	Visible	Show or hide the progress indicator at the top
Question Numbers	Visible	Show or hide the number badge beside each question
Required Indicator	Visible	Show or hide the red asterisk (*) on mandatory questions
Survey Title	Visible	Show or hide the main survey title heading
Survey Description	Visible	Show or hide the description text below the title
Timer	Hidden	Show or hide the countdown timer (if configured)
Page Titles	Visible	Show or hide section/page headings
Page Descriptions	Visible	Show or hide section/page descriptions
Logo	Visible	Show or hide the uploaded logo
Footer	Visible	Show or hide the footer/terms-and-conditions bar
Powered By	Visible	Show or hide the SurveyAnalytica branding

Tip: For a minimalist survey, hide the question numbers, footer, and powered-by badge. This creates a clean, branded experience that puts the focus entirely on the questions.

9. Transition Effects & Animations

SurveyAnalytica supports smooth transitions between pages and questions. Animations are enabled by default and can be configured in the theme settings.

Setting	Default	Options
Animations Enabled	Yes	Enable or disable all animations
Duration	0.3s	Speed of transition animations
Easing	ease-out	Animation easing curve
Page Transition	fade	fade, slide, none
Question Transition	fade	fade, slide, none
Card Shadows	Disabled	Enable drop shadow on question cards

Tip: For the best mobile experience, keep animations enabled with a short duration (0.2-0.3s). The slide transition works particularly well with the Single Question and Carousel layouts, giving a sense of forward progress.

Quick Reference — Styling Defaults

Property	Default Value	Location
Layout type	paginated	Style > Layout
Font family	Poppins	Style > Font
Alignment	left	Style > Layout
Background colour	#ffffff (white)	Style > Colours
Primary text colour	#2C2D5F	Style > Text
Secondary text colour	#A0A0AE	Style > Text
Button background	#32DEFF	Style > Button
Button text colour	#33344B	Style > Button
Option background	#F4F6F7	Style > Options
Selected option background	#32DEFF	Style > Options
Progress bar fill	#32DEFF	Style > Progress Bar
Progress bar track	#5657AA	Style > Progress Bar
Footer background	#2C2D5F	Style > Footer
Question box background	transparent	Style > Question Box
Question box border-radius	8px	Style > Question Box
Required indicator colour	#FF4444	Style > Required
Max content width	800px	Style > Layout

Need more help? Contact your workspace administrator or reach out to SurveyAnalytica support.