Page
[URL or page name where this form lives]
Form Documentation Template
Use this to document every form before or during development. Backend and frontend must both know this information before building.
Form: [Form Name]
Purpose
[What does this form do? Who fills it out?]
Fields
| Field | Type | Required | Validation | Placeholder |
|---|---|---|---|---|
| [name] | text | Yes | 2–100 chars | Enter full name |
| [email] | Yes | Valid email | Enter email address | |
| [phone] | phone | No | Country code + valid number | +91 9876543210 |
| [message] | textarea | Yes | 10–1000 chars | Type your message |
| [dropdown] | select | Yes | Must be one of: [options] | Select an option |
| [file] | file | No | PDF/JPG, max 5MB | Upload file |
Submit Destination
- CRM: [CRM name and lead field mapping]
- Email Notification: [Who gets notified and to which email]
- Database: [Table and fields]
- Webhook: [Endpoint if applicable]
Success Behavior
Message shown to user:
[Success message text]
- Form fields cleared
- Redirect to: [URL]
- Email confirmation sent to user
- Notification sent to team
Error Behavior
Message shown to user on API failure:
[Error message text]
Field-level error examples:
Name: "Please enter your full name." Email: "Enter a valid email address." Phone: "Enter a valid phone number with country code." Message: "Message must be at least 10 characters."
Spam Protection
- CAPTCHA: reCAPTCHA / hCaptcha
- Honeypot field
- Rate limiting
- None — explain why
Frontend Behavior
- Submit button disables while request is pending.
- Loading state shown on submit button: "Sending..."
- Form values preserved if request fails.
- Fields cleared on successful submit.
- Success message shown after submit.
- Field-level errors shown near each invalid field.
- Mobile layout tested.
Example — Contact Form
Page
/contact
Purpose
Collects website visitor inquiries and routes them to the sales team.
Example Success Message
Thank you. Our team will contact you within 24 hours.
Example Error Message
We could not submit your request. Please try again.
# Form: [Form Name] ## Page [URL or page name where this form lives] ## Purpose [What does this form do? Who fills it out?] ## Fields | Field | Type | Required | Validation | Placeholder | |-------|------|----------|------------|-------------| | [name] | text | Yes | 2–100 chars | Enter full name | | [email] | email | Yes | Valid email | Enter email address | | [phone] | phone | No | Country code + valid number | +91 9876543210 | | [message] | textarea | Yes | 10–1000 chars | Type your message | ## Submit Destination - CRM: [CRM name and lead field mapping] - Email Notification: [Who gets notified and to which email] - Database: [Table and fields] - Webhook: [Endpoint if applicable] ## Success Behavior Message shown to user: [Success message text] ## Error Behavior Message shown to user on API failure: [Error message text] ## Frontend Behavior - Submit button disables while request is pending. - Loading state shown on submit button. - Form values preserved if request fails. - Fields cleared on successful submit. - Success message shown after submit. - Field-level errors shown near each invalid field. - Mobile layout tested.