Contact Form
React.js
easy
10 mins
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, andmessageand 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 🔥
Want to upskill? Explore our courses!
Namaste DSA
Master DSA from scratch with numerous problems, and expert guidance.
Namaste React
Wanna dive deep into React and become Frontend Expert? Learn with me now!
Namaste Frontend System Design
The most comprehensive and detailed course for frontend system design.
Namaste Node.js
Wanna dive deep into Node.js? Enroll into `Namaste Node.js` now!
