Themes and Styling
RapidForm gives you full control over how your forms look. Customize colors, fonts, border styles, and more to match your brand.
Theme Colors
You can set four colors that control the overall appearance of your form:
- Background — The form's background color.
- Text — The primary text color used for headings, labels, and content.
- Button — The submit button color and accent highlights.
- Accent — Used for focus rings and interactive element highlights.
Each color is set via a color picker in the builder's theme panel.
Font Selection
Choose from the following font families:
- Inter (default)
- Roboto
- Open Sans
- Playfair Display
Fonts are loaded from Google Fonts and applied to all text in the form including labels, inputs, and buttons.
Border Radius
Control the roundness of form elements:
- Rounded — Smooth, rounded corners on inputs, buttons, and the form container (default).
- Sharp — Square corners with no rounding, for a more angular look.
Light and Dark Mode
Toggle between light and dark mode:
- Light — White background with dark text (default).
- Dark — Dark background with light text.
Switching modes automatically adjusts the background, text, button, and accent colors to appropriate defaults. You can then further customize the colors after switching.
Heading Alignment
Control how the form title and description are aligned:
- Left (default)
- Center
- Right
Custom CSS (Business Plan)
Business plan users can apply custom CSS to their forms for advanced styling control.
DaisyUI Theme Generator Integration
RapidForm integrates with DaisyUI's theme generator. You can:
- Visit the DaisyUI Theme Generator and create a theme.
- Copy the generated CSS variables.
- Paste them into the Custom CSS field in the form builder.
RapidForm automatically parses the CSS, extracts color variables, and applies them safely to your form.
How Custom CSS Variables Work
Custom CSS uses --rf-color-* prefixed variables. When you paste DaisyUI theme CSS, the standard --color-* variables are automatically converted to --rf-color-* equivalents. The supported variables include:
--rf-color-base-100— Form background--rf-color-base-200— Input background--rf-color-base-300— Border color--rf-color-base-content— Text and label color--rf-color-primary— Button and accent color--rf-color-primary-content— Button text color
These variables override the theme color settings when present, giving you precise control over every element.
Writing Custom CSS
You can also write CSS directly. Variables are scoped to the .rf-form class, so they only affect your form and never leak into the host page.
Only --color-* prefixed variables are allowed for security. Other CSS properties are filtered out to prevent interference with the form's functionality.