Intermediate6 min readShare
Was this chapter helpful?
Share
Try these free tools
Forms collect user input. Validation ensures the data is correct before submitting. Building a login form? See our authentication guide.
Names, titles, short text
Email with built-in validation
Hidden text entry for passwords
Numeric values with up/down arrows
Calendar date selection
Multi-line text (messages, bios)
Choose one from a list
Toggle on/off, accept terms
Choose exactly one option
Upload images, documents
Select a value on a scale
Select a color visually
Happens in the browser before submitting. Gives instant feedback.
Happens on the server after submitting. The last line of defense. Data gets saved to your database.
Lightweight, performant form library for React. The most popular choice.
RecommendedDefine what your data should look like and validate it in one place. Very popular.
ValidationFull-featured form library. More batteries-included than React Hook Form.
AlternativeSchema validation library. Often paired with Formik. Similar to Zod.
ValidationFast form management that only updates what changed. Great for performance.
PerformanceForm library that works even without JavaScript. Built for Next.js.
Next.jsNot ready to build a custom form? Use a hosted form tool and embed it on your site.
Free, easy to use, and responses go straight to a Google Sheet. Perfect for surveys, signups, and feedback.
FreeBeautiful no-code forms with a Notion-like editor. Free tier is generous. Embeds easily.
ModernConversational forms with one question at a time. Great UX but limited free tier.
Premium UXImagine you're building a recipe sharing app. Users need a form to submit their recipes with a title, description, ingredients list, step-by-step instructions, cooking time, difficulty level, and a photo. The form needs validation (title required, at least 2 ingredients), a loading state while saving, and a success message.
Build this with AI
"Build a recipe submission form with these fields: title (required, max 100 chars), description (textarea), ingredients (dynamic list — user can add/remove items, minimum 2), instructions (numbered steps, add/remove), cooking time (number in minutes), difficulty (select: Easy, Medium, Hard), and a photo upload with preview. Use React Hook Form with Zod validation. Show inline errors, disable submit while saving, and show a success toast when done. Style with Tailwind CSS."
Copy-paste these prompts into your AI tool to apply what you just learned.
BUILD A FORM
"Build a [contact/signup/feedback] form with fields for [name, email, message]. Include validation and show success/error messages after submission."
ADD FORM VALIDATION
"Add form validation to my existing form. Required fields should show red borders and error text. Email must be valid format. Password must be at least 8 characters."
MULTI-STEP FORM WIZARD
"Turn my form into a multi-step wizard with [2/3/4] steps. Add a progress bar at the top, Back and Next buttons, and validate each step before moving forward."
Display error messages next to the field, not in a banner at the top.
Check fields when the user clicks or tabs away, not while they're still typing.
Show a spinner on the button and disable it to prevent double-submit.
Placeholders disappear when typing. Always use a visible label too.
Save users a click by placing the cursor in the first field when the form loads.
Let users toggle password visibility with an eye icon.
