Article Categories

Selected Reading

How to create a responsive contact section for web pages?

CSS Web Development Front End Technology

A responsive contact section is a crucial component of any website that allows visitors to reach out through a form while maintaining proper layout across all device sizes. This section typically includes contact form fields and an accompanying image that adapts seamlessly when the browser is resized.

Syntax

/* Basic structure for responsive contact section */
.contact-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
}

Setting Up the Contact Image

Begin by creating a container for the contact image that will be positioned alongside the form −

<!DOCTYPE html>
<html>
<head>
<style>
    .contactCol {
        float: left;
        width: 45%;
        margin-top: 6px;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .contactImg {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 8px;
    }
</style>
</head>
<body>
    <div class="contactCol">
        <img class="contactImg" src="https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Contact Us"/>
    </div>
</body>
</html>

A responsive image container that takes 45% width with rounded corners and proper scaling appears on the left side.

Creating the Contact Form

The contact form includes essential fields like first name, last name, email, and message with proper styling −

<!DOCTYPE html>
<html>
<head>
<style>
    .contactCol {
        float: left;
        width: 45%;
        margin-top: 6px;
        padding: 20px;
        box-sizing: border-box;
    }
    
    input[type="text"], input[type="email"], textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 16px;
        font-size: 16px;
        font-family: Arial, sans-serif;
    }
    
    label {
        font-weight: bold;
        color: #333;
    }
    
    input[type="submit"] {
        background-color: #007bff;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    
    input[type="submit"]:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="contactCol">
        <form action="/contact-submit" method="post">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Enter your first name" required/>
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Enter your last name" required/>
            
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required/>
            
            <label for="message">Message</label>
            <textarea id="message" name="message" placeholder="Enter your message" rows="6" required></textarea>
            
            <input type="submit" value="Send Message"/>
        </form>
    </div>
</body>
</html>

A styled contact form with input fields for first name, last name, email, and message, along with a blue submit button that changes color on hover.

Complete Responsive Contact Section

Here's the complete implementation combining the image and form with responsive behavior −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
    }
    
    .contact-container {
        max-width: 1000px;
        margin: 0 auto;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .contact-header {
        text-align: center;
        padding: 30px 20px;
        background-color: #007bff;
        color: white;
    }
    
    .contact-content {
        display: flex;
        min-height: 400px;
    }
    
    .contact-image {
        flex: 1;
        background: url('https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600') center/cover;
    }
    
    .contact-form {
        flex: 1;
        padding: 40px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    label {
        display: block;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
    
    input[type="text"], input[type="email"], textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid #e1e1e1;
        border-radius: 6px;
        font-size: 16px;
        transition: border-color 0.3s;
        box-sizing: border-box;
    }
    
    input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
        outline: none;
        border-color: #007bff;
    }
    
    textarea {
        resize: vertical;
        min-height: 120px;
    }
    
    .submit-btn {
        background-color: #007bff;
        color: white;
        padding: 14px 28px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
    }
    
    .submit-btn:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
    
    @media screen and (max-width: 768px) {
        .contact-content {
            flex-direction: column;
        }
        
        .contact-image {
            height: 200px;
        }
        
        .contact-form {
            padding: 20px;
        }
        
        body {
            padding: 10px;
        }
    }
</style>
</head>
<body>
    <div class="contact-container">
        <div class="contact-header">
            <h2>Get In Touch</h2>
            <p>We'd love to hear from you. Send us a message!</p>
        </div>
        
        <div class="contact-content">
            <div class="contact-image"></div>
            
            <div class="contact-form">
                <form action="/contact-submit" method="post">
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" id="firstName" name="firstName" placeholder="John" required/>
                    </div>
                    
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" id="lastName" name="lastName" placeholder="Doe" required/>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" placeholder="john.doe@example.com" required/>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" placeholder="Tell us how we can help you..." required></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

A complete responsive contact section with a blue header, side-by-side layout showing a contact image on the left and form on the right. On mobile devices (below 768px), the layout stacks vertically with the image above the form.

Key Features

Feature	Description
Flexbox Layout	Modern responsive layout using flexbox instead of floats
Mobile-First	Responsive design that works on all screen sizes
Form Validation	Required fields and proper input types for better UX
Hover Effects	Interactive elements with smooth transitions

Conclusion

Creating a responsive contact section involves combining a well-structured form with proper CSS styling and media queries. The flexbox approach provides better control over layout compared to traditional float-based designs, ensuring your contact section looks great on all devices.

AmitDiwan

Updated on: 2026-03-15T15:14:58+05:30

342 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next