Back to guide/General Productivity

Form Builder

Describes every visual detail of the form inputs, validation timing, and success state so v0 generates a complete, polished form — not just field placeholders.

v0-promptsform_purposefield_listcustom_validation
Edit View
Prompt
Create a {{form_purpose}} form with the following fields:\n\n{{field_list}}\n\nValidation rules:\n- All required fields show inline error messages below the input\n- Email fields validate format\n- {{custom_validation}}\n- Show validation on blur, not on every keystroke\n\nDesign:\n- Single column layout, max-width 480px, centered\n- Labels above inputs, 12px font size, medium weight\n- Inputs: 40px height, 1px gray-300 border, focus ring in {{accent_color}}\n- Submit button: full width, {{accent_color}} background, white text, disabled state while submitting\n- Success state: replace form with a confirmation message and checkmark icon\n\nUse React Hook Form pattern for state management. TypeScript.

Variables to customize

{{form_purpose}}{{field_list}}{{custom_validation}}{{accent_color}}

Why this prompt works

Describes every visual detail of the form inputs, validation timing, and success state so v0 generates a complete, polished form — not just field placeholders.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.