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

Introduction

A responsive form ensures that it adjusts to different screen sizes, providing an optimal user experience on all devices, from desktops to smartphones. In this tutorial, you'll learn how to create a responsive form using HTML, CSS for styling and responsiveness, and JavaScript to handle form submissions.

Development Steps

  1. Create Basic HTML Structure: Set up the form with fields for name, email, and message.
  2. Style the Form with CSS: Use CSS to style the form and ensure responsiveness.
  3. Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console.

Step 1: Create a Basic HTML Structure

We will begin by creating the basic structure of a form. This form includes fields for the user's name, email, and message.

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

    <!-- Step 1: Responsive form -->
    <div class="form-container">
        <form class="responsive-form" id="responsiveForm">
            <h2>Contact Us</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">Message</label>
                <textarea id="message" placeholder="Enter your message" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

</body>
</html>

Explanation:

  • The form contains fields for name, email, and message, along with a submit button.
  • The form is inside a container (form-container) for styling purposes.

Step 2: Style the Form with CSS

Next, we'll style the form using CSS, ensuring that it adjusts to different screen sizes and remains easy to use on both desktop and mobile devices.

<head>
    <style>
        /* General form 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;
        }

        .responsive-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: 10px;
            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 Styles */
        @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;
            }

            .responsive-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 stacked vertically, with padding for readability and spacing.
  • Responsive Design: Media queries are used to adjust the padding, font size, and layout of the form for tablets and smartphones.

Step 3: Handle Form Submission with JavaScript

We’ll now add a JavaScript function that captures the input values from the form when it is submitted and prints them to the console.

<body>
    <script>
        // Step 3: Handle form submission
        document.getElementById('responsiveForm').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('Message:', message);
        });
    </script>
</body>

Explanation:

  • event.preventDefault(): This prevents the form from refreshing the page when submitted.
  • console.log(): Captures and logs the entered name, email, and message to the console.

Complete Example

Below is the complete code for the responsive form, including 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 Form</title>
    <style>
        /* General form 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;
        }

        .responsive-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: 10px;
            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 Styles */
        @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;
            }

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

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

    <!-- Step 1: Responsive form -->
    <div class="form-container">
        <form class="responsive-form" id="responsiveForm">
            <h2>Contact Us</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">Message</label>
                <textarea id="message" placeholder="Enter your message" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

    <script>
        // Step 3: Handle form submission
        document.getElementById('responsiveForm').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('Message:', 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 form using HTML, CSS, and JavaScript. The form adjusts to different screen sizes using media queries, ensuring it works smoothly on both desktop and mobile devices. The form captures user input, which can be extended to include more fields or backend functionality.

Comments

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare