Themes & styles

Formtoro forms should look like they belong on your store. Themes set the overall look, and reusable styles keep individual elements consistent — so you change something once and it updates everywhere.

Your brand

When you onboard, Formtoro detects your storefront's color palette. You can review the detected brand and manage your own custom brand colors in Settings → Branding & themes — add swatches, edit them, or remove ones you don't use. These colors are handy building blocks when you design themes and styles.

Themes

A theme is a reusable design system applied to a whole form. It bundles:

• Design tokens — named values for colors, fonts, spacing, and border radius.
• Default styles for each kind of element — so every heading, button, and field starts with a consistent look.

Pick a theme when you create a form, or switch it later from the builder's Theme section.

Built-in vs. custom themes

• Built-in themes — Light and Dark ship with Formtoro and are read-only.
• Custom themes — your own themes, badged Custom. Create and manage them in Settings → Branding & themes, where you can duplicate, rename, and delete them, and see how many forms use each.

Editing a theme

From the builder's Theme section, choose Edit theme to open the theme editor. Adjust the tokens (colors, fonts, spacing, radius) and watch the form preview update live. Saving updates the theme everywhere it's used.

How themes and overrides stack

Styling resolves in a clear order, each layer winning over the one before:

1. Theme tokens — the design-system values.
2. Form-level token overrides — tweak the theme's tokens for this form only.
3. The theme's default style for the element's type.
4. A style class bound to the element (see below).
5. Element overrides — local tweaks on that one element.
6. Responsive overrides — per-breakpoint tweaks.

The practical rule: a local override always beats the theme. If the theme makes buttons blue but you set one button to red, that button stays red.

Reusable styles (custom classes)

A style is a named, reusable bundle of look-and-feel that you can apply to many elements of the same type. Edit the style once and every element using it updates — like a shared CSS class, but visual.

You manage these in the Style section at the top of an element's inspector. An unstyled element shows Theme default.

Create a style from an element

1. Select an element and style it the way you want (colors, spacing, borders…).
2. In the Style section, choose Create new Style from this element….
3. Give it a name (e.g. "Hero headline") and save.

The element is now bound to that style, and the style captures its current look.

Reuse it

• Apply to one element: select another element of the same type and pick the style from the Style dropdown.
• Apply to all of a kind: with an element selected, choose Match these styles on all to bring every same-type element on the form onto this style.

Edit once, update everywhere

When you change a style's definition, every element bound to it updates instantly. If you've made local tweaks to a single element and want them to become part of the shared style, choose Update this Style to commit them; choose Create new Style from this element to split them into a new style instead.

Styles vs. overrides

Local tweaks you make to an element (color, padding, per-breakpoint changes) are stored on that element, layered on top of its style — they don't change the shared style until you explicitly Update this Style. This lets one element deviate slightly without affecting its siblings. The Style section shows how many changes you've made on the current element and lets you Reset them back to the style.

Manage styles

Use the manage menu in the Style section to Rename, Duplicate, or Delete a style. Deleting a style that's in use preserves each element's current look as element-specific styling, so nothing visually breaks.

Next steps

• Layout & responsive design — arrange and adapt elements.
• Building forms — the elements you'll be styling.