4. Create Your Form Project

Before building the form, initialize your React environment.

npx create-react-app enquiry-app
cd enquiry-app
npm start

Project Structure:

src/App.js → Your main form code
src/index.js → The entry point

7. What is an Enquiry Form?

In React, an Enquiry Form is a "Controlled Component" where user data (Name, Email, Message) is synced with the component's State.

User Types
↓
onChange Event Triggers
↓
useState Updates
↓
onSubmit Sends Data

9. Rules for React Forms

Rule 1: State Storage - Every input field must have a corresponding state variable.

Rule 2: onChange - Use the onChange event to capture every keystroke.

Rule 3: preventDefault - Essential! In handleSubmit, use e.preventDefault() to stop the page from refreshing.

// The most important line in React Forms:
function handleSubmit(e) {
  e.preventDefault();
  // process data here...
}

11. Simple Enquiry Form Code

import { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${name} (${email})`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" 
        onChange={(e) => setName(e.target.value)} />
      <input type="email" placeholder="Email" 
        onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

15. Controlled vs Uncontrolled

Type	Description	Best For
Controlled	React State manages the value	Most forms (Validation, instant feedback)
Uncontrolled	DOM handles the value (using Ref)	Simple forms, non-React integration

Controlled components are the gold standard in React development.

14. React Form vs HTML Form

Feature	Traditional HTML	React
Reload	Forces page refresh	No refresh (SPA)
Validation	HTML5 attributes only	Custom JS logic (Immediate)
Submission	Sent to action URL	Handled by JS function

16. Real-World Integration

Once you capture the form data in your handleSubmit function, you typically send it to:

• A Backend API (Node.js/Python)
• A Database (MongoDB/SQL)
• Email services like EmailJS or Formspree

17. Practice Tasks

Task 1: Create basic Name/Email/Message form.

Task 2: Add a Phone Number field with validation.

Task 3: Clear the form inputs after clicking Submit.

Task 4: Show "Thank you, [Name]" on the screen after submit.

18. Learning Flow

State → Events → Hooks → Forms (Complete)

↓

Next: API Integration → Connecting to a Database