Make your form look like your brand: colors, logo, background, and custom CSS.
Overview
This chapter is about making the form look like it belongs to your business. When a form matches your brand, people trust it more and are more likely to complete it.
You can start with a ready-made theme, then fine‑tune:
- Logo (so users recognize your company)
- Primary and secondary colors (buttons, highlights, accents)
- Background (solid color, gradient, or image)
- Custom CSS (only when you need very specific styling)
Example: If you embed a “Support Request” form on your website, you can match the button color to your website theme and use a light background so the form stays easy to read.
How It Works
The form has built-in themes and multiple layout styles. On top of that, you can set primary/secondary colors, upload a logo, and choose a background style (solid color, gradient, image, or pattern). Custom CSS lets you override styling when needed.
Step-by-Step Guid
- Open your form.
- Select a Theme and Layout first (fastest way to get a good look).
- Upload a Logo if you want it shown in the header.
- Set Primary Color and Secondary Color.
- Choose a Background Style and configure its values.
- If needed, paste Custom CSS to refine spacing, fonts, or button style.
- Preview and adjust until it looks good on mobile.
Fields Table
| Label | Description | Example |
|---|---|---|
Color theme |
Preset style (Light, Dark, Blue, Green, etc.). |
Blue |
Logo |
Logo shown in the form header (if header is not hidden). |
AcmeLogo.png |
Main accent color |
Main button/highlight color. |
#007bff |
Secondary accent color |
Secondary accents (labels, borders, etc.). |
#6c757d |
Background style |
How the background is displayed: solid, gradient, image, pattern. |
Gradient |
Background color |
Color used when background is “solid”. |
#ffffff |
Background gradient |
Custom gradient when using “gradient”. |
linear-gradient(…) |
Background image |
Upload or link a background image. |
https://…/bg.jpg |
Custom CSS (advanced) |
Extra CSS to customize the form. |
.btn { border-radius: 14px; } |
Fields explanation
Color theme
The preset look (light/dark/colored styles)
Logo
Your brand logo shown in the form header
Main accent color
Main highlight color (buttons and key accents)
Secondary accent color
Secondary accent color (supporting highlights)
Background style
Background type (solid, gradient, image, pattern)
Background color
Color used when background style is solid
Background gradient
Gradient used when background style is gradient
Background image
Background image (upload or URL)
Custom CSS (advanced)
Extra styling rules to fine-tune the design
Tips
- Start with a theme, then adjust colors and logo.
- Keep background images subtle so text stays readable.
- If you use custom CSS, test it after changing layouts.
Common Mistakes
- Using low-contrast colors (text becomes hard to read).
- Uploading a very large background image (slower loading).
- Hiding header and then expecting the logo to show.