search

omrajsharma / bigohhh.com

Frontend codebase for a coding bootcamp website.
https://bigohhh.com
28 stars 51 forks source link

Contact us page #21

Open omrajsharma opened 4 months ago

omrajsharma commented 4 months ago

We need to build a contact us page with contact us form where user can input their name, phone number and email. This feature will also have restriction to submit the form only if the user enter otp after filling form.

Below is the user flow ENTER USER DATA -> ENTER OTP -> SUBMIT FORM

abhiperfect commented 4 months ago

Subject: Request to Implement Contact Us Page with OTP Verification

Hi @omrajsharma ,

I hope you're doing well. I wanted to propose a new feature for our project: a Contact Us page complete with a form for users to input their name, phone number, and email address. Additionally, I suggest integrating an OTP verification step to ensure the authenticity of submissions.

Here's a breakdown of the user flow:

  1. Enter User Data: Users will fill out the contact form with their name, phone number, and email address.
  2. Enter OTP: After filling out the form, users will be prompted to enter an OTP (one-time password) to verify their identity.
  3. Submit Form: Once the OTP is successfully entered, users can submit the form.

This process adds an extra layer of security and ensures that we receive valid inquiries through the Contact Us page.

Implementation on Frontend:

  1. Create Contact Form Component: Develop a React component for the Contact Us form. This form should include fields for name, phone number, email, and OTP.

  2. Handle Form Submission: Implement a function to handle form submission. Before allowing submission, check if all required fields are filled out.

  3. Integrate OTP Input: After the user fills out the form and clicks submit, prompt them to enter the OTP received via SMS or email.

  4. Make API Call: Send the user-entered data along with the OTP to the backend server using an API call.

  5. Handle API Response: Once the server verifies the OTP and processes the form submission, handle the response accordingly. Display a success message if the submission is successful, or an error message if there are issues.

  6. Error Handling: Implement error handling to manage scenarios such as invalid OTP or failed form submission.

By following these steps, we can ensure a smooth user experience while maintaining security and authenticity in our Contact Us feature.

Could you please assign this task to me? I'm excited to work on implementing this feature and contribute to our project's success.

Looking forward to your guidance and feedback.

Best regards, Abhishek

MishraTanishq619 commented 4 months ago

If you assign this to me,

Even though, I am onto this issue.

dhruv8433 commented 4 months ago

@omrajsharma

i would like to work on this issue. i already build login with otp feature here is demo pic for that:

image

and when user submit their detailes one otp send on that phone no and after verifing that otp user should proceed their form

MishraTanishq619 commented 4 months ago

@omrajsharma

i would like to work on this issue. i already build login with otp feature here is demo pic for that:

image

and when user submit their detailes one otp send on that phone no and after verifing that otp user should proceed their form

We Didn't needed Signup page.

MishraTanishq619 commented 4 months ago

Screencast from 11-05-24 10:05:50 PM IST.webm

Interface is ready + NodeMailer and mail script is ready.

We would be needing some database to store this. Well, I can integrate that Prisma+Postgres for this project. @omrajsharma if you want to do this, I am making an issue for that.

Artuiro-23 commented 4 months ago

I can work on this. Kindly assign me this issue. Thankyou.

SamarupBhattacharya commented 4 months ago

Please assign this issue to me, I will make this webpage functional ofcourse but will also make it visually appealing. I have designed webpages like this before and have integrated CSS animations in the page. I am attaching one instance of my work(for a restaurant booking website) for reference.

https://github.com/omrajsharma/bigohhh.com/assets/138982308/afe2c185-593b-4b2b-8228-9ecd723d272f

omrajsharma commented 4 months ago

Hi @abhiperfect I'm assigning this issue to you. Please let me know if you need any help.

Kamna-712 commented 4 months ago

hii I can work for the contact page, please assign this to me

Mahimatestgithub commented 4 months ago

I want to work in this issue. Please assign me this task.