Themes & Branding
Customize the visual appearance of your forms to match your brand. Change colors, fonts, backgrounds, button styles, and add your logo. No CSS required.
Accessing theme settings
- Open your form in the canvas builder
- Click Theme (paint palette icon) in the right panel
- Adjust settings; changes preview in real time
Theme settings
Colors
| Setting | Default | Description |
|---|---|---|
| Primary color | #1c3693 | Buttons, active states, progress bar |
| Background color | #FFFFFF | Form background |
| Text color | #1A1A1A | Question text and labels |
| Secondary text | #6B7280 | Descriptions and helper text |
| Error color | #EF4444 | Validation errors |
| Success color | #22C55E | Success messages and checkmarks |
Typography
| Setting | Options | Default |
|---|---|---|
| Font family | Inter, Roboto, Open Sans, Lato, Poppins, Playfair Display, or Custom | Inter |
| Question font size | 14px - 24px | 18px |
| Description font size | 12px - 18px | 14px |
| Font weight (questions) | Regular, Medium, Semibold, Bold | Semibold |
Backgrounds
| Setting | Options |
|---|---|
| Background type | Solid color, Gradient, Image |
| Gradient | Two-color gradient with direction control |
| Background image | Upload an image; supports blur and opacity overlays |
Buttons
| Setting | Options |
|---|---|
| Button style | Filled, Outlined, Rounded, Pill |
| Button color | Inherits primary color or custom |
| Button text color | Auto (white/dark based on contrast) or custom |
| Button size | Small, Medium, Large |
| Hover effect | Darken, Lighten, or None |
Branding
| Setting | Description |
|---|---|
| Logo | Upload your company logo; appears at the top of the form |
| Logo position | Left, Center, or Right |
| Logo size | Small (40px), Medium (60px), Large (80px) |
| Favicon | Custom browser tab icon for full-page forms |
| Powered by TinyCommand | Toggle the footer branding (removable on paid plans) |
Built-in themes
Start from a pre-built theme and customize from there:
| Theme | Description |
|---|---|
| Default | Clean white background, blue primary |
| Dark mode | Dark background, light text |
| Minimal | Stripped-down, no background, ultra clean |
| Professional | Neutral grays, serif font |
| Playful | Rounded shapes, vibrant colors |
| Elegant | Gradient background, premium feel |
To apply a built-in theme: Theme → Templates → Select theme → Apply
Custom CSS (advanced)
For complete control, inject custom CSS:
- Go to Theme → Advanced → Custom CSS
- Write CSS targeting TinyForms class names
/* Example: round all inputs */
.tf-input {
border-radius: 12px !important;
}
/* Example: custom progress bar */
.tf-progress-bar {
background: linear-gradient(90deg, #1c3693, #ec3957) !important;
}
Available CSS classes
| Class | Element |
|---|---|
.tf-form | Form wrapper |
.tf-question | Question container |
.tf-input | Text inputs |
.tf-select | Dropdown selects |
.tf-button | Buttons |
.tf-progress-bar | Progress bar |
.tf-error | Error messages |
.tf-label | Field labels |
Theme consistency
When you modify a theme, changes apply to:
- The live form
- All embed modes (standard, popup, slider, etc.)
- The form preview link
Themes are per-form. Each form has its own theme settings. To reuse a theme across multiple forms, save it as a custom template.
Start with a built-in theme that's close to your brand, then adjust the primary color and font. Most forms only need these two changes to look on-brand.
Custom CSS is available on paid plans only. The visual theme editor (colors, fonts, buttons) is available on all plans.