Layout customization
Configure how your surveys and forms are displayed with flexible layout options
Overview
The layout editor allows you to customize how your forms and surveys are displayed. You can choose between different layout styles, add background images or colors, and configure progress indicators.
Access the layout editor by opening your form or survey in the dashboard and clicking on the Layout tab in the settings panel.
Layout types
Classic layout
The classic layout displays your form in a traditional single-column format. This is the default layout and works well for most use cases. All questions are stacked vertically in a clean, straightforward presentation.
This layout is ideal for forms and surveys where you want users to focus on the questions without visual distractions.
Split layout
The split layout divides your form into two sections: one side displays media content (image, color, or gradient), while the other side shows your form. This creates a more visually engaging experience.
Split layout options:
- Media position: Choose whether media appears on the left or right side
- Media width: Set the width of the media section (30%, 40%, 50%, or 60%)
- Media type: Select from image, solid color, or gradient
Media type options
Image
Upload an image to display alongside your form. Images are automatically optimized for performance. Supported formats: PNG, JPG, SVG.
Solid color
Choose a solid color using the color picker. Perfect for matching your brand colors or creating a clean, minimalist look.
Gradient
Create custom gradients with two colors and choose from 6 different directions: left to right, right to left, top to bottom, bottom to top, diagonal top-left to bottom-right, or diagonal top-right to bottom-left.
Form backgrounds
Customize the background of your form container to create the perfect visual style. You can choose from several background types:
None
Transparent background that inherits from the page or widget container.
Solid color
Select a solid background color using the color picker.
Image
Upload a background image with size options (Cover, Contain, or Auto). You can also add a dark overlay to improve text readability, with adjustable opacity from 0-100%.
Gradient
Create custom gradient backgrounds with two colors and multiple direction options, same as the split layout gradient feature.
Tip
When using background images, enable the overlay and adjust opacity to ensure your form text remains readable. A 40-60% overlay typically provides good contrast.
Progress indicator
Help users understand their progress through your form with customizable progress indicators. You can toggle the progress indicator on or off, and when enabled, choose from three different styles:
Progress bar
A horizontal bar that fills as users complete the form. Clean and straightforward.
Dots
Individual dots representing each step or section, with completed steps highlighted.
Percentage
Displays completion as a percentage (e.g., 60% complete). Simple and informative.
Position
Choose whether the progress indicator appears at the top or bottom of your form:
- Top: Visible immediately when users start the form
- Bottom: Remains visible as users scroll through questions
Best practice
For longer forms (10+ questions), enable the progress indicator to reduce abandonment rates. Users are more likely to complete forms when they can see their progress.