56. CSS Customization | Form Forge - Build Forms with AI in Seconds

Form Forge uses BEM-inspired naming with formforge- and ff- prefixes.

Key CSS Classes

Class	Element
`.formforge-wrap`	Outermost form container
`.formforge-form`	The element
`.formforge-field`	Field wrapper div
`.formforge-field--{type}`	Type-specific modifier
`.formforge-label`	Field label
`.formforge-input`	Text/email/number inputs
`.formforge-textarea`	Textarea fields
`.formforge-select`	Dropdown selects
`.formforge-submit-btn`	Submit button
`.formforge-message`	Success/error message
`.formforge-step`	Multi-step page container
`.formforge-progress`	Progress bar container
`.ff-conversational`	Conversational mode wrapper
`.ff-conv-step`	Conversational step

CSS Custom Properties

#formforge-42 {
    --ff-accent: #3B82F6;
    --ff-accent-hover: #2563EB;
    --ff-radius: 10px;
    --ff-border-color: #e2e8f0;
    --ff-text-color: #1e293b;
    --ff-label-color: #334155;
    --ff-error-color: #ef4444;
    --ff-bg: #ffffff;
    --ff-input-bg: #f8fafc;
}

Builder Style Config

The no-code builder stores style choices in JSON and renders them as sanitized inline declarations. This is intentional: it lets a form created on one theme keep its exact previewed design when embedded on another page.

Field-level style shape:

{
  "styles": {
    "wrapper": { "background_color": "#fff7ed", "border_radius": 14, "padding": 18 },
    "label": { "font_size": 18, "text_color": "#7c2d12", "font_weight": "700" },
    "control": { "border_color": "#2563eb", "border_radius": 12, "custom_css": "letter-spacing: 1px;" },
    "description": { "text_color": "#047857" }
  }
}

Form-level style shape:

{
  "settings": {
    "styles": {
      "form": { "background_color": "#f1f5f9", "border_radius": 20, "padding": 28 },
      "submit": { "background_color": "#1d4ed8", "text_color": "#ffffff", "custom_css": "text-transform: uppercase;" },
      "message": { "background_color": "#d1fae5", "text_color": "#065f46" }
    }
  }
}

Custom CSS is declarations-only. Accepted declaration properties are letter-spacing, line-height, text-transform, text-align, and border-style. Values containing braces, HTML, @ rules, url(), expression(), javascript:, data:, or old IE behavior are discarded.

Responsive Override

@media (max-width: 640px) {
    .formforge-submit-btn {
        width: 100%;
    }
    .formforge-step-nav {
        flex-direction: column;
        gap: 8px;
    }
}

—