Creating a "Contact Us" page is an essential first step in staying connected with your visitors. In this lesson, you'll build an HTML contact page using 10 popular elements. To help deepen your understanding, we've included analogies that explain how each element works. Feel free to copy and paste the code into your own projects to get started quickly.
In today’s lesson, you’ll design a complete HTML Contact Us page using our ready-made code template. Simply copy and paste the code into your project, then customize it to fit your needs. If you’re looking for just the basics, check out our bonus minimalist HTML template.
Looking to create a full set of business pages? Learn where the Contact Us page fits in our full guide on creating essential pages in HTML for your business website.
Feeling creative? Use our custom AI prompt to generate a unique design from scratch. And don’t miss our “10 Popular HTML Elements” data table—it explains each element with simple, easy-to-understand analogies.
Full HTML Contact Us Example
Contact Us HTML Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Contact Us | PushCodeFar.com</title>
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/privacy-policy">
Privacy Policy</a></li>
<li><a href="/terms-of-use">
Terms of Use</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>We'd love to hear from you!</h2>
<p>At PushCodeFar.com, our mission
is to help students learn coding from
anywhere on the internet. Whether you
have a question about a tutorial, need
support, or want to give feedback, feel
free to reach out using the form below
or through email.</p>
</section>
<section>
<form action="/submit-form" method="POST">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name"
required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email"
required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows=
"6" required></textarea><br><br>
<button type="submit">Send Message</button>
</form>
</section>
<section>
<h2>Other Ways to Reach Us</h2>
<address>
Email: <a href="mailto:[email protected]">
[email protected]</a><br>
Twitter: <a href="https://twitter.com/pushcodefar"
target="_blank">@pushcodefar</a><br>
GitHub: <a href="https://github.com/pushcodefar"
target="_blank">PushCodeFar on GitHub</a>
</address>
</section>
</main>
<footer>
<p>© 2025 PushCodeFar.com.
All rights reserved.</p>
</footer>
</body>
</html>Bonus HTML Template
Contact Us HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>We'd love to hear from you!</h2>
<p>If you have questions, suggestions,
or feedback, feel free to reach out through
the form below or via our email address.</p>
</section>
<section>
<form action="/submit-form" method="POST">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name"
required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email"
required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows=
"5" required></textarea><br><br>
<button type="submit">Send Message</button>
</form>
</section>
<section>
<h2>Other Ways to Reach Us</h2>
<address>
Email: <a href="mailto:[email protected]">
[email protected]</a><br>
Twitter: <a href="https://twitter.com/example">
@example</a>
</address>
</section>
</main>
<footer>
<p>© 2025 Example Company.
All rights reserved.</p>
</footer>
</body>
</html>A.I. Prompt
A.I. Prompt
You are an expert in creating
"HTML Contact Us Pages". Design
a simple HTML contact us page
without CSS and styling.Most Contact Us pages rely on a simple form to gather user messages. If you need a quick refresher on how to structure one, MDN’s guide to the <form> element walks you through it.
For added security, especially to prevent spam, consider implementing Google reCAPTCHA v3 to protect your forms.
10 Popular HTML Elements in this Contact Us Example
| HTML Element | Importance |
|---|---|
| <!DOCTYPE> | Tells the browser what document type to use. |
| <html> | These tags wrap the entire HTML document. |
| <head> | Goes near the top and contains titles, CSS links, etc. |
| <body> | This HTML element holds the bulk of the content. |
| <header> | The page title and navigational links go here. |
| <nav> | Usually on top of the page, you will find these tags. |
| <main> | This is where the important content goes. |
| <section> | The tag separates content into smaller chunks. |
| <form> | An HTML form allows users to write and send messages. |
| <footer> | It may show site links, contact us, or social links. |
HTML Tag Explanation
The <!DOCTYPE> declaration in an HTML "Contact Us" page is like the blueprint label on a construction plan. It tells the users what HTML version to us for this page.
The <html> element in a "Contact Us" page is like the outer envelope of a letter. Everything is wrapped inside it so that it's delivered as one package.
The <head> element in a "Contact Us" page is like the control panel behind the scenes of a reception desk. It holds things like page titles, CSS, and content delivery networks.
The <body>tag is like the main lobby of an office. They read the content, see forms, and consume the main information.
The <header>element is like the signage and welcome banner at the entrance of an office. It displays the company title, logo, and other introductory items.
The <nav> element in a "Contact Us" page is like the directory board or receptionist’s guide in a building lobby. It guides visitors by linking to other important pages or sections.
The <main> tag is like the meeting room where the actual conversation happens. This is where the main content like paragraphs, infographics, and videos are located.
The <section> tags are like a separate area or booth within the main office. They group content together to keep things organized.
The <form> element in a "Contact Us" page is like the physical clipboard at the reception desk. Visitors requesting information write down their name and email, then submit.
The <footer> tag is like the information board near the exit of an office. It gives users the final details about the company so they can stay connected.
Conclusion
If a company wants to stay connected with its visitors, the "Contact Us" page plays an important role. It can include various ways to get in touch, such as social media links, email addresses, and phone numbers.
As a developer, your task is to design an inviting and informative contact page. Try incorporating additional HTML elements like a company logo or image, links to popular articles, or even a media file. Need more ideas? Share your thoughts in the comments section below.