Forms That Look Cheap: 5 Fixes, Before and After
Why do forms built fast with AI look cheap? Five fixes in plain HTML and CSS, with before and after shots and a prompt to paste into your AI agent.
A form built fast with AI almost always looks cheap for the same five reasons. Here you fix them one by one with plain HTML and CSS, without redesigning anything. Each fix comes with a prompt for your agent, and at the end there is one prompt that does all five in one go.
We built the screen ourselves, on purpose: the settings page of Fernhill, a small made-up studio app with made-up names. It is not anyone's product. It looks like what you get when you ask an AI for "a clean settings page" and accept the first answer.
Same app, same purple, same font, same fields. Only the five points below changed.
The Before: Five Problems
Nothing is broken, but it feels like a form nobody thought about: one long column, labels that vanish, greys too light to read, four equal buttons and choices that start empty.
1. Group Fields by What They Mean
What it is: splitting the form into titled chunks. Designers call it the law of proximity: when related fields sit close together, the brain groups them for free.
Why it matters: one long column looks like a pile of boxes; three groups look like a designed page.
How to do it: we made three groups, Profile, Workspace and Notifications. Each group is a row: on the left a short title and one line on what it is for, on the right the fields, with a thin line between groups. In CSS it is a two-column grid: 240px for the title, a 32px gap, and fields capped at 420px (a name field does not need to be screen-wide).
There is a quieter fix inside: one left edge. In the before, some fields had a label stuck to their left, like "Time zone:". Measured in Chrome, the boxes started at four different positions. Now they all start on the same line, and your eye runs straight down.
Split this form into groups by meaning. For each group write a short title and one sentence on what it is for. Layout: two-column grid, title and sentence on the left (240px), fields on the right (max 420px), 32px between columns, a thin line above each group. Every field must start on the same left edge.
2. Keep the Labels, Add Help, Explain Errors
What it is: every field gets three pieces of text. A label on top that never goes away. A short hint below, when needed. An error that says how to fix it.
Why it matters: a placeholder is not a label. Once you type, it is gone, and you have to delete your text to remember what the box was for.
How to do it: the hint says why: "We send receipts and login links here." The error is an instruction: "Enter a full email, like name@company.com." The aria-describedby attribute makes screen readers (programs that read the page aloud to people who cannot see it) read the hint and error too. A few lines of JavaScript show the error only when you leave the field, not while you type.
For every field in this form: put a visible label above the box, linked with for/id. Remove placeholders used as labels. Where useful, add a one-line hint below that says why we ask for this data. For every error, write a sentence that says how to fix it, not just "invalid". Link hint and error with aria-describedby and show the error only when the user leaves the field.
3. Use Tinted Greys With Real Contrast
What it is: a small family of tinted neutrals, greys with a little blue in them.
Why it matters: contrast ratio measures how much text stands out from its background, from 1:1 (invisible) to 21:1 (black on white). The common accessibility rule, WCAG level AA, asks for at least 4.5:1 for normal text. Our hint grey on white scored 2.85:1, the placeholder grey 2.32:1. Both fail.
How to do it: five greys, written once as CSS variables: page background, white surfaces, lines, main text, secondary text. The new hint grey scored 6.22:1 on white and 5.8:1 on the background. The main text scored 14.99:1: still strong, but softer than pure black.
Replace every grey on this page with a family of five greys lightly tinted with a cool blue, defined as CSS variables: page background, surface, lines, main text, secondary text. Every text must reach at least 4.5:1 contrast on its background (WCAG AA). At the end, list each text/background pair with its computed contrast ratio.
4. Give One Button the Spotlight
What it is: giving each action a weight, based on how often people need it and how bad a mistake would be.
Why it matters: when four buttons look the same, the user has to work out which one matters. That is the page's job.
How to do it:
- Save changes is the only filled, colored button. It is why most people came.
- Cancel is quiet: no fill, a thin border, to the left of Save.
- Reset is gone: Cancel already does that job.
- Delete workspace left the row. It has its own section at the bottom, red text, a soft red border and a line that says what it destroys.
The red text on white scored 6.57:1, so it stays readable while looking calm.
On this page keep only one filled, colored button: the main action. Every other action becomes an outlined button or a link. Remove buttons that duplicate another action. Move any action that deletes data into its own section at the bottom, with red text, a soft red border and one sentence that says what gets deleted. Check that the red reaches at least 4.5:1 contrast.
5. Pick the Right Control and a Smart Default
What it is: using the best control for each choice, and pre-filling what the app already knows.
Why it matters: a dropdown hides its options behind a click, which is a waste for on/off. And an empty "Select…" means the app asks a question it could answer itself.
How to do it:
- On/off settings become switches. If it is a real HTML checkbox with the switch role inside a label, the keyboard works for free: in our test Space toggled it, and clicking the text did too.
- Theme, with three options, becomes three visible buttons. It starts on "Match system", which follows the light or dark setting of the device.
- Time zone stays a dropdown, because the list is long. But the browser already knows it: two lines of JavaScript read it and pre-select it. In our test it picked Europe/Rome, with the hint "Picked from your browser. Change it if you travel."
Review the controls in this form. On/off choices become switches (a checkbox input with role="switch" inside a label). Choices with 2-4 options become visible buttons. Keep dropdowns only for long lists. For every field that starts empty, tell me if the app can guess the value (for example the time zone from the browser): if yes, pre-select it and add a hint saying where it came from.
Ready to Copy: All Five at Once
Review this form in five steps, without changing brand colors, fonts or fields. 1. Group fields by meaning, with a title and a sentence for each group, and align every field to the same left edge. 2. Visible labels above every field, short hints where useful, errors written as instructions and shown when leaving the field. 3. Five lightly tinted greys as CSS variables, with at least 4.5:1 contrast for every text. 4. Only one filled button; destructive actions in a separate section at the bottom. 5. Switches for on/off, values pre-filled when the app can guess them. Before writing any code, list the problems you find for each of the five points. Then apply the changes one point at a time.
Small Test
Ten minutes. Open your form and do only step 3: measure the contrast of the lightest grey you use for text (Chrome, right-click, Inspect). If it is under 4.5:1, paste the step 3 prompt and measure again. It worked if every text passes 4.5:1 and the page looks calmer, not darker.
Watch Out For
- The browser's email check is loose. In our test it accepted "maya@fernhill" with no dot. It catches the missing @, the common mistake, but it does not prove the address is real.
- Say where a default came from. People who travel or use another computer need to know they can change it.
This article comes from a before and after Alek published on Medium.
Next step: apply the same method to a dashboard with Why Your App Looks Generic: 5 Fixes. To redesign a whole app without breaking anything, read Redesign an App With AI Without Breaking the Code.
In short: A cheap-looking form does not need a new style: it needs clear groups, labels that stay, readable greys, one loud button and choices that are already filled in.
Newsletter
AI that actually works, in your inbox.
New pills, the tools we use and what we learn on real projects. Few emails, only when there is something useful.
