feat(contact): add accessible Contact Us form with validation, Responsive UI

[Biki-dev]

Pull Request Description

🎯 Issue

Closes #567

📝 Summary

This PR adds a contact form to the Contact Us page using Formspree integration and improves the layout of contact method cards.

✨ Changes Made

Contact Form

• ✅ Added comprehensive contact form with Formspree integration
• ✅ Implemented form fields:
  • Name (required text input)
  • Email (required with validation)
  • Subject (required text input)
  • User Role (optional dropdown: Educator/Student/Developer/Contributor/Other)
  • Message (required textarea)
• ✅ Added form validation and loading states
• ✅ Implemented success/error message handling with animations
• ✅ Form auto-resets after successful submission
• ✅ Async form submission without page reload

Layout Updates

• ✅ Updated contact methods section to display 2 cards (By Mail, By Phone)
• ✅ Removed "By Email" card (now replaced by the contact form below)
• ✅ Maintained responsive design for mobile and desktop and Dark-Light Both theme

UX Improvements

• ✅ Success message with green alert appears on successful submission
• ✅ Error message with fallback instructions if submission fails
• ✅ Smooth animations using Framer Motion
• ✅ Full dark mode support

🔧 Technical Details

• Used Formspree API for form handling
• Maintained existing design system (red accent colors, rounded corners, shadows)
• All form inputs include proper accessibility labels
• TypeScript types updated for form state management

📋 Setup Required

Important: Replace 'YOUR_FORM_ID' in ContactUs.tsx line 74 with the actual Formspree form ID after creating a form at https://formspree.io by required receiving email address of maintainer's

const response = await fetch('https://formspree.io/f/YOUR_FORM_ID', {

🖼️ Screenshots

✅ Testing Checklist

• Form submits successfully with valid data
• Form validation works for required fields
• Email validation works correctly
• Form resets after successful submission
• Responsive design works on mobile devices
• Dark mode displays correctly
• All animations work smoothly

📦 Dependencies

No new dependencies added (uses existing Framer Motion)

---

Issue #567 Reference

Original Issue Description

Title: Feature Request: Add a "Contact Us" Form to the Sugar Labs Website

Description:
The Sugar Labs website currently does not include a Contact Us form, which makes it difficult for users, educators, contributors, and partners to reach out. Adding this feature will significantly improve communication and accessibility.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏