How to Create a Responsive Feedback Form with HTML, CSS, and JavaScript

Author:

Introduction

A responsive feedback form adjusts to different screen sizes, ensuring an optimal user experience on both desktop and mobile devices. In this tutorial, you'll learn how to create a clean and responsive feedback form using HTML and CSS for styling, with JavaScript to handle form submission.

Development Steps

  1. Create Basic HTML Structure: Set up a feedback form with fields like name, email, and feedback message.
  2. Style the Form with CSS: Use CSS to style the form and make it responsive for various screen sizes.
  3. Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console for testing.

Step 1: Create a Basic HTML Structure

We will create the basic structure of the feedback form with fields for name, email, and a message. The form also includes a submit button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Feedback Form</title>
</head>
<body>

    <!-- Step 1: Feedback form structure -->
    <div class="form-container">
        <form class="feedback-form" id="feedbackForm">
            <h2>Give Us Your Feedback</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="message">Feedback</label>
                <textarea id="message" placeholder="Enter your feedback" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

</body>
</html>

Explanation:

  • Form Fields: The form includes fields for name, email, and feedback, with a submit button.
  • Form Structure: The form is enclosed in a div with the class form-container for easy styling.

Step 2: Style the Form with CSS

We will now style the feedback form using CSS, ensuring it is responsive and visually appealing across all screen sizes.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .form-container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            margin: 0 20px;
        }

        .feedback-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }

        .btn {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .form-container {
                padding: 20px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 15px;
            }

            .feedback-form h2 {
                font-size: 18px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>

Explanation:

  • Form Layout: The form fields are styled with padding, border-radius, and font size. The submit button is styled with a blue background and hover effect.
  • Responsive Design: Media queries are used to adjust the layout for tablets and mobile devices, making the form easy to use on smaller screens.

Step 3: Handle Form Submission with JavaScript

We’ll now add JavaScript to handle the form submission and print the entered values to the console for testing.

<body>
    <script>
        // Step 3: Handle form submission
        document.getElementById('feedbackForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            // Print the values to the console
            console.log('Name:', name);
            console.log('Email:', email);
            console.log('Feedback:', message);
        });
    </script>
</body>

Explanation:

  • event.preventDefault(): Prevents the default form submission behavior, stopping the page from refreshing.
  • console.log(): Logs the captured name, email, and feedback to the console.

Complete Example

Here’s the complete code for the responsive feedback form, combining HTML, CSS, and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Feedback Form</title>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .form-container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            margin: 0 20px;
        }

        .feedback-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }

        .btn {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .form-container {
                padding: 20px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 15px;
            }

            .feedback-form h2 {
                font-size: 18px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Feedback form structure -->
    <div class="form-container">
        <form class="feedback-form" id="feedbackForm">
            <h2>Give Us Your Feedback</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
           

 <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="message">Feedback</label>
                <textarea id="message" placeholder="Enter your feedback" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

    <script>
        // Step 3: Handle form submission
        document.getElementById('feedbackForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            // Print the values to the console
            console.log('Name:', name);
            console.log('Email:', email);
            console.log('Feedback:', message);
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a responsive feedback form using HTML, CSS, and JavaScript. The form adapts to different screen sizes using media queries, ensuring an optimal experience for users on both desktop and mobile devices. You can extend this form by adding validation or connecting it to a backend service for further processing.

Comments

Post a Comment

Leave Comment