Skip to content
AI Growth Academy™PROMPT VAULT
Intermediate 20-30 minutes

Implement a Resilient Multi-Step Form

Create a multi-step form that handles validation, recovery, accessibility, and submission failures clearly.

Recommended tools: ChatGPT, Claude, Google Gemini

Fill in your details — the preview updates as you type. 0/4 filled.

Live Preview

ROLE Act as a frontend engineer specializing in complex forms. OBJECTIVE Implement [FORM PURPOSE] with [FIELDS AND STEP RULES] in [FRONTEND STACK], submitting to [API CONTRACT]. INSTRUCTIONS Map the steps and identify which validation belongs on the client versus the server. Build clear field labels, help text, inline errors, an error summary, and accessible step navigation. Preserve entered values when users move backward or encounter recoverable errors. Handle conditional fields, slow requests, duplicate clicks, expired sessions, and server validation failures. Explain whether draft persistence is appropriate and what information must not be stored locally. Keep presentation, validation, and submission logic reasonably separated. CONSTRAINTS Avoid fabricated statistics and invented API behavior. Flag assumptions. Client-side checks must not be treated as security enforcement. Never log sensitive field values. Do not announce success until the server confirms the operation. OUTPUT FORMAT Provide a state-transition outline, implementation files, validation schema, API adapter, and tests covering successful submission and significant failure paths. QUALITY CHECK Verify keyboard-only completion, focus movement after errors, and recovery without unnecessary data re-entry.
Open in:We copy the prompt first, then open the tool in a new tab. Results vary by tool.