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:
Contact us Page PreviewApproach:
- 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> © 2023 Your Company. All rights reserved. </p> </footer> <script src="script.js"></script> </body> </html>
* { 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 function to toggle the navigation menu function openNavbar() { const navMenu = document.getElementById("nav-menu"); navMenu.classList.toggle("active"); } Output:
Similar Reads
Design a Contact Page with a Map using HTML and CSS In this article, we will design a Contact Page with a Map using HTML and CSS. The Contact Page with the Map is useful and provides users with geographical context for finding your organization or the location more efficiently. Here, we will create the basic contact form for the user to fill out and
3 min read
Design an About us Page using HTML and CSS An About Us page is a crucial part of any website. It introduces your organization, builds trust with visitors, and often serves as one of the most visited pages. Whether you're building a portfolio, company site, or educational platform, having a structured and visually appealing About page improve
5 min read
Design a Tribute Page using HTML and CSS Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Design a Subscription Page using HTML and CSS In this article, we will see how to design a Subscription Page using HTML and CSS. The subscription page is a popup that has an input field for email ID and a button to subscribe the newsletter. We create a card that have an input box and a submit button, enabling users to subscribe to any newslette
2 min read
Design a Wedding Theme based Page using HTML and CSS Designing a wedding-themed webpage is a fun way to capture the joy of this special day. In this article, we'll help you create a beautiful webpage using simple HTML and CSS.PreviewApproachFirslty, create a new file with the "index.html". Include Google Fonts, Font Awesome Icons, and external CSS lin
6 min read