Beginner5 min

Form Styling

Customize how your forms look to match your brand and create a professional experience.

Theme Selection

Built-in Themes

Choose from preset themes:

  • Light - Clean white background
  • Dark - Dark mode friendly
  • Brand - Uses your brand colors
  • Minimal - Simple, borderless

Applying a Theme

  1. Open form settings
  2. Click Appearance
  3. Select a theme
  4. Preview changes

Custom Colors

Primary Color

Used for:

  • Submit button
  • Active field borders
  • Progress indicators

Background Color

Form container background:

  • Solid color
  • Transparent (inherits page)

Text Colors

  • Label color
  • Input text color
  • Help text color
  • Error text color

Field Colors

  • Field background
  • Border color
  • Focus border color

Typography

Font Family

Choose from web-safe fonts:

  • System default
  • Inter
  • Open Sans
  • Roboto
  • Or enter custom font

Font Sizes

Adjust sizes for:

  • Form title
  • Field labels
  • Input text
  • Help text

Font Weight

  • Labels: Normal or bold
  • Headings: Medium to bold

Layout Options

Width

  • Full width
  • Fixed width (400px, 600px, 800px)
  • Custom width

Alignment

Form position on page:

  • Left
  • Center
  • Right

Field Layout

  • Stacked (label above)
  • Inline (label beside)
  • Floating labels

Spacing

Adjust gaps:

  • Between fields
  • Between sections
  • Padding around form

Field Styling

Input Style

  • Outlined - Border around field
  • Filled - Background color
  • Underlined - Bottom border only

Border Radius

Make corners:

  • Square (0px)
  • Slightly rounded (4px)
  • Rounded (8px)
  • Pill (full)

Field Size

  • Small
  • Medium (default)
  • Large

Button Styling

Submit Button

  • Text ("Submit", "Send", custom)
  • Size
  • Full width toggle
  • Icon (optional)

Button Style

  • Solid (filled)
  • Outline
  • Ghost (text only)

Hover Effects

  • Color change
  • Shadow
  • Scale

Progress Indicator

For multi-page forms:

  • Steps - Numbered steps
  • Progress bar - Percentage
  • None - Hidden

Position

  • Top of form
  • Below title

Branding

Logo

Add your logo:

  1. Upload image
  2. Set position (left, center)
  3. Set size

Footer

Add footer text:

  • Copyright notice
  • Privacy link
  • Custom HTML

Custom CSS

For advanced customization:

/* Target specific elements */
.form-container {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-field input {
  font-size: 16px;
}

.submit-button {
  text-transform: uppercase;
}

Adding Custom CSS

  1. Go to Appearance > Advanced
  2. Enter CSS in the custom styles box
  3. Preview changes

Available Classes

  • .form-container - Main wrapper
  • .form-field - Field container
  • .form-label - Field label
  • .form-input - Input element
  • .submit-button - Submit button
  • .error-message - Validation errors

Responsive Design

Forms automatically adapt to screen size:

Mobile

  • Full width fields
  • Larger touch targets
  • Simplified layout

Tablet

  • Adjusted spacing
  • Comfortable sizing

Desktop

  • Your configured layout
  • Maximum width applied

Preview & Test

Before publishing:

  1. Click Preview
  2. Test on different screen sizes
  3. Check all themes if applicable
  4. Verify branding appears correctly

Next Steps

Tags

formsstylingdesign