Make your forms beautiful and on-brand with Tyform's theming system.

Theme Editor

Access the theme editor:

Open your form in the builder
Click the Theme tab
Customize colors, fonts, and styles

Color Settings

Primary Colors

Setting	Usage
Primary Color	Buttons, links, focus states
Background Color	Form background
Text Color	Question and body text
Secondary Text	Descriptions, placeholders

Button Colors

Setting	Usage
Button Background	Primary button fill
Button Text	Button label color
Button Hover	Hover state color

Use your brand's primary color for buttons. Ensure good contrast between button background and text.

Typography

Font Settings

Setting	Description
Heading Font	Question titles, welcome screen
Body Font	Descriptions, options, inputs
Font Size	Base size for all text

Available Fonts

Inter (default)
Roboto
Open Sans
Lato
Poppins
Montserrat
Playfair Display
Merriweather
Custom fonts (Pro)

Using Custom Fonts Pro

Go to Theme → Typography
Click Custom Font
Enter your Google Fonts URL or upload font files

Backgrounds

Solid Color

Simple, clean background color.

Gradient

Two-color gradient backgrounds:

Select Gradient
Choose start and end colors
Set angle (0-360°)

Image Background

Use a custom image:

Select Image
Upload your image
Adjust overlay opacity
Choose position (cover, contain, tile)

Use subtle backgrounds that don't distract from your questions. Ensure text remains readable.

Layout Options

Question Alignment

Left — Traditional form layout
Center — Focused, Typeform-style

Progress Bar

Option	Description
Top	Bar at top of screen
Bottom	Bar at bottom
Hidden	No progress indicator
Percentage	Show completion %
Steps	Show "3 of 10"

Preset Themes

Start with a preset and customize:

Theme	Style
Default	Clean, minimal
Dark Mode	Dark background, light text
Gradient	Modern gradient backgrounds
Corporate	Professional, subdued
Playful	Colorful, rounded
Minimal	Ultra-clean, no borders

Brand Kit Pro

Save brand settings to reuse across forms:

Create your theme
Click Save as Brand Kit
Name your brand kit
Apply to new forms instantly

Brand Kit Includes

All color settings
Typography choices
Logo
Background settings
Custom CSS

Custom CSS Pro

For advanced customization:

/* Example: Custom button style */
.tyform-button {
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Example: Question card style */
.tyform-question {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 2rem;
}