Project 2 — Survey Form in React (Full Implementation)

by

🧭 Project Introduction

Survey forms are widely used in:

  • Market research
  • Feedback systems
  • Product reviews
  • User onboarding

In this project, we will build a real-world Survey Form using React Hook Form with validation and a clean folder structure.

🎯 Features of the Survey Form

✔ Multiple input types
✔ Validation
✔ React Hook Form
✔ Clean UI logic
✔ Reusable structure
✔ Production-ready approach

📁 Project Folder Structure (Best Practice)

src/
 ├── components/
 │    ├── SurveyForm.jsx
 │    ├── SurveySuccess.jsx
 ├── App.jsx
 ├── main.jsx
 └── index.css

🧠 Survey Fields (What We Will Collect)

  • Name
  • Email
  • Age
  • Gender
  • Skills (checkbox)
  • Feedback (textarea)

📦 Step 1: Install React Hook Form

npm install react-hook-form

🧩 Step 2: App.jsx (Root Component)

import { useState } from "react";
import SurveyForm from "./components/SurveyForm";
import SurveySuccess from "./components/SurveySuccess";

const App = () => {
  const [submitted, setSubmitted] = useState(false);
  const [surveyData, setSurveyData] = useState(null);

  const handleSurveySubmit = (data) => {
    setSurveyData(data);
    setSubmitted(true);
  };

  return (
    <div className="container">
      <h1>📊 Survey Form</h1>

      {submitted ? (
        <SurveySuccess data={surveyData} />
      ) : (
        <SurveyForm onSubmitSurvey={handleSurveySubmit} />
      )}
    </div>
  );
};

export default App;

🧩 Step 3: SurveyForm.jsx (Main Form)

import { useForm } from "react-hook-form";

const SurveyForm = ({ onSubmitSurvey }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    onSubmitSurvey(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      {/* Name */}
      <label>Name</label>
      <input
        {...register("name", { required: "Name is required" })}
      />
      {errors.name && <p>{errors.name.message}</p>}

      {/* Email */}
      <label>Email</label>
      <input
        {...register("email", {
          required: "Email is required",
          pattern: {
            value: /^\S+@\S+$/i,
            message: "Invalid email address",
          },
        })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      {/* Age */}
      <label>Age</label>
      <input
        type="number"
        {...register("age", {
          required: "Age is required",
          min: {
            value: 18,
            message: "Must be 18 or above",
          },
        })}
      />
      {errors.age && <p>{errors.age.message}</p>}

      {/* Gender */}
      <label>Gender</label>
      <select {...register("gender", { required: "Select gender" })}>
        <option value="">Select</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      {errors.gender && <p>{errors.gender.message}</p>}

      {/* Skills */}
      <label>Skills</label>
      <div>
        <input type="checkbox" value="React" {...register("skills")} /> React
        <input type="checkbox" value="Node" {...register("skills")} /> Node
        <input type="checkbox" value="CSS" {...register("skills")} /> CSS
      </div>

      {/* Feedback */}
      <label>Feedback</label>
      <textarea
        {...register("feedback", {
          required: "Feedback is required",
          minLength: {
            value: 10,
            message: "Minimum 10 characters",
          },
        })}
      />
      {errors.feedback && <p>{errors.feedback.message}</p>}

      <button type="submit">Submit Survey</button>
    </form>
  );
};

export default SurveyForm;

🧩 Step 4: SurveySuccess.jsx (After Submission)

const SurveySuccess = ({ data }) => {
  return (
    <div>
      <h2>✅ Survey Submitted Successfully</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default SurveySuccess;

✔ Shows submitted data
✔ Confirms successful submission

🎨 Step 5: Basic Styling (index.css)

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}

.container {
  max-width: 500px;
  margin: 30px auto;
  background: white;
  padding: 20px;
  border-radius: 5px;
}

form label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

button {
  margin-top: 15px;
  padding: 10px;
  width: 100%;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

p {
  color: red;
  font-size: 14px;
}

🧠 Concepts Applied in This Project

✔ React Hook Form
✔ Validation rules
✔ Conditional rendering
✔ Reusable components
✔ Clean folder structure
✔ Real-world form handling

⚠ Common Enhancements (Optional)

You can improve this project by adding:

  • Multi-step survey
  • API submission
  • Progress bar
  • Redux / Context integration
  • UI library (MUI / Tailwind)

🎯 Best Practices Used

✅ No unnecessary state
✅ Clean validation messages
✅ Component separation
✅ Readable code

🧠 Quick Recap

✔ Full survey form
✔ Real-world validation
✔ Clean UI logic
✔ Production-ready approach

🎉 Final Conclusion

🎉 Excellent work!
You’ve built a real-world Survey Form, exactly the kind used in professional React applications.

This project proves your understanding of:

  • Forms
  • Validation
  • React Hook Form
  • Clean architecture

🚀 What’s Next?

👉 Project 3 — Login / Register App

Leave a Comment