Mansi168 / EmoWell

https://emo-well.vercel.app/
34 stars 84 forks source link

Add Validation and Email Sending Functionality to Contact Form #40

Open Niharika0104 opened 3 months ago

Niharika0104 commented 3 months ago

Description:

Currently, the contact form lacks validation for user input, and there is no functionality to send emails upon form submission. This issue aims to implement validation to ensure the accuracy of user-entered data and add functionality to send emails with the form data upon submission.

Tasks:

  1. Implement Frontend Validation: Add client-side validation to ensure that required fields are filled out correctly before the form can be submitted.

    • Steps to Implement:
      1. Write JavaScript/React code to validate user input for required fields such as name, email, and message.
      2. Display error messages if any required field is left empty or contains invalid data.
    • Expected Outcome: Users should receive immediate feedback on any invalid input before attempting to submit the form.
  2. Integrate Backend Validation: Implement server-side validation to further validate form data and prevent submission of malicious or invalid data.

    • Steps to Implement:
      1. Define validation rules on the backend to check the validity of form submissions.
      2. Return appropriate error messages if the submitted data fails validation checks.
    • Expected Outcome: Form submissions should undergo thorough validation on the server to ensure data integrity and security.
  3. Set Up Email Sending Functionality: Configure the backend to send an email containing the form data upon successful form submission.

    • Steps to Implement:
      1. Set up an email service or SMTP server for sending emails from the backend.
      2. Write backend code to construct an email message with the form data and send it to the designated recipient(s).
    • Expected Outcome: Upon form submission, an email containing the user-entered data should be sent to the designated recipient(s).
  4. Handle Success and Error Responses: Implement frontend feedback to inform users about the status of their form submission (success or error).

    • Steps to Implement:
      1. Display a success message to users upon successful form submission.
      2. Show error messages if there are any issues with sending the email or processing the form data.
    • Expected Outcome: Users should receive clear feedback on the outcome of their form submission.
Chaitanya-sesha-govind commented 3 months ago

Please assign me this issue issue would like to work on it

ekayZ7875 commented 3 months ago

In above issue I can workout with backend issue and along with that I can also deal with SMTP feature. So,please assign me this issue

everly-gif commented 2 months ago

Hi @Niharika0104 , this particular project doesnt have any backend as far as my knowledge, Front-end Validations on input fields can be performed, im not sure about the other part of the issue. Tagging @Mansi168 for inputs.

Agarwalvidu commented 1 month ago

@Mansi168 This issue needs your input.