Style Forms and Surveys with the Right Sidebar in Sparkforge

The Right Sidebar is the control panel for visual and layout settings in the Sparkforge Form and Survey Builder. Three tabs — Styles, Themes, and Advanced — cover layout, branding, button styling, and custom CSS in one place.

Open the Right Sidebar

Inside the form or survey builder, click Styles & Options in the upper-right corner. Click again to collapse it.

Styles tab

The Styles tab handles core layout, colors, and branding.

• Layout: Controls field arrangement, input and label widths, spacing, padding, and the top margin above the form. Edge-to-edge layouts are now possible — set top and bottom padding to 0 px and the published asset honors it.
• Footer (surveys): Manage footer content and appearance for surveys.
• Colors & Background: Set fonts, background colors, and apply background or header imagery where supported.
• Miscellaneous: Toggle agency-level branding on or off.

Themes tab

Themes apply ready-made presets so you can start with a polished look and fine-tune in Styles after.

To apply: hover the theme, click Use Theme, and confirm in the popup. Switching themes resets the current style modifications, so apply themes first and tune later.

Button Styling Panel

The Button Styling Panel groups every button control — typography, spacing, borders, radius, shadows, width — in one place.

1. Open the form in the builder.
2. Click the button element on the canvas.
3. In the right sidebar, expand Button (or Styles › Button).
4. Click Select Themes to browse Filled, Border, and Text Only categories. Hover to preview live.
5. Click Apply to set the theme.

From there, fine-tune grouped controls:

• Colors & Background: text, background, and border colors.
• Typography: font family and weight (custom fonts supported), size, letter spacing, and case style.
• Layout & Alignment: left, center, right, or full-width.
• Padding: top/bottom and left/right (link or unlink).
• Border & Corner Radius: width, style, and radius for rounded vs square buttons.
• Shadow: blur, distance, and spread.

Use Reset or Revert to undo, or reopen the theme picker to start over.

Advanced tab

Advanced exposes deeper styling for specialized needs.

• Form: container borders, corners, and shadow.
• Input Field: text and focus colors, borders, corners, width, padding, shadows.
• Label: typography and color.
• Short Label: typography and color for short labels.
• Placeholder: placeholder text appearance.
• Custom CSS: precise overrides. Custom CSS takes precedence over Styles and Themes — review for conflicts before saving.

Element-level label alignment

Set a different label position on each field instead of one global alignment.

• Available in Forms, Surveys, and Quizzes — Single Column layout only.
• Existing forms keep their global alignment unless you explicitly change a field.
• Works on standard fields: text inputs, dropdowns, radios, and similar.
• On mobile, alignment defaults to Top regardless of desktop setting.

Set per-field alignment

1. Select a field in the builder.
2. In the right sidebar, find Label Alignment.
3. Pick Top, Left, Right, or Form Default.