Controls the look of the public form. The Style page in the form designer has two parts: a Theme selector, and a custom CSS editor that is applied on top of the selected theme.
Theme
Choose the built-in look for the form:
FormsByAir Classic is the default, and is the look all forms have had until now. Nothing changes for existing forms unless you switch them.
FormsByAir 2026 Refresh is a modernised look aimed at readability and easier completion on phones and tablets:
- One comfortable text size on every device - mobile now matches desktop rather than dropping a size
- A little more space between questions and groups
- Taller inputs, and wider buttons that are easier to click or tap - on phones the action buttons (Next, Back, Submit, Save & Finish Later) stack full width, with Next on top
- A white form background, with each group shown as a light panel so the structure is clear without the old grey canvas
- Alternate repeater items (e.g. Contact #2, #4) are banded so you can see where each one starts and ends, with larger collapse and remove buttons
- Radio buttons, option checkboxes and true/false questions sit in an outlined box, so the whole box is the click target and the selected option is clearly highlighted
- A new segmented progress bar for multi-section forms, with numbered steps and ticks for completed sections
- Larger signature and drawing areas on small screens, and a full-width signature toolbar on phones
Switching theme is part of the form design, so it’s saved as a new form version like any other change, and in-progress saved documents keep the theme of the version they were started on until they’re moved to the latest version.
Custom CSS
The editor below the Theme selector takes raw HTML that’s inserted into the form page’s <head>, so wrap CSS in <style>...</style> tags yourself. It can also carry other head content such as a <link> to a web font.
Custom CSS is additive: it is loaded after the selected theme’s stylesheet, so anything you’ve defined continues to apply on top of the theme. A form with orange headings in Classic will have orange headings in 2026 Refresh too.
One thing to be aware of when moving a form with existing custom CSS to the 2026 Refresh theme: the theme’s rules are scoped to the form container (#formApp) so they can override the classic stylesheets. A very general rule such as h3 { color: orange } may therefore lose to the theme’s own heading colour. If a rule stops applying after switching theme, prefix it with #formApp (e.g. #formApp h3 { color: orange }) or add !important - most existing custom CSS already does one or the other, because the same was needed to override Bootstrap’s defaults.
The 2026 Refresh theme also exposes a handful of CSS custom properties on #formApp that you can override to retune it without replacing rules, for example:
<style>
#formApp {
--fba-font-size: 16px; /* body, label and control text size */
--fba-space: 18px; /* gap between questions */
--fba-group-bg: transparent; /* no group panels, just the gap */
--fba-group-border: transparent;
}
</style>
See Display Content for applying a CSS class to an individual element.