Themes & styles

Formtoro forms should look like they belong on your store. Your brand colors feed every color picker, a theme sets a form's overall look, and reusable Styles keep individual elements consistent — change something once and it updates everywhere it's used.

Your brand

When you onboard, Formtoro detects your storefront's palette — Primary, Secondary, Background, and Text. Review and edit these in Settings → Branding & Themes, and add your own named custom colors alongside them. Everything you save here appears as quick-pick swatches in every color picker across the builder, so your exact brand hex values are always one click away.

On-brand from the very first step

The create-form wizard uses your brand before you've styled anything:

The design gallery renders each template as a live preview with your brand layered on. Each design keeps its signature look — your brand accent and typography are applied only where they stay legible against that design's own background, so a preview is never unreadable.
The color step then offers every palette as a live card, with your own custom themes listed first.

New forms come out looking like your store — the wizard is usually the fastest way to an on-brand starting point.

Themes

A theme is a reusable design system applied to a whole form. It bundles design tokens — named values for colors, fonts, spacing, and corner radius — plus a default look for every kind of element, so every heading, button, and field starts consistent.

Every form renders with a theme; a form that never picked one uses Simple.

Built-in themes — nearly thirty designs ship with Formtoro, from the neutral Simple and Dark to opinionated palettes like Editorial, Neon, and Onyx. Built-ins are read-only.
Custom themes — your own copies, badged Custom. You get one by duplicating a built-in on the Branding page, or automatically the first time you edit a built-in theme in the builder (see below).

Switching a form's theme

In the builder, the Theme section (in the Form scope of the inspector) shows the active theme with a small preview. Change opens the Choose a theme modal — built-ins first, then your custom themes. Picking a theme restyles the whole form at once, and switching is clean: the old theme's element styles are swapped out entirely, so no stale styling is left behind. Your content, layout, and any reusable Styles you created are untouched.

Editing a theme

Edit in the Theme section opens the theme editor — token controls on the left (Brand colors, Typography, Spacing, Radius) and a live preview of your actual form on the right.

Save palette commits your changes. Discard changes reverts them. Closing without saving keeps your edits as a pending buffer — the canvas keeps the new look and an Unsaved badge reminds you to reopen and save.
Editing a built-in theme never changes the built-in. Your first save creates a custom copy (named like "Neon (custom)"), assigns it to the form, and applies your edits there. The editor tells you this up front.
Editing a custom theme updates every form that uses it. A warning in the editor states the blast radius before you save. Draft forms pick up the change next time you open them; a live form keeps serving its published look until you save a new version — see republish after changing shared settings.
Custom themes can also be renamed from the Theme section (Rename theme).

Managing custom themes

Custom themes can be deleted from two places: the Branding page (each custom theme card shows how many forms use it, with a drill-down to see which) and the builder's theme picker (a delete icon on any custom theme that isn't currently active).

Deleting is guarded: if any form still uses the theme, the delete is blocked unless you explicitly confirm the force option — then drafts fall back to the default theme, while live published versions continue serving their snapshot normally.

How styling stacks

When Formtoro decides how an element looks, each layer wins over the one before it:

The theme's default look for that kind of element.
A Style applied to the element (see below).
Your tweaks on that one element — colors, spacing, borders.
Per-breakpoint tweaks — mobile/tablet/desktop responsive overrides.

The practical rule: a local change always beats the theme. If the theme makes buttons blue and you set one button to red, that button stays red — even if you later edit or switch the theme.

Reusable Styles

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

You manage Styles in the Style section at the top of an element's inspector. An element with no Style shows Theme default.

Create a Style from an element

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

The element is now bound to that Style, which captures its current look.

Reuse it

Apply to one element — select another element of the same kind and pick the Style from the dropdown.
Apply to all of a kind — choose Match these styles on all to bring every same-kind element on the form onto this element's styling in one go.

Edit once, update everywhere

Tweaks you make to a styled element stay on that element — they don't change the shared Style until you say so. The Style section counts your changes and shows an Update available badge:

Update this Style commits your tweaks into the Style — every element using it updates instantly.
Create new Style from this element splits your tweaks into a separate new Style instead.
Reset all discards the tweaks and returns the element to the Style as defined.

This lets one element deviate slightly without affecting its siblings — and lets you promote a good deviation to the standard when you're ready.

Manage Styles

The manage menu in the Style section offers Rename, Duplicate, and Delete. Deleting a Style keeps each element's current look — the styling is preserved on the elements themselves, so nothing visually breaks. If the Style is still used in other places, Formtoro blocks the delete and lists exactly where it's used so you can unbind those first.

Next steps

Building forms — the builder where themes and Styles come together.
Layout & responsive design — arrange elements and fine-tune each breakpoint.
Going live — why a live form needs a new version to pick up theme changes.
Luigi — ask Luigi to restyle elements for you.

Themes & styles

On this page