Article Categories

Selected Reading

How to create a responsive form with CSS?

CSS Web Development Front End Technology

To create a responsive form with CSS, we use HTML form elements and apply CSS styling with media queries for responsive design. A responsive form adapts to different screen sizes, ensuring optimal user experience across devices.

Syntax

/* Basic form styling */
.form-container {
    display: flex;
    flex-direction: column;
}

/* Media query for responsiveness */
@media (max-width: 768px) {
    .form-container {
        flex-direction: column;
    }
}

Steps To Create a Responsive Form

Follow these steps to create a responsive form −

Step 1: Create the HTML form structure
Step 2: Apply CSS styling for layout and appearance
Step 3: Add media queries for responsive behavior

Step 1: Creating HTML Form Structure

First, create the basic HTML structure with form elements. Use semantic HTML with proper labels and input types −

<form class="responsive-form">
    <div class="form-row">
        <div class="form-group">
            <label for="fullname">Full Name</label>
            <input type="text" id="fullname" name="fullname" placeholder="Enter your full name">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="your@email.com">
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

Step 2: CSS Styling and Layout

Apply CSS to style the form and create a flexible layout using Flexbox. This ensures the form looks good on all screen sizes −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        padding: 20px;
    }
    
    .responsive-form {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .form-group {
        flex: 1;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
    
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus {
        border-color: #007bff;
        outline: none;
    }
    
    button {
        width: 100%;
        padding: 15px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    button:hover {
        background-color: #0056b3;
    }
    
    /* Media query for tablets and smaller screens */
    @media (max-width: 768px) {
        .form-row {
            flex-direction: column;
            gap: 10px;
        }
        
        .responsive-form {
            padding: 20px;
        }
    }
    
    /* Media query for mobile phones */
    @media (max-width: 480px) {
        body {
            padding: 10px;
        }
        
        .responsive-form {
            padding: 15px;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="password"] {
            font-size: 14px;
        }
    }
</style>
</head>
<body>
    <form class="responsive-form">
        <h2>Responsive Contact Form</h2>
        <div class="form-row">
            <div class="form-group">
                <label for="fullname">Full Name</label>
                <input type="text" id="fullname" name="fullname" placeholder="Enter your full name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="your@email.com">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="text" id="phone" name="phone" placeholder="Your phone number">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Create a password">
            </div>
        </div>
        <button type="submit">Submit Form</button>
    </form>
</body>
</html>

A responsive form with two columns on desktop that stacks into a single column on mobile devices. The form includes styled input fields, labels, and a blue submit button. On screens smaller than 768px, the form fields stack vertically for better mobile usability.

Key Features of Responsive Forms

Flexible Layout: Uses Flexbox to create adaptable column layouts
Media Queries: Different styling rules for various screen sizes
Touch-Friendly: Adequate padding and font sizes for mobile devices
Viewport Meta Tag: Essential for proper mobile rendering
Box-Sizing: Border-box ensures consistent sizing across elements

Conclusion

Creating responsive forms with CSS involves using flexible layouts, media queries, and proper viewport configuration. The combination of Flexbox and media queries ensures your forms work seamlessly across all devices, providing an optimal user experience.

AmitDiwan

Updated on: 2026-03-15T14:38:33+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next