Custom Styling
Each form can have custom CSS and JavaScript applied. Styles are scoped to the form and configured in the form's experience settings.
Custom CSS
Add custom CSS rules per form (max 5,000 characters). Stored in FormExperienceData::customCss and applied when the form renders.
Example use cases:
- Change font family or sizes
- Customize colors and backgrounds
- Adjust spacing and layout
- Hide specific elements
- Brand the form to match your site
Custom JavaScript
Add custom JS per form (max 2,000 characters). Stored in FormExperienceData::customJs and runs when the form loads.
Example use cases:
- Custom validation logic
- Third-party tracking (Google Analytics events, Facebook Pixel)
- Dynamic field behavior
Form Layout
Two layout modes are available, configured via the FormLayout enum in experience settings:
- Stacked (default) -- labels above fields
- Horizontal -- labels beside fields
Field Width Control
FIELD_UI_WIDTH_CONTROL feature flag.Fields can span a portion of the form width using a 12-column grid. Multiple fields sit side-by-side when their widths add up.
| Setting | Grid Span | Width |
|---|---|---|
| 25% | 3/12 columns | Quarter |
| 33% | 4/12 columns | Third |
| 50% | 6/12 columns | Half |
| 66% | 8/12 columns | Two-thirds |
| 75% | 9/12 columns | Three-quarters |
| 100% | 12/12 columns | Full width (default) |
Dark Mode
Forms automatically support dark mode. The system detects changes to the document's root element class and adjusts styles accordingly. No additional configuration is needed.
Responsive Design
Forms are mobile-responsive by default. The 12-column grid collapses to full width on small screens. No additional configuration is needed.