Contact Form
React.js
easy
Create a Contact Form Component that allows users to enter their name, email, and a message, and submit the form. Display a confirmation message after a successful submission.
Requirements
- The form must contain three fields:
name
,email
, andmessage
and must have labels "Name :" , "Email :", "Message:". - All fields are required.
- The email field must be validated to ensure proper format.
- On submission, show a "Thank you, User" message, where User is the entered name.
- If you try to submit the form with any of the fields empty, it will prevent submission and show an error message like:
- "Name is required" for the name field.
- "Email is required" for the email field.
- "Message is required" for the message field.
- If the email is not in valid format show an error message, "Invalid email format",
Constraints & Edge Cases
- Constraint 1: Name, email, and message are mandatory fields.
- Constraint 2: Email must be in valid format.
- Edge Case 1: User submits without filling fields → show error.
- Edge Case 2: User enters invalid email → show specific email error.
- Edge Case 3: After successful submission, fields should reset.
Reference UI
Preview what you need to build
Companies:
meta
google
paytm
Solve Similar questions 🔥