Implement the contact form submission

[MaryammAli]

Implement Contact Form Submission Flow

Overview

This PR implements the contact form submission workflow by wiring the contact page to the backend endpoint defined in src/lib/contactConfig.ts. The update adds form validation, submission handling, user feedback, and error reporting to provide a complete contact experience.

Problem Addressed

While the contact form configuration exists, the contact page is not currently connected to a submission handler. As a result, users can fill out the form but cannot successfully send messages to the backend.

Changes Made

• Connected the contact form to the endpoint configured in src/lib/contactConfig.ts.

• Implemented form submission via HTTP POST requests.

• Integrated react-hook-form for form state management and submission handling.

• Added Zod schema validation for client-side input validation.

• Implemented loading and submission states to improve user experience.

• Added success state handling that replaces the form with a confirmation message after a successful submission.

• Added error handling for:

  • Validation failures
  • Network errors
  • Backend errors
  • Rate-limiting responses

Validation

• Added Zod schema validation for all required form fields.
• Integrated validation with react-hook-form using a Zod resolver.
• Displayed user-friendly validation messages for invalid input.

User Experience Improvements

• Disabled duplicate submissions while requests are in progress.
• Displayed clear feedback during submission.
• Replaced the form with a success message upon successful delivery.
• Surfaced server-side errors and rate-limit responses directly to users.

Files Updated

• src/lib/contactConfig.ts
• Contact page/form components
• Form validation schema and submission handlers

Acceptance Criteria

• Contact form submits data via a POST request to the configured endpoint.
• Form uses react-hook-form and Zod validation.
• Successful submission replaces the form with a confirmation message.
• Rate-limit and server error responses are displayed to the user.
• Submission flow handles loading, success, and error states correctly.

Benefits

• Enables end-to-end contact form functionality.
• Improves form reliability and validation.
• Provides clear user feedback throughout the submission process.
• Ensures backend responses are surfaced appropriately to users.
  Closes FE-182 Implement the contact form submission in src/lib/contactConfig.ts #302

[drips-wave]

@MaryammAli Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits