Blog
How to Style a Form Without Touching CSS
Your form works. Someone fills it in, the response lands, nothing breaks. Then you put it next to your homepage and it's obvious the form came from somewhere else. Default blue button, grey labels squeezed together, corners rounded to the exact radius that says stock template.
The usual fix is a CSS panel, or a theme editor with thirty controls you poke one at a time until something looks right. Brieform has neither. All the styling lives in one MCP tool, set_form_theme, and you reach it by asking your AI client for it. Here is what that gets you, and where it stops.
Three ways to ask for a theme
There are exactly three inputs, and you pick one per call.
- A preset. Eight of them:
modern-blue,slate-professional,vibrant-green,elegant-violet,warm-rose,sunset-orange,corporate-neutral,minimal-stone. This is the fastest path and it costs no AI inference. If your reaction to one of those names is "yes, that", take it and move on. - A hex code and structured settings. Primary, secondary, accent, background and text colours, plus the visual style, the font, the border radius and the submit button (its label, its variant, its corners). Use this when you already know your brand colour and want it applied literally.
- A plain English description. You describe the feeling, Brieform's AI builds the theme object. This is the mode people underrate, because it handles the five or six decisions at once instead of making you name each one.
Every theme call hands back a preview URL. Look at it. That is the whole quality-control loop.
Describing a look in one sentence
This is the part worth copying. Not a toy example, an actual request:
Take my "Consultation request" form and theme it like a small litigation boutique would. Restrained, nothing bright, serif for the form title, lots of white space, square corners rather than rounded ones. Deep navy for the submit button and an off-white background instead of pure white. The button should read "Request a consultation", not "Submit". Give me the preview URL, don't publish it yet.
Then you open the preview on your phone, hate one thing, and say so:
The navy is so dark it looks black against the off-white, and the labels feel cramped on mobile. Keep the colours and the square corners, but lighten the button one step and switch the body text back to the system font. Leave the title serif.
Two messages, no colour picker. The second message matters more than the first, because the first pass is almost never the one you ship. Treat theming as a short conversation, not a form you fill in once.
The five styles and the five fonts
The style value is the biggest single lever: modern, classic, minimal, corporate, colorful. It sets the overall density and treatment before any of your colours are applied. Rough guide: minimal for anything where you want the questions to feel light and optional, corporate for procurement, HR and finance forms where people expect a certain flatness, classic for professional services, modern as the safe default, colorful for events, community and consumer signups. Descriptions only get you so far, so switch between two candidates and compare previews.
The font options are system, inter, serif, mono and rounded.
systemuses whatever the responder's device already has. It loads instantly and looks native, which is usually the right call for a form nobody chose to visit.interis the neutral product font. Safe, slightly more designed than system, never wrong.serifworks on a title. It is a poor choice for labels and placeholders. At 14px, a serif turns "Work email" into something that reads like fine print, and people slow down when they read a form, they don't savour it. If you want a serif firm, put the serif on the heading and keep the fields in system or Inter.monoonly for developer-facing forms: bug reports, API waitlists, changelog feedback. Anywhere else it reads as a terminal that wandered onto a marketing page.roundedfor consumer and community. Avoid it on anything asking for money, legal consent or personal data, where soft shapes undercut the seriousness of the question.
Design advice that holds no matter what tool you use
- Give the submit button real contrast. It is the only element on the page with a job. If you are supplying a hex, use the darkest colour in your brand, not the tint from your website's background wash. Check that white or near-black text sits legibly on it. A pastel button on a pale background is a button nobody sees.
- Spacing matters more on mobile than anywhere else. Most people will answer on a phone, one thumb, walking. Tightly stacked fields produce mis-taps, mis-taps produce abandonment. Pick the roomier style and open the preview URL on your actual phone, not a narrow browser window.
- Two colours are enough. One brand colour on the button and focus states, one neutral for everything else. The third colour is where forms start to look homemade.
- Rewrite the button label. "Submit" tells the person nothing about what happens next. "Request a consultation", "Send my brief", "Get the quote" all convert better because they describe the outcome. This is free, and it is a design decision as much as a copy one.
- Looking deliberate beats matching exactly. Nobody opens your form with an eyedropper to check your hex against your homepage. What people notice instantly is inconsistency: three corner radiuses, a serif label above a rounded input, a green button on a blue site. Pick one accent, one font, one radius, and hold the line.
Where this stops
Be clear about what you are not getting.
- No custom CSS. There is no stylesheet box, no class hooks, no override layer. What the theme object exposes is what you can change.
- No logo upload. The form carries its title, not your mark.
- No background image. Solid colours only.
- No custom domain and no slug renaming. The form lives on a Brieform URL and that URL is fixed once created.
- Free plan carries Brieform branding. It comes off on Starter and Pro.
So if a brand team hands you a spec with a logo lockup and exact padding values, or your legal team requires the form to sit on forms.yourcompany.com, this is the wrong tool and you should use one with a CSS field and domain support. Jotform and similar builders do that job properly.
There is a middle path worth knowing: embed the form in a page you control. Your header, logo and footer surround it, the form only has to match, and suddenly the missing logo upload stops being a problem.
๐ Try it now โ Theme your first form with Brieform โ
Free to start. No credit card required.
FAQ
Can I upload my logo onto the form?
No. There is no logo upload, no background image and no custom CSS. The practical workaround is embedding the form in your own page so your existing header does that work.
How do I get my exact brand colour?
Give the hex code in your message ("primary colour #1e3a5f"). Your assistant passes it straight through as a structured theme, so there is no guessing involved.
Can I re-theme a form after it is published?
Yes. set_form_theme works on drafts and on published forms, and each call returns a preview URL. Ask for that URL and look at it before you decide you are done.
What does it cost?
Free is $0 (one published form, 50 responses a month, Brieform branding on the form). Starter is $29/mo and removes the branding, raises the limit to 20 published forms and 2,000 responses a month, and adds analytics. Pro is $69/mo for unlimited. Annual billing takes 20% off.
Is there a visual editor I can drag things around in?
No, and that is deliberate. The MCP tools are the interface. You describe the change, you get a preview URL, you say what to fix.
Keep reading
Turn Form Responses Into a Weekly Digest With AI
Form responses pile up unread because nothing in the default setup is designed to be read. A reusable Monday prompt that pulls the week, groups the themes, and names who is still waiting on you.
How to Build a Waitlist Form in One Prompt
Three fields, one segmenting question, and a single prompt to build it. Then the part most guides skip: using the responses to segment the list before launch day.
How to Migrate From Google Forms Without Losing Your Responses
A step-by-step migration off Google Forms: exporting your existing responses, rebuilding the form in one prompt, handling the old link, and the three things that always break.