Portfolio/VERIFICATION_STEPS.md

Verification Steps for ContactForm API Integration

Manual Verification Required

The ContactForm has been updated to call the real API route at /api/contact instead of simulating the submission.

Test in Browser

1. Navigate to: http://localhost:3000/en/contact

2. Test Successful Submission:

   • Fill in all form fields (name, email, message)
   • Click "Send Message"
   • Verify: Success message appears
   • Verify: Form fields are cleared
   • Verify: No console errors

3. Test Rate Limiting:

   • Submit the form 5 times rapidly
   • On the 6th submission, verify:
     • Error message appears with rate limit warning
     • Message shows time until retry (e.g., "Too many requests. Please try again in 60 minutes.")
     • Form is still functional (not broken)

4. Test Validation:

   • Try submitting with empty fields
   • Verify validation errors appear
   • Try submitting with invalid email
   • Verify email validation error appears

5. Test Error Display:

   • Verify error messages are clearly visible
   • Verify error messages disappear on successful submission
   • Check that UI remains user-friendly

Expected Behavior

• ✅ Form submits to /api/contact with POST request
• ✅ Success message displays on 200 response
• ✅ Rate limit error displays on 429 response with countdown
• ✅ Generic error message displays on other errors
• ✅ Form validation works before API call
• ✅ Loading state shows during submission
• ✅ Form is disabled during submission

Changes Made

1. Added errorMessage state to store custom error messages
2. Replaced simulated API call with real fetch() to /api/contact
3. Added response status handling:
   • 200 (OK): Success message, clear form
   • 429 (Rate Limited): Display time until retry
   • 400/500: Display API error message
4. Improved error message display with custom messages