Form Styles

Form Styles

Customize the appearance of your forms to match your brand and design requirements. The form builder provides extensive styling options for creating beautiful, professional forms.

Style Configuration

Typography

Control the font family, size, and weight used throughout your form:

styleConfig: {
  typography: {
    fontFamily: "Inter, sans-serif",
    fontSize: {
      label: "14px",
      input: "16px",
      helper: "12px"
    },
    fontWeight: {
      label: 600,
      input: 400
    }
  }
}

Color Scheme

Define your form’s color palette:

styleConfig: {
  colors: {
    primary: "#3B82F6",
    secondary: "#64748B",
    error: "#EF4444",
    success: "#10B981",
    background: "#FFFFFF",
    text: "#1F2937",
    border: "#E5E7EB"
  }
}

Spacing

Configure spacing between form elements:

styleConfig: {
  spacing: {
    fieldGap: "24px",
    labelMargin: "8px",
    padding: {
      input: "12px 16px",
      container: "32px"
    }
  }
}

Border & Radius

Customize border styles and corner radius:

styleConfig: {
  borders: {
    width: "1px",
    style: "solid",
    radius: {
      input: "8px",
      button: "6px",
      container: "12px"
    }
  }
}

Theming

Predefined Themes

Choose from built-in themes:

• Modern: Clean and minimalist design
• Classic: Traditional form styling
• Material: Material Design inspired
• Glassmorphism: Modern glass effect
• Dark Mode: Dark theme optimized

{
  theme: "modern",
  darkMode: false
}

Custom Theme

Create a fully custom theme:

{
  theme: "custom",
  styleConfig: {
    // Your custom styles here
  }
}

Responsive Design

Forms automatically adapt to different screen sizes. You can customize breakpoints:

styleConfig: {
  responsive: {
    mobile: {
      maxWidth: "640px",
      fieldLayout: "vertical",
      fontSize: "16px"
    },
    tablet: {
      maxWidth: "1024px",
      fieldLayout: "grid",
      columns: 2
    },
    desktop: {
      fieldLayout: "grid",
      columns: 3
    }
  }
}

Field-specific Styling

Override styles for specific field types:

{
  type: "short-text",
  name: "email",
  customStyles: {
    container: {
      backgroundColor: "#F9FAFB",
      padding: "16px"
    },
    input: {
      borderColor: "#3B82F6",
      borderWidth: "2px"
    },
    label: {
      color: "#1F2937",
      fontWeight: 700
    }
  }
}

CSS Classes

Add custom CSS classes to form elements:

{
  className: "custom-form",
  fieldClassName: "custom-field",
  labelClassName: "custom-label"
}

Best Practices

1. Consistency: Use a consistent color scheme throughout your form
2. Accessibility: Ensure sufficient color contrast for text and backgrounds
3. Mobile-First: Design for mobile devices first, then enhance for larger screens
4. Brand Alignment: Match your form’s styling to your brand guidelines
5. Loading States: Include appropriate visual feedback during loading
6. Error States: Make error messages visually distinct and easy to understand
7. Focus States: Provide clear visual feedback when fields are focused

Examples

Clean Modern Form

{
  theme: "custom",
  styleConfig: {
    colors: {
      primary: "#2563EB",
      background: "#FFFFFF",
      text: "#111827",
      border: "#D1D5DB"
    },
    typography: {
      fontFamily: "Inter, system-ui, sans-serif",
      fontSize: { label: "14px", input: "16px" }
    },
    borders: {
      radius: { input: "8px", button: "8px" }
    }
  }
}

Dark Mode Form

{
  theme: "dark",
  styleConfig: {
    colors: {
      primary: "#3B82F6",
      background: "#1F2937",
      text: "#F9FAFB",
      border: "#374151"
    }
  }
}