Skip to main content
Arcanflows

Custom Styling

Customize the appearance of your forms to match your brand.

Overview

Arcanflows forms can be fully customized to match your brand. Use built-in themes, customize colors, or add custom CSS for complete control.

Theme Selection

Built-in Themes

ThemeDescription
DefaultClean, modern appearance
MinimalSubtle borders, minimal styling
RoundedSoft, rounded corners
FlatNo shadows, flat design
MaterialMaterial Design inspired
DarkDark mode theme
json
{
  "styling": {
    "theme": "rounded"
  }
}

Color Schemes

json
{
  "styling": {
    "colorScheme": "auto",
    "colors": {
      "primary": "#6366F1",
      "secondary": "#7679C3",
      "success": "#10B981",
      "error": "#EF4444",
      "warning": "#F59E0B",
      "background": "#FFFFFF",
      "surface": "#F9FAFB",
      "text": "#111827",
      "textSecondary": "#6B7280",
      "border": "#E5E7EB"
    }
  }
}

Form Container

Container Styling

json
{
  "styling": {
    "container": {
      "maxWidth": "600px",
      "padding": "32px",
      "backgroundColor": "#FFFFFF",
      "borderRadius": "12px",
      "boxShadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
    }
  }
}

Form Title

json
{
  "styling": {
    "title": {
      "fontSize": "24px",
      "fontWeight": "600",
      "color": "#111827",
      "marginBottom": "8px",
      "textAlign": "center"
    },
    "description": {
      "fontSize": "14px",
      "color": "#6B7280",
      "marginBottom": "24px",
      "textAlign": "center"
    }
  }
}

Field Styling

Labels

json
{
  "styling": {
    "label": {
      "fontSize": "14px",
      "fontWeight": "500",
      "color": "#374151",
      "marginBottom": "4px"
    },
    "requiredIndicator": {
      "color": "#EF4444",
      "content": "*"
    }
  }
}

Input Fields

json
{
  "styling": {
    "input": {
      "height": "40px",
      "padding": "8px 12px",
      "fontSize": "14px",
      "backgroundColor": "#FFFFFF",
      "borderWidth": "1px",
      "borderColor": "#D1D5DB",
      "borderRadius": "6px",
      "focus": {
        "borderColor": "#6366F1",
        "boxShadow": "0 0 0 3px rgba(99, 102, 241, 0.1)"
      },
      "error": {
        "borderColor": "#EF4444",
        "backgroundColor": "#FEF2F2"
      }
    }
  }
}

Placeholder Text

json
{
  "styling": {
    "placeholder": {
      "color": "#9CA3AF",
      "fontStyle": "normal"
    }
  }
}

Help Text

json
{
  "styling": {
    "helpText": {
      "fontSize": "12px",
      "color": "#6B7280",
      "marginTop": "4px"
    }
  }
}

Error Messages

json
{
  "styling": {
    "errorMessage": {
      "fontSize": "12px",
      "color": "#EF4444",
      "marginTop": "4px",
      "icon": true
    }
  }
}

Button Styling

Submit Button

json
{
  "styling": {
    "submitButton": {
      "backgroundColor": "#6366F1",
      "color": "#FFFFFF",
      "fontSize": "14px",
      "fontWeight": "500",
      "padding": "10px 20px",
      "borderRadius": "6px",
      "width": "full",
      "hover": {
        "backgroundColor": "#4F46E5"
      },
      "disabled": {
        "backgroundColor": "#9CA3AF",
        "cursor": "not-allowed"
      }
    }
  }
}

Secondary Buttons

json
{
  "styling": {
    "secondaryButton": {
      "backgroundColor": "transparent",
      "color": "#6366F1",
      "borderWidth": "1px",
      "borderColor": "#6366F1",
      "hover": {
        "backgroundColor": "#EEF2FF"
      }
    }
  }
}

Selection Fields

Checkboxes

json
{
  "styling": {
    "checkbox": {
      "size": "18px",
      "borderRadius": "4px",
      "borderColor": "#D1D5DB",
      "checkedBackgroundColor": "#6366F1",
      "checkedBorderColor": "#6366F1",
      "checkmarkColor": "#FFFFFF"
    }
  }
}

Radio Buttons

json
{
  "styling": {
    "radio": {
      "size": "18px",
      "borderColor": "#D1D5DB",
      "selectedColor": "#6366F1",
      "dotColor": "#FFFFFF"
    }
  }
}

Dropdowns

json
{
  "styling": {
    "dropdown": {
      "backgroundColor": "#FFFFFF",
      "borderRadius": "6px",
      "boxShadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
      "option": {
        "padding": "8px 12px",
        "hover": {
          "backgroundColor": "#F9FAFB"
        },
        "selected": {
          "backgroundColor": "#EEF2FF"
        }
      }
    }
  }
}

Typography

Font Family

json
{
  "styling": {
    "typography": {
      "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
      "headingFontFamily": "'Inter', sans-serif"
    }
  }
}

Custom Fonts

To use custom fonts:

  1. Add font to your website
  2. Reference in form config:
json
{
  "styling": {
    "customFonts": [
      {
        "family": "Poppins",
        "url": "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      }
    ],
    "typography": {
      "fontFamily": "'Poppins', sans-serif"
    }
  }
}

Custom CSS

CSS Classes

Add custom classes to any field:

json
{
  "type": "text",
  "label": "Name",
  "className": "my-custom-field highlight-field"
}

Global Custom CSS

Add custom CSS that applies to the entire form:

json
{
  "styling": {
    "customCSS": ".form-container { max-width: 500px; } .form-field:focus-within { transform: scale(1.01); } .submit-button { transition: all 0.2s ease; }"
  }
}

CSS Variables

Override CSS variables for quick customization:

css
:root {
  --af-primary: #6366F1;
  --af-primary-hover: #4F46E5;
  --af-error: #EF4444;
  --af-success: #10B981;
  --af-border-radius: 6px;
  --af-input-height: 40px;
  --af-font-size: 14px;
  --af-spacing: 16px;
}

Branding

json
{
  "branding": {
    "logo": {
      "url": "https://yoursite.com/logo.png",
      "height": "40px",
      "position": "top-center"
    }
  }
}

Header/Footer

json
{
  "branding": {
    "header": {
      "content": "<div class='custom-header'>Company Name</div>",
      "backgroundColor": "#6366F1",
      "textColor": "#FFFFFF"
    },
    "footer": {
      "content": "© 2025 Company Name. All rights reserved.",
      "links": [
        { "text": "Privacy", "url": "/privacy" },
        { "text": "Terms", "url": "/terms" }
      ]
    }
  }
}

Powered By Badge

json
{
  "branding": {
    "poweredBy": {
      "show": true,
      "position": "bottom-right"
    }
  }
}

Responsive Design

Breakpoints

json
{
  "styling": {
    "responsive": {
      "mobile": {
        "maxWidth": "640px",
        "container": {
          "padding": "16px"
        },
        "input": {
          "fontSize": "16px"
        }
      },
      "tablet": {
        "maxWidth": "768px",
        "container": {
          "padding": "24px"
        }
      }
    }
  }
}

Animation

Field Transitions

json
{
  "styling": {
    "animations": {
      "enabled": true,
      "fieldFocus": "scale",
      "fieldError": "shake",
      "pageTransition": "slide",
      "duration": "200ms"
    }
  }
}

Progress Animation

json
{
  "styling": {
    "progress": {
      "animation": "smooth",
      "color": "#6366F1",
      "backgroundColor": "#E5E7EB",
      "height": "4px"
    }
  }
}

Example Configurations

Modern Minimal

json
{
  "styling": {
    "theme": "minimal",
    "colors": {
      "primary": "#000000",
      "border": "#E5E7EB"
    },
    "input": {
      "borderWidth": "0 0 1px 0",
      "borderRadius": "0",
      "padding": "8px 0"
    },
    "submitButton": {
      "backgroundColor": "#000000",
      "borderRadius": "0"
    }
  }
}

Vibrant Brand

json
{
  "styling": {
    "theme": "rounded",
    "colors": {
      "primary": "#7679C3",
      "background": "#F5F3FF"
    },
    "container": {
      "borderRadius": "24px",
      "boxShadow": "0 25px 50px -12px rgba(139, 92, 246, 0.25)"
    },
    "input": {
      "borderRadius": "12px"
    },
    "submitButton": {
      "borderRadius": "12px",
      "background": "linear-gradient(135deg, #7679C3, #6366F1)"
    }
  }
}

Best Practices

  1. Maintain readability - Ensure sufficient contrast
  2. Be consistent - Use the same styles throughout
  3. Test on devices - Check mobile appearance
  4. Keep it simple - Don't over-design
  5. Match your brand - Use consistent colors/fonts
  6. Consider accessibility - Use adequate font sizes