> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formflows.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Styling
> Customize the colors, fonts, branding, and layout of your forms to match your product or website.
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
Go to your Forms dashboard, find the form you want to style, and click **Edit**.
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.
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.
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.
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.
| Property | What it affects |
| ------------------------ | ---------------------------------------------------------------------------------------- |
| **Primary color** | Submit button background, focus rings, selected option highlights, and progress bar fill |
| **Background color** | The page background behind the form card |
| **Form card background** | The background of the form container itself |
| **Label color** | Field question labels |
| **Input background** | The background of text inputs, dropdowns, and similar fields |
| **Input border color** | The border color of unfocused input fields |
| **Input focus color** | The border color when a field is active/focused |
| **Error color** | Validation error messages and invalid field borders |
| **Text color** | Body 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.
In the Theme panel, scroll to the **Branding** section.
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.
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.
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.
In the Theme panel, scroll to the bottom and click **Custom CSS**. A code editor opens with syntax highlighting.
FormFlows.ai exposes its theme values as CSS custom properties on the `:root` element. Overriding these is more reliable than targeting internal class names.
```css custom.css theme={null}
:root {
--ff-primary: #7C3AED;
--ff-radius-field: 4px;
--ff-font-label-weight: 600;
--ff-spacing-field: 24px;
}
```
You can also write standard CSS rules targeting form elements. Use your browser's inspector on the form preview to identify selectors.
```css custom.css theme={null}
/* 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;
}
```
Click **Save**. The form preview updates immediately. Check both desktop and mobile views before publishing.
## Next steps
Add your styled form to any website with an embed snippet.
Share a direct link to your hosted form page.