Contact Us Page Implementation

[ShivanshPlays]

Contact Us Page Implementation

Overview

This update introduces a fully responsive Contact Us page for Scruter, featuring a form where users can submit queries directly through the website. The feature is designed to improve user experience by allowing users to reach out for assistance or inquiries with ease. Additionally, the backend is configured to send these submissions directly to the Scruter admin via email.

Frontend Implementation

• Developed a fully responsive frontend page with a Contact Us form.
• The form includes input fields for:
  • Name
  • Email
  • Subject
  • Message
• Utilized React components and Tailwind CSS for styling, ensuring a seamless user experience across desktop, tablet, and mobile devices.
• Added a friendly message to let users know that Scruter’s team is available to address any queries.

Backend Functionality

• Configured backend logic to handle form submissions and send emails to the Scruter admin.
• The Nodemailer library is used for sending emails, and the email template includes:
  • The user’s name
  • Email address
  • Subject of the query
  • The message content entered by the user
• Personalized the email content to indicate that the query was raised on Scruter, making it easier for admins to identify the source of the request.

Demo

A screen recording demonstrating the fully functional Contact Us feature is included. The video showcases:

1. Filling out the form fields with sample data.
2. Submitting the form and the frontend’s loading state.
3. Confirmation of successful submission through a toast notification.
4. The backend sending the email with the query details to the Scruter admin.

Summary

This feature improves user accessibility and provides Scruter with a streamlined way to handle inquiries, contributing to better customer service and efficient query management.

https://github.com/user-attachments/assets/ea16c858-b625-4a79-8850-57d1f0c68d6c

responsive

closes #364

[vercel[bot]]

@ShivanshPlays is attempting to deploy a commit to the Piyush's projects Team on Vercel.

A member of the Team first needs to authorize it.

[swarooppatilx]

I'll delete the previous contact page and update the footer

[ShivanshPlays]

@swarooppatilx I have this page is linked to the contact us button in the footer already. So no need to modify i guess

[swarooppatilx]

@swarooppatilx I have this page is linked to the contact us button in the footer already. So no need to modify i guess

Yep, I only changed the route to /contact trying not to break anything

[ShivanshPlays]

@swarooppatilx great, hope the functionality is working, tell me if an changes are needed