Design a Contact us Page using HTML and CSS

A Contact Us page allows visitors to communicate with the website owner for queries, feedback, or support. It is an essential part of user interaction on any website.

Designed using HTML for structure and CSS for styling and layout.
CSS plays a key role in making the page visually appealing and user-friendly.
Focuses on creating an attractive and responsive design for better user experience.

Approach

Implements a structured and responsive webpage with interactive navigation and user input handling.

Create a structured HTML document with sections for header, banner, contact form, company info, and footer.
Design a responsive header with a hamburger menu for navigation and a prominent "Call us" button.
Enhance visual appeal with a banner section featuring an image and a welcoming message.
Implement a user-friendly contact form with labeled input fields for name, email, phone, and message.
Display company contact information in a dedicated section for easy reference, including address, phone, and email.
For smaller size device we will use the hamburger menu to toggle the navbar using javascript function.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="style.css">
    <title>Contact us Page</title>
</head>

<body>
    <!-- Header section -->
    <header>
        <button class="hamburger" id="hamburger-icon">
            <span onclick="openNavbar()"> ☰</span>
        </button>
        <div class="logo">Your Logo</div>
        <nav id="nav-menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Enquiry</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>
        <button class="reachUs-button">Call us</button>
    </header>

    <!-- banner section  -->
    <section class="banner">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230822131732/images.png"
            alt="Welcome to our Contact Us page">
        <h1>Get in Touch With Us</h1>
        <p>
          We're here to answer any questions you may have.
          </p>
    </section>

    <!-- Contact form -->
    <section class="contact-form">
        <div class="form-container">
            <h2>Your Details</h2>
            <form action="#" method="POST">

                <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="phone">Phone: </label>
                <input type="tel" id="phone" name="phone">

                <label for="message">Message: </label>
                <textarea id="message" name="message" rows="4" required></textarea>

                <button type="submit" class="submit-button">Submit</button>
            </form>
        </div>
    </section>

    <!-- Company contact info -->
    <section class="contact-info">
        <h2>Contact Information</h2>
        <address>
            Your Company Name<br>
            123 Main Street<br>
            City, State Zip Code<br>
            Phone: <a href="tel:1234567890">123-456-7890</a><br>
            Email: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </section>

    <!-- Footer section -->
    <footer>
        <p>
          &copy; 2023 Your Company. All rights reserved.
          </p>
    </footer>
    <script src="script.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Header styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
    height: 4rem;
}

.logo {
    font-size: 2rem;
}

nav {
    width: 30rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

nav ul li a {
    font-size: 1.2rem;
    padding: 1rem;
    text-decoration: none;
    color: white;
}

nav ul li a:hover {
    background-color: #0dac30;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.reachUs-button {
    padding: 1rem;
    background-color: #0dac30;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.reachUs-button:hover{
    background-color: #1ac840;
}

/* banner section styles */
.banner {
    text-align: center;
    background-color: #ffffff;
    margin: 0 auto;
}

.banner img {
    max-width: 100%;
    height: auto;
}
/* Contact form styles */
.contact-form {
    padding: 40px 0;
    margin: 0 10px;
}

.form-container {
    max-width: 40%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-container label {
    display:block;
    font-weight: bold;
}
.form-container input, textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1rem;
    resize: vertical;
}
.submit-button {
    padding: 10px 20px;
    background-color: #0dac30;
    border: none;
    color: white;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

/* Contact info styles */
.contact-info {
    text-align: center;
    padding: 50px 0;
    background-color: #f7f7f7;
}

.contact-info h2 {
    margin-bottom: 20px;
}

/* Footer styles */
footer {
    padding: 20px;
    text-align: center;
    background-color: #333;
    color: white;
}
/* Hamburger styles */
.hamburger {
    display: none;
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Media queries for responsiveness */
@media only screen and (max-width: 768px) {
    .logo {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    #nav-menu {
        position: absolute;
        top: 4rem;
        left: 0;
        background-color: #333;
        width: 100%;
        display: none;
    }

    #nav-menu.active {
        display: block;
        flex-direction: row;
        padding: 1rem;
    }
}

JavaScript

// JavaScript function to toggle the navigation menu

function openNavbar() {
  const navMenu = document.getElementById("nav-menu");
  navMenu.classList.toggle("active");
}

Output:

Design a Contact us Page using HTML and CSS

Approach

Explore