Skip to main content
FormFlows.ai gives you several layers of control over how your forms look — from choosing a pre-built theme to injecting custom CSS for precise visual control. Most styling options are accessible from the Theme panel in the form builder.

​
How to access the Theme panel

1

Open the form builder

Go to your Forms dashboard, find the form you want to style, and click Edit.
2

Open the Theme panel

In the top navigation bar of the builder, click the Theme icon (the paintbrush icon, or the Theme label depending on your screen size). The Theme panel opens on the right side, replacing the field settings panel.
3

Choose a base theme

Select one of the built-in themes from the Theme dropdown at the top of the panel. Available themes include Default, Minimal, Bold, Soft, and Dark. Each theme sets a coordinated combination of colors, typography, border radius, and spacing.The form preview on the left updates immediately as you make selections.
4

Customize individual properties

Adjust any individual property to override the base theme defaults. Changes layer on top of the theme — you don’t need to rebuild from scratch if you just want to change the primary color or font.
5

Save the theme

Click Save in the builder toolbar. The theme is saved to this form. To reuse the same theme across other forms, click Save as template to add it to your organization’s theme library.
For consistent branding across all your forms, save a custom theme with your brand colors and font to your theme library. When creating a new form, apply the saved theme first before adding fields — it takes less than 30 seconds and ensures every form your respondents see matches your visual identity.

​
Colors

The Colors section of the Theme panel controls the palette used throughout the form.
PropertyWhat it affects
Primary colorSubmit button background, focus rings, selected option highlights, and progress bar fill
Background colorThe page background behind the form card
Form card backgroundThe background of the form container itself
Label colorField question labels
Input backgroundThe background of text inputs, dropdowns, and similar fields
Input border colorThe border color of unfocused input fields
Input focus colorThe border color when a field is active/focused
Error colorValidation error messages and invalid field borders
Text colorBody text, descriptions, and helper text
You can enter any valid hex color (#3B82F6), RGB value, or use the built-in color picker.

​
Fonts

The Typography section lets you set the fonts used across the form.
  • Font family — choose from 30+ Google Fonts, or select System default to use the respondent’s operating system font stack
  • Base font size — sets the root font size in pixels (default: 16px); all other text sizes scale relative to this value
  • Label weight — set the font weight for field labels (normal, medium, or bold)
  • Heading weight — set the weight for page and section headings
Custom font families loaded from Google Fonts add a small network request when the form loads. If page load performance is a priority — for example, for forms embedded on high-traffic landing pages — consider using the System default font stack, which requires no external font loading.

​
Logo and branding

You can add your organization’s logo to the top of every form.
1

Open Branding settings

In the Theme panel, scroll to the Branding section.
2

Upload your logo

Click Upload logo and select an image file. Supported formats: PNG, SVG, JPEG, WebP. Recommended size: at least 200px wide at 2x resolution for sharp rendering on high-DPI screens. SVG is the best choice for logos as it scales without quality loss.
3

Set logo dimensions and alignment

Use the Width slider to set the display width (40–300px). Choose Left, Center, or Right alignment. The logo always appears in the header area above the first field or page title.
4

Configure the powered-by badge

On the free plan, a “Powered by FormFlows.ai” badge appears in the form footer. To remove it, upgrade to a paid plan and toggle off Show FormFlows.ai branding in the Branding section.

​
Progress bar

For multi-page forms, a progress bar shows respondents how far through the form they are.
  • Enable progress bar — toggle on in the Layout section of the Theme panel
  • Style — choose Bar (a horizontal fill bar) or Steps (numbered step indicators)
  • Position — display the progress bar at the Top or Bottom of the form
  • Show percentage — display the numeric completion percentage next to the bar
  • Show page title — display the current page name alongside the progress indicator

​
Section headers

Sections group related fields under a heading. You can style section headers independently from field labels. In the Typography section, set:
  • Section heading size — choose from Small, Medium, or Large, or enter a pixel value
  • Section heading color — defaults to the label color; override for visual hierarchy
  • Section divider — toggle a horizontal rule below each section heading

​
Spacing and layout

The Layout section controls whitespace and form dimensions.
  • Form width — set the maximum width of the form card (400–900px, default: 640px). Narrower forms work better for focused single-topic forms; wider forms suit multi-column layouts
  • Field spacing — the vertical gap between fields (Compact / Default / Relaxed)
  • Padding — internal padding inside the form card
  • Border radius — the corner roundness of the form card, input fields, and buttons (0px for sharp corners, up to 24px for fully rounded)
  • Box shadow — add a drop shadow to the form card (None / Subtle / Medium / Strong)

​
Mobile responsiveness

FormFlows.ai forms are responsive by default. On viewports narrower than 640px, the form automatically:
  • Switches to full-width layout
  • Adjusts font sizes for readability
  • Converts side-by-side columns to single-column stacks
  • Makes touch targets for buttons and inputs large enough for comfortable tapping
The Mobile subsection of the Theme panel lets you fine-tune mobile-specific behavior:
  • Mobile font size — override the base font size on small screens
  • Mobile padding — reduce padding on small screens to maximize usable form width
  • Keyboard type — for number and phone fields, the appropriate mobile keyboard (numeric, tel) is triggered automatically; no configuration needed
After styling your form, use your browser’s developer tools to preview the form at 375px width (iPhone viewport) before publishing. Look for any labels or descriptions that wrap awkwardly, and shorten them if needed.

​
Custom CSS

For styling requirements that go beyond the Theme panel controls, you can inject custom CSS directly into your form.
Custom CSS applies only to the embedded or hosted form itself — it does not affect the FormFlows.ai dashboard. CSS is evaluated after the theme stylesheet, so your rules take precedence. Be aware that CSS selectors targeting internal class names may break after platform updates. Use the documented CSS custom properties (variables) where possible for more stable overrides.
1

Open the Custom CSS editor

In the Theme panel, scroll to the bottom and click Custom CSS. A code editor opens with syntax highlighting.
2

Use CSS custom properties for stable overrides

FormFlows.ai exposes its theme values as CSS custom properties on the :root element. Overriding these is more reliable than targeting internal class names.
custom.css
:root {
  --ff-primary: #7C3AED;
  --ff-radius-field: 4px;
  --ff-font-label-weight: 600;
  --ff-spacing-field: 24px;
}
3

Target specific elements when needed

You can also write standard CSS rules targeting form elements. Use your browser’s inspector on the form preview to identify selectors.
custom.css
/* Make the submit button full-width */
.ff-submit-button {
  width: 100%;
}

/* Style section headings with a left border accent */
.ff-section-heading {
  border-left: 3px solid var(--ff-primary);
  padding-left: 12px;
}
4

Save and preview

Click Save. The form preview updates immediately. Check both desktop and mobile views before publishing.

​
Next steps

Embed your form

Add your styled form to any website with an embed snippet.

Share links

Share a direct link to your hosted form page.