Forms are where vibe-coded apps quietly break. The page looks fine, then someone tries to sign up on a phone and the button is half off the screen, or they press Submit and nothing seems to happen.

This guide covers eight things AI coding tools commonly leave behind in forms, with real fixes from my own apps and how to check each one. If you want the design side as well (the defaults that make an app look AI-made), the full checklist is here. If you only want the fix, the box above has a prompt to paste into your AI coding tool.

Why forms break in vibe-coded apps

When you ask an AI tool for "a sign-up form", it builds the version that works on its first try: one screen size, a fast connection, valid input, no errors. Real people bring the other cases: small phones, dark mode, slow networks, typos, double taps. Nobody asked for those, so they were never built.

Forms also sit right where the browser meets your server, so a shortcut there is a usability problem and sometimes a security one.

1. A placeholder is not a label

The most common AI form is a stack of inputs with grey placeholder text ("Email", "Password") and no labels. Once someone starts typing, the hint disappears, and screen readers may not announce what the field is for.

Fix: a visible <label> for every input, linked to it.

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">

The W3C forms tutorial explains the options, including how to hide a label visually when the design really needs it.

2. Text you can't see

On isthissafeformydog.com, the email field's text was close to invisible. The input set a white background but no text colour, so the typed text took whatever colour the page around it had. The fix was one class:

- className="... bg-white"
+ className="... bg-white text-gray-900 placeholder:text-gray-400"

The rule: if a form field sets its own background, it has to set its own text colour too. Check every form in dark mode and in light mode.

3. It breaks on a phone

Three things to check at phone width:

  • The right keyboard. type="email", type="tel", type="number" and type="url" open the matching keyboard (MDN's list of input types). AI tools often leave everything as type="text".
  • No zoom jump. iPhone Safari zooms into a field whose text is smaller than 16px, and the layout jumps. Keep input text at 16px or more on small screens.
  • Nothing pushed off screen. The dog checker's search bar pushed its Check button off narrow phones. The input couldn't shrink, so the button lost. The fix was min-w-0 on the input, flex-shrink-0 on the button, slightly smaller padding below the sm breakpoint, and a shorter placeholder.
- className="flex-1 py-4 px-2 text-lg ..."
+ className="flex-1 min-w-0 py-4 px-2 text-base sm:text-lg ..."

4. Nothing happens when you press Submit

If the request takes a second, a form with no feedback looks broken, so people press again. Now you have two sign-ups, two payments or two messages.

Fix: while the request runs, disable the button and say what's happening.

<button type="submit" disabled={saving}>
  {saving ? "Saving…" : "Save"}
</button>

In NudgeCue, my free classroom app, a teacher could tap to give a point while the last one was still saving, and the second tap silently did nothing. Since November 10 it says so instead. A form should never leave someone wondering whether it worked.

5. Errors nobody sees

AI-written code often catches an error and logs it to the console, where no user will ever look. The same November 10 review found that NudgeCue had error messages built in that were never displayed. A small bar now shows real problems (a failed or unconfirmed save) and stays quiet for routine messages.

For forms, a good error:

  • says what went wrong in plain words ("That email already has an account"), not a code
  • appears next to the field it's about
  • keeps everything the person typed
  • moves focus to the first problem, so keyboard and screen-reader users land on it

6. Validation only in the browser

required, type="email" and your JavaScript checks help people fix mistakes, but they are not protection. Anyone can send a request to your server without using your form at all. Everything the browser checks, the server has to check again: required fields, lengths, formats, and whether this user is allowed to do this.

7. Endpoints anyone can call

Every form posts somewhere: an API route, a serverless function, a database call. Ask your AI tool to list them and say who is allowed to call each one.

NudgeCue had one that failed this. A function that emailed me about new sign-ups only checked its signature if a secret was set, and the trigger that called it never sent one. So anyone could call it and send me an email with their own HTML in it. The fix (October 21): it now accepts only the trusted trigger, and the user's name and email are escaped before they go into the email.

Two lessons for any form: lock down whatever it posts to, and escape user input before it goes into an email or a page. If your app uses Supabase, row-level security is the start of this, not the end.

8. The small things that feel broken

None of these crash anything, but together they make a form feel unfinished:

  • Autocomplete. Add autocomplete="name", "email", "current-password" or "new-password" so browsers and password managers can fill the form (MDN).
  • Enter submits. Use a real <form> with a type="submit" button, not a div with a click handler.
  • No flash on close. NudgeCue's create-class dialog cleared its form before closing, so an empty first step flashed during the close animation. It now closes first and clears once it's out of sight.

How to check your forms in ten minutes

  1. Open each form on your phone and fill it in with the keyboard that appears.
  2. Switch to dark mode and look at what you typed.
  3. Turn on a slow network in your browser's dev tools (Network, then a throttling preset) and submit. Can you tell it's working? Can you submit twice?
  4. Submit with a field empty and with a wrong email. Is the message clear, next to the field, and is your input still there?
  5. Ask your AI tool for a list of every endpoint your forms post to and who can call each one.

If something breaks only once real people use it, the slow app guide covers the speed side of the same problem.