Responsive design form using CSS

Responsive Design Form using CSS

Using CSS to create a responsive layout for a form uses flexible layouts, media queries, and CSS properties that adapt to different screen sizes.

Below is an example of how it works beautifully on desktop and mobile devices.

Example-

<!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>
        /* Global Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* Form Container */
        .form-container {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: 100%;
            max-width: 500px;
        }

        /* Form Styles */
        form {
            display: flex;
            flex-direction: column;
            padding: 15px;
        }

        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            text-align: center;
        }

        label {
            margin-bottom: 5px;
            font-weight: bold;
        }

        input, textarea {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            width: 100%;
        }

        button {
            padding: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        /* CSS @media for Responsive Styles */
        @media (max-width: 600px) {
            .form-container {
                padding: 15px;
                width: 90%;
            }

            h1 {
                font-size: 20px;
            }

            input, textarea, button {
                font-size: 14px;
                padding: 8px;
            }
        }

    </style> </head> <body> <div class="form-container"> <h1>Contact Us</h1> <hr /> <form> <label for="name">Name</label> <input type="text" id="name" name="name" required> <label for="email">Email</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" rows="4" required></textarea> <button type="submit">Submit</button> </form> </div> </body> </html>

In the above example-

Here is the full explanation about above example,
Global Styles

The body uses the flexbox to move the center of the paper container vertically and horizontally.
The brightly colored background and height of the 100vh ensures that the form is focused where it is seen.

Form Container

The maximum width of 500px ensures that the form is not too wide on the big screen.
Padding, box shadows, and border radius give the style a card-like appearance.

Form Styles

The form and its elements use flexbox to arrange objects in a stack.
Labels, inputs, text areas, and buttons are styled for consistency and readability.
The button changes color on hover for a better user experience.

Responsive Styles

Media requests change padding, font sizes and container widths for screens smaller than 600px.
This ensures that the form is usable and looks good on mobile devices.

Output-

Using media queries and an intuitive layout, this form adapts to different screen sizes, ensuring that the user gets the best experience on desktop and mobile devices

Also, Read: Explain the CSS Custom Properties

articles

Responsive design form using CSS