Skip to Content
Building🎨 Theming

Theming & Customization

Customize your form’s appearance to match your brand with FormFlow’s comprehensive theming options. Control every aspect of your form’s visual design.

Button Styling

Primary Buttons (Submit, Next)

  • Background Color: Default #3b82f6 (blue)
  • Text Color: Default #ffffff (white)
  • Live Preview: See changes in real-time

Secondary Buttons (Previous, Cancel)

  • Background Color: Default #6b7280 (gray)
  • Text Color: Default #ffffff (white)
  • Customization: Match your brand colors

Typography Settings

Form Title

  • Text Color: Default #1f2937 (dark gray)
  • Font Size: Small to 2X Large (default: 2X Large - 24px)
  • Font Weight: Normal to Bold (default: Semi Bold - 600)
  • Alignment: Left, Center, Right
  • Font Family: Sans Serif, Serif, Monospace

Form Description

  • Text Color: Default #6b7280 (medium gray)
  • Font Size: Small to Large (default: Medium - 16px)
  • Font Weight: Normal to Bold (default: Normal - 400)
  • Alignment: Left, Center, Right

Page Titles (Multi-page forms)

  • Text Color: Default #374151 (dark gray)
  • Font Size: Small to Extra Large (default: Extra Large - 20px)
  • Font Weight: Normal to Bold (default: Semi Bold - 600)

Field Labels

  • Text Color: Default #374151 (dark gray)
  • Font Size: Small to Large (default: Medium - 16px)
  • Font Weight: Normal to Bold (default: Medium - 500)

Field Descriptions

  • Text Color: Default #6b7280 (medium gray)
  • Font Size: Small to Medium (default: Small - 14px)
  • Font Weight: Normal to Bold (default: Normal - 400)

Error Messages

  • Text Color: Default #dc2626 (red)
  • Font Size: Small to Medium (default: Small - 14px)
  • Font Weight: Normal to Bold (default: Medium - 500)

Layout Options

Form Position

  • Full Left: Form aligned to left side
  • Full Right: Form aligned to right side
  • Center: Form centered on page (most common)
  • Left: Form on left with content on right
  • Right: Form on right with content on left
  • Full: Form spans full width

Layout Settings

  • Spacing: Normal, Compact, Spacious
  • Form Width: Normal, Wide, Narrow
  • Border Radius: Customize corner rounding (default: 8px)

Form Header

  • Hide Form Title: Remove main form title
  • Hide Form Description: Remove form description

Multi-page Forms

  • Progress Indicator: Show completion progress
  • Previous Button: Customize text and theme
  • Next Button: Customize text and theme
  • Submit Button: Customize text and theme

Best Practices

Color Selection

  • Use brand colors consistently
  • Ensure sufficient contrast for accessibility
  • Test colors on different devices

Typography

  • Create clear visual hierarchy
  • Choose readable fonts
  • Maintain consistency throughout
  • Optimize for mobile devices

Layout Design

  • Use appropriate spacing
  • Guide users through logical flow
  • Ensure responsive design
  • Prioritize usability

Next Steps

Last updated on
📝 Supported Columns🔒 Privacy Policy