Themes & Styling

A well-designed form builds trust and improves completion rates. BttrForm gives you full control over the visual appearance of your forms — from one-click theme presets to fine-grained custom CSS. This guide covers every styling option available.

Theme Presets

BttrForm includes a library of professionally designed theme presets that you can apply with a single click. Open the form builder and click the "Themes" tab in the right sidebar to browse available themes.

Each preset controls:

• Background color and pattern
• Field border style and radius
• Button colors and hover states
• Typography (font family, sizes, weights)
• Spacing and padding

Available Theme Categories

Color Customization

Beyond presets, you can customize individual colors to match your brand identity. Open Themes > Colors to access the color controls:

Customizable Color Properties

• Primary Color — buttons, links, active states, and progress indicators
• Background Color — form background (supports solid colors and gradients)
• Text Color — labels, help text, and content blocks
• Field Background — input field background color
• Field Border — input field border color (default, focus, and error states)
• Error Color — validation error text and borders
• Success Color — success messages and confirmation states

Enter colors as hex values, RGB, or HSL. The color picker also includes an eyedropper tool to sample colors from anywhere on your screen.

Primary:    #2563EB (BttrForm blue)
Background: #FFFFFF (white)
Text:       #1E293B (slate-800)
Fields:     #F8FAFC (slate-50)
Border:     #CBD5E1 (slate-300)
Error:      #DC2626 (red-600)
Success:    #16A34A (green-600)

Gradient Backgrounds

Enable gradients for the form background by toggling "Use gradient" in the background color section. You can set:

• Start and end colors
• Gradient direction (top to bottom, left to right, diagonal, radial)
• Optional background pattern overlay

Typography

Click Themes > Fonts to customize the typography of your form.

Font Selection

BttrForm includes a curated library of web fonts, all optimized for fast loading:

• Sans-serif — Inter, Poppins, Open Sans, Lato, Nunito, Roboto
• Serif — Merriweather, Playfair Display, Lora, Source Serif
• Monospace — JetBrains Mono, Fira Code (for technical forms)
• System — uses the visitor's system font for the fastest loading

You can set different fonts for headings and body text to create visual hierarchy.

Font Sizing

Control the base font size to make your form more readable:

Field Styling

Customize the appearance of form fields in Themes > Fields:

Border Radius

Control the roundness of field corners:

• Sharp (0px) — clean, corporate feel
• Subtle (4px) — default, balanced
• Rounded (8px) — modern, friendly
• Pill (24px) — very rounded, playful

Border Width

Choose between no border, thin (1px), medium (2px), or thick (3px) borders.

Field Shadow

Add a subtle shadow to fields for depth. Options include none, small, medium, and large shadows.

Focus State

Customize what happens when a respondent clicks into a field:

• Border color change (default: primary color)
• Glow/ring effect
• Background color shift

Button Styling

The submit button is one of the most important visual elements. Customize it in Themes > Buttons:

• Button color — background and text color
• Hover state — color shift or animation on hover
• Border radius — match or contrast with field radius
• Width — full width, auto width, or fixed width
• Size — small, medium, large, or extra-large padding
• Icon — optional leading or trailing icon (arrow, check, send)

Button:
  Text: "Submit Feedback"
  Background: #2563EB
  Text color: #FFFFFF
  Hover background: #1D4ED8
  Border radius: 8px
  Width: Full
  Size: Large

Custom CSS

For complete control, inject custom CSS that overrides any theme setting. Open Themes > Custom CSS and enter your styles:

/* Custom CSS example */
.bttrform-container {
  font-family: 'Your Custom Font', sans-serif;
}

.bttrform-field-input {
  border: 2px solid #E5E7EB;
  transition: border-color 0.2s ease;
}

.bttrform-field-input:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.bttrform-submit-button {
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  font-weight: 600;
  letter-spacing: 0.025em;
}

CSS Class Reference

Design Templates

Design templates combine theme presets with pre-built layouts for specific use cases. They provide a starting point that you can customize further.

Available templates include:

• Contact Us — clean two-column layout with a sidebar for contact details
• Survey — spacious single-column layout with progress bar
• Registration — multi-step layout with section headers
• Feedback — compact layout with rating fields prominently placed
• Application — formal layout with file upload sections

Apply a template from Themes > Templates. Templates set the theme, layout, and sample fields — you replace the sample content with your own.

Logo and Branding

Upload your logo in Themes > Branding to display it at the top of your form. Supported formats include PNG, SVG, and JPEG. You can control:

• Logo placement (left, center, right)
• Logo size (small, medium, large)
• Spacing below the logo

Next Steps

• Field Types — explore every field option available
• Multi-step Forms — design multi-page experiences
• Publishing & Sharing — share your styled form with the world