Cách tạo phần liên hệ (Contact Section) responsive cho trang web

Giới thiệu

Phần liên hệ (Contact Section) là cầu nối quan trọng giữa doanh nghiệp và khách hàng. Một contact form đẹp, dễ dùng, responsive trên mọi thiết bị sẽ tăng tỷ lệ chuyển đổi.

Ví dụ hoàn chỉnh

Dưới đây là mã tạo Contact Section responsive với bố cục 2 cột (hình ảnh bên trái, form bên phải) trên desktop, chồng thành 1 cột trên mobile:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        * { box-sizing: border-box; }
        input[type="text"], select, textarea {
            width: 100%; padding: 12px; border: 1px solid #ccc;
            margin: 6px 0 16px; resize: vertical; font-size: 18px;
        }
        input[type="submit"] {
            background-color: rgb(139, 76, 175); color: white;
            padding: 12px 20px; border: none; cursor: pointer; font-size: 18px;
            border-radius: 4px; transition: background 0.3s;
        }
        input[type="submit"]:hover { background-color: #45a049; }
        label { font-weight: bold; }
        .contactImg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
        .contactForm {
            margin: auto; border-radius: 5px; background-color: #d3d3d3;
            padding: 20px; max-width: 1000px;
        }
        .contactCol {
            float: left; width: 50%; margin-top: 6px; padding: 20px;
        }
        .contactSection::after { content: ""; display: table; clear: both; }
        @media screen and (max-width: 600px) {
            .contactCol, input[type="submit"] { width: 100%; margin-top: 0; }
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Responsive Contact Section Example</h1>
    <div class="contactForm">
        <div style="text-align:center"><h2>Contact Us</h2></div>
        <div class="contactSection">
            <div class="contactCol">
                <img class="contactImg" src="https://i.picsum.photos/id/8/400/400.jpg" alt="Contact illustration" />
            </div>
            <div class="contactCol">
                <form action="/action_page.php">
                    <label for="fname">First Name</label>
                    <input type="text" id="fname" name="firstname" placeholder="Your name.." />
                    <label for="lname">Last Name</label>
                    <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com" />
                    <label for="subject">Message</label>
                    <textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
                    <input type="submit" value="Submit" />
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Giải thích kỹ thuật

• Box-sizing border-box: Đảm bảo padding/border không làm tăng kích thước element.
• Float layout: 2 cột .contactCol float left, width 50% trên desktop.
• Media query 600px: Chuyển sang width 100%, xóa margin-top, xếp chồng cột.
• Form styling: Input/textarea full width, khoảng cách nhất quán, nút submit nổi bật.
• Hình ảnh responsive: max-width: 100%; height: auto co giãn theo container.

Cải tiến hiện đại (CSS Grid/Flexbox)

Thay vì float, nên dùng Flexbox hoặc Grid:

.contactSection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 600px) {
    .contactSection { grid-template-columns: 1fr; }
}

Cách này ngắn gọn, không cần clearfix, dễ căn chỉnh dọc (align-items).

Mẹo UX cho Contact Form

• Thêm required trên input bắt buộc, type="email" để validate tự động.
• Sử dụng :focus-visible để style trạng thái focus rõ ràng cho accessibility.
• Thêm aria-label hoặc <label> gán đúng for cho screen reader.
• Hiển thị thông báo thành công/lỗi sau khi submit (cần JS/backend).