Build a Contact Us Page Using HTML Forms, Anchor Tag (<a>) and Iframe (With Source Code)
Learn how to create a real-world Contact Us page using HTML forms, hyperlinks, and iframes with a simple and practical example.
Build a Contact Us Page Using HTML Forms, Anchor Tag (<a>) and Iframe (With Source Code)
Learn how to create a real-world Contact Us page using HTML forms, hyperlinks, and iframes with a simple and practical example.
Introduction
Creating a Contact Us page is one of the most important parts of any website. It allows users to connect, send queries, and interact with your platform.
In this article, we will build a simple Contact Us page using:
- HTML forms for user input
- Anchor (
<a>) tag for navigation and communication - Iframe (
<iframe>) to embed external content
This project helps you understand how these elements work together in a real-world scenario.
Using <a> Tag in Contact Page
The anchor tag is used to create clickable links. In a contact page, it is commonly used for:
- Email links
- Social media links
- External navigation
Example :
<a href="abc@gmail.com">Send Email</a>
<a href="https://www.linkedin.com" target="_blank">LinkedIn</a>Using Forms for User Input
Forms allow users to submit their details like name, email, and message.
Example :
<form>
<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="Enter your email" />
<textarea placeholder="Your message"></textarea>
<button>Submit</button>
</form>Using <iframe> in Contact Page
Iframes are useful to embed external content such as:
- Google Maps
Example :
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945976.096363149!2d73.67868263598803!3d15.020863398954694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba35a4c37bf488f%3A0x41f1d28cd1757cd5!2sKarnataka!5e0!3m2!1sen!2sin!4v1776438259166!5m2!1sen!2sin"
width="100%"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>Complete Contact Form Source Code
HTML Code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact us page</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="contact-container">
<div class="contact-title">Contact Us</div>
<div class="contact-grid">
<div class="contact-left">
<div class="contact-left-content">
<div>ABC Organization</div>
<div>+91 985xxxxxxx</div>
<div><a href="abc@gmail.com">abc@gmail.com</a></div>
<div>
Follow us :
<div>
<a href="https://www.youtube.com/" target="_blank"
><i class="bi bi-youtube"></i
></a>
<a href="https://www.linkedin.com/jobs/" target="_blank"
><i class="bi bi-linkedin"></i
></a>
<a href="https://x.com/" target="_blank"
><i class="bi bi-twitter-x"></i
></a>
</div>
</div>
</div>
</div>
<div class="contact-right">
<form>
<div>
<label>Name</label><br />
<input type="text" placeholder="Enter your name" />
</div>
<div>
<label>Email</label><br />
<input type="email" placeholder="Enter your email" />
</div>
<div>
<label>Your Message</label><br />
<textarea rows="4" placeholder="Type here..."> </textarea>
</div>
<div><button>Submit</button></div>
</form>
</div>
</div>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945976.096363149!2d73.67868263598803!3d15.020863398954694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba35a4c37bf488f%3A0x41f1d28cd1757cd5!2sKarnataka!5e0!3m2!1sen!2sin!4v1776438259166!5m2!1sen!2sin"
width="100%"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
</body>
</html>CSS Code :
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");
body {
margin: 0;
font-family: "Poppins", sans-serif;
background: linear-gradient(to right, #f1f1f1, #f1f3f4);
}
.contact-title {
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
}
.contact-container {
min-height: 100vh;
padding: 60px 100px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 30px;
background-color: #fff;
padding: 50px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
margin-bottom: 60px;
}
.contact-left {
display: flex;
align-items: center;
justify-content: center;
}
.contact-left div {
font-size: 18px;
margin-bottom: 15px;
}
.contact-left a {
color: #0d6efd;
text-decoration: none;
}
.contact-left a:hover {
text-decoration: underline;
}
.contact-left i {
font-size: 18px;
margin-right: 10px;
cursor: pointer;
color: #555;
transition: 0.3s;
}
.contact-left i:hover {
color: #0d6efd;
}
.contact-right form div {
margin-bottom: 15px;
}
label {
font-size: 14px;
color: #333;
margin-bottom: 5px;
display: inline-block;
}
input,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
outline: none;
font-size: 14px;
transition: 0.3s;
}
input:focus,
textarea:focus {
border-color: #0d6efd;
}
button {
background-color: #0d6efd;
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #0b5ed7;
}Output :
Conclusion
In this project, we combined forms, anchor tags, and iframes to create a fully functional Contact Us page. These elements are essential in real-world web development and help improve user interaction and accessibility.
What’s Coming Up Next?
In the next part of this series, we’ll explore CSS positioning concepts — including static, relative, absolute, and fixed positioning — and learn how they help control layout and element placement in real-world projects.
Want all HTML & CSS lessons in one place?
📚 Explore My HTML & CSS Learning Series (Reading List)
Stay tuned — this is where things start getting exciting!
If you’re excited to learn web development through real projects and a practical step-by-step approach, follow me on Medium so you don’t miss the next story in this series.
Let’s learn, build, and grow together!
메타데이터
- post_id
- 0bf95dc98dcb
- slug
- build-a-contact-us-page-using-html-forms-anchor-tag-a-and-iframe-with-source-code-0bf95dc98dcb
- url
- https://medium.com/@gundetigayathri0502/build-a-contact-us-page-using-html-forms-anchor-tag-a-and-iframe-with-source-code-0bf95dc98dcb
- canonical_url
- https://medium.com/@gundetigayathri0502/build-a-contact-us-page-using-html-forms-anchor-tag-a-and-iframe-with-source-code-0bf95dc98dcb
- author_url
- https://medium.com/@gundetigayathri0502
- status
- ok
- fetched_at
- 2026-07-10 09:05:01
