Build a Contact Us Page Using HTML Forms, Anchor Tag () and Iframe (With Source Code)




Introduction 

In modern web development, creating a Contact Us page is one of the most important features of any website. It allows users to connect with us, send queries, provide feedback, and interact with our platform.

As developers, we often combine multiple HTML concepts to build real-world applications. In this tutorial, we will learn how to create a fully functional Contact Us page using:

  • HTML forms for collecting user input
  • Anchor (<a>) tag for navigation and communication
  • Iframe (<iframe>) to embed external content like maps

By the end of this guide, we will have a clean, responsive, and practical Contact Us page that we can use in real projects.


Why Do We Need a Contact Us Page?

Before we start coding, let’s understand the importance of a Contact page.

A Contact Us page helps us:

  • Provide users with a way to reach us
  • Build trust and credibility
  • Collect feedback and inquiries
  • Improve user engagement

It is a must-have feature for business websites, portfolios, blogs, and applications.


Using Anchor Tag (<a>) in Contact Page

The anchor tag is used to create clickable links. In a Contact Us page, we commonly use it for:

  • Email links
  • Social media links
  • External navigation
Example :

<a href="mailto:abc@gmail.com">Send Email</a>

<a href="https://www.linkedin.com" target="_blank">
  LinkedIn
</a>

Explanation

  • mailto: allows users to send emails directly
  • target="_blank" opens links in a new tab

Using anchor tags improves navigation and user interaction.


Using HTML Forms for User Input

Forms are the core part of a Contact Us page. They allow users to submit their information such as:

  • Name
  • Email
  • Message
Basic Form 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>

Best Practices for Forms

To create effective forms, we should:

  • Use proper labels
  • Validate input fields
  • Keep the form simple
  • Provide clear placeholders

Forms help us collect structured data and connect frontend with backend systems.


Using Iframe (<iframe>) in Contact Page

An iframe allows us to embed external content inside our webpage. In a Contact Us page, it is commonly used to display:

  • Google Maps
  • Location details
  • External resources

Example:

<iframe
  src="https://www.google.com/maps/embed?..."
  width="100%"
  height="450"
  style="border:0;"
  loading="lazy">
</iframe>

Why Use Iframe?

  • Shows location visually
  • Improves user experience
  • Helps users find directions easily 

Complete Contact Us Page Source Code

Now let’s combine everything and build a real-world Contact Us page.

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="mailto: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!1
s0x3ba35a4c37bf488f%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 :






How This Project Works

In this project, we combine three important concepts:

  • Forms → Collect user input
  • Anchor tags → Provide communication links
  • Iframe → Display location

This creates a complete and interactive Contact Us page.


Best Practices for Contact Page Design

To make our Contact page more effective, we should:

  • Keep the layout clean and simple
  • Use clear labels and placeholders
  • Ensure mobile responsiveness
  • Add social media links
  • Include location (map)

Conclusion

In this project, we successfully built a real-world Contact Us page using HTML forms, anchor tags, and iframes.

We learned how to:

  • Collect user input using forms
  • Create links using <a> tag
  • Embed maps using <iframe>

These concepts are essential for building modern and interactive websites.


📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Up Next?

In the next part of this series, we will explore CSS positioning concepts such as static, relative, absolute, and fixed positioning.

We will learn how to control layout and position elements effectively in real-world projects.


Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.
















Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

Semantic Elements in HTML (A Beginner-Friendly Guide to SEO & Structured Web Design)

Image
Introduction In modern web development, writing clean and meaningful code is just as important as creating visually appealing designs. As developers, we don’t just build websites for users—we also build them for search engines and accessibility tools. This is where semantic HTML elements play a crucial role. Semantic elements help us structure our web pages in a way that clearly defines the purpose of each section. Instead of using generic tags like <div> everywhere, we use meaningful tags that describe what the content actually represents. In this article, we will explore what semantic elements are, why they matter, and how we can use them effectively to build SEO-friendly and well-structured web pages. What Are Semantic Elements? Semantic elements are HTML tags that clearly describe the meaning and role of the content they contain. Unlike non-semantic tags (like <div> or <span> ), semantic tags provide context to both browsers and search engines. For example: ...
Read more

Complete Guide to HTML Anchor Tag () and Iframes with Examples

Image
Introduction In modern web development, creating smooth navigation and integrating external content are essential for delivering a great user experience. As developers, we aim to build websites that are not only visually appealing but also easy to navigate and interactive. HTML provides powerful elements like the anchor tag ( <a> ) and the iframe ( <iframe> ) to achieve these goals. These elements help us create hyperlinks, connect different pages, and embed external content seamlessly. In this beginner-friendly guide, we will explore how to use anchor tags and iframes effectively with practical examples. What is a Hyperlink? A hyperlink is a clickable element—such as text, an image, or a button—that takes users to another location. This location can be: A section within the same page Another page on the same website A completely different website Hyperlinks are created using the HTML <a> tag. Why Are Hyperlinks Important? Hyperlinks are the backbone of...
Read more