Design - Flex Forms

The Design panel lets you make every form feel like a native extension of your brand — available on all plans (Standard, Pro, and Enterprise). Open it from the canvas brand chrome (Design, next to logo and cover) — it is not in the Studio top bar.

Core Design Engine

Global Theme

Toggle between Light and Dark modes to set the foundational UI palette.

Typography Injection

Search the entire Google Fonts library directly within the Studio. The selected font is dynamically loaded for both your preview and live respondents.

Background & Typography Colors

Define the exact hex codes for the page background and primary reading text to ensure optimal contrast.

Call-to-Action Styling

Customize the Submit/Next button background and text colors to drive conversions.

The Accent Color

The Accent is the interactive heartbeat of your form. It dictates the color of hyperlinks, active input borders, progress bars, and selected choices.

Brand Consistency: If you are building internally, consider using your primary corporate brand color (e.g., #0070D7) as the Accent color to make the form feel instantly familiar.

Advanced layout controls

The Advanced section unlocks structural control over the fill layout — included on every plan.

Layout Architecture
Input Engineering
Button Schematics

Override defaults by defining exact pixel values for Content Width and Text Size. Upload high-resolution Logo and Cover Images, with granular control over logo rounding, scaling, and cover image positioning.

Custom CSS Injection

For pixel-perfect requirements that transcend visual controls, the Design panel includes a raw <style> code editor — included on every plan.

/* Example: Tighter letter spacing for a more branded fill look */
.ff-fill {
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

/* Example: Add a subtle shadow to inputs */
.ff-fill input[type="text"] {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Security & Scoping: Custom CSS is strictly sanitized before database storage to strip malicious scripts or @import rules. To prevent your CSS from bleeding into and breaking the Filament Admin UI during preview, always scope your custom selectors with .ff-fill.

Frequently Asked Questions

Do Design settings apply globally to all my forms?

No. Design settings are strictly scoped per form. This allows you to build a dark-themed, highly-customized marketing quiz while maintaining a clean, standard layout for internal HR requests.

How do I remove the 'Powered by Flex Forms' watermark?

Removing the branding watermark is a separate, server-validated capability. Navigate to Form Settings → General and disable Show Branding. (Requires a Pro or Enterprise license).

​Core Design Engine

​Advanced layout controls

​Custom CSS Injection

​Frequently Asked Questions

Core Design Engine

Advanced layout controls

Custom CSS Injection

Frequently Asked Questions