Forms & surveys

Styling & custom CSS

Style forms with visual controls, and—for power users—write custom CSS with a documented list of selectors.

Styling & custom CSS

Every form, page, section and field has a Style section with visual controls — background and text colour, alignment, text size and weight, padding, corners, border and a background image. The whole form’s look lives on the Design tab; pages, sections and fields can override it.

Custom CSS (advanced)

For full control, the Design tab (form-wide) and each field’s inspector have a Custom CSS box. It’s aimed at power users and AI.

Two things keep it safe:

• Auto-scoping. Everything you write is automatically limited to this form (or this field), so it can never affect the rest of the page.
• Sanitising. @import, external image URLs, and script-like values are removed. Only images from your own media or relative paths are allowed. The editor tells you if anything was changed for safety.

Available selectors

Target these classes (they’re automatically prefixed with your form/field scope):

Example

.af-label { letter-spacing: 0.02em; }
.af-btn-primary { border-radius: 9999px; }
.af-field-comments .af-textarea { min-height: 8rem; }

@media queries are supported for responsive tweaks.