Design a Contact us Page using HTML and CSS

Last Updated : 01 Aug, 2024

A Contact Us page is used to allow visitors to contact the website owner or administrator for various purposes, such as asking questions, giving feedback, requesting information, or reporting issues.

In this article, we will see how to design a Contact Us page using HTML and CSS. Creating an attractive page may seem to be difficult for, those who don’t know HTML and CSS. If someone does not know how to use CSS, they will not be able to make the page look better or more attractive. So the main focus of this article will be on the implementation of CSS.

Output Preview:

Approach:

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.

Example:

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:[email protected]">[email protected]</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");
}