Build an Online Survey Form with HTML, CSS, and JavaScript

Surveys are a great way to collect feedback and engage with users. In this tutorial, we’ll create a simple yet effective Online Survey Form using HTML, CSS, and JavaScript. This form will include various input fields, validation, and a success message after submission. Let’s get started! 🚀

🎯 What You’ll Learn

✅ Structuring the survey form using HTML 📝
✅ Styling the form for a modern, professional look with CSS 🎨
✅ Handling form submission and validation using JavaScript ⚡
✅ Displaying a success message after form submission 🎉
✅ Making the form responsive for mobile users 📱

---

📌 Features of the Survey Form

• Collects user name, age, gender, and favorite color.
• Allows users to select multiple hobbies.
• Includes a rating system to measure satisfaction.
• Provides a text box for additional comments.
• Displays a success message upon form submission.
• Mobile-friendly and easy to use.

---

🛠️ Technologies Used

• HTML for structuring the form.
• CSS for styling and responsiveness.
• JavaScript for form validation and submission handling.

---

📝 Code Implementation

Here’s a breakdown of the key sections of the survey form:

📌 1. HTML Structure

This HTML code defines the form layout, including text inputs, radio buttons, checkboxes, and a submit button.

<form id="surveyForm">
    <div class="question">
        <label for="name">What's your name?</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div class="question">
        <label for="age">How old are you?</label>
        <input type="number" id="age" name="age" required>
    </div>
    
    <button type="submit">Submit Survey</button>
    <div class="success-message" id="successMessage">Thank you for completing the survey!</div>
</form>

📌 2. CSS Styling

This CSS snippet styles the form and makes it responsive.

.container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    width: 500px;
}

@media (max-width: 600px) {
    .container {
        width: 90%;
    }
}

📌 3. JavaScript for Form Validation

This JavaScript validates the form and displays a success message.

const form = document.getElementById('surveyForm');
const successMessage = document.getElementById('successMessage');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    successMessage.style.display = 'block';
    setTimeout(() => {
        successMessage.style.display = 'none';
    }, 3000);
    form.reset();
});

---

🎥 Watch the Video Tutorial

Want a step-by-step walkthrough? Check out the full tutorial video on YouTube:

📂 Get the Full Source Code

Find the complete project on GitHub:
🔗 GitHub Repository

👍 Join the Community!

If you found this tutorial helpful, like, comment, and subscribe to Madras Academy for more web development guides! 🚀

🔔 Stay Updated: Don’t forget to turn on notifications for future tutorials!