Forms & HTML

How to create a Contact Us form in HTML (Step by Step)

A complete guide to building a responsive, modern contact form from scratch using plain HTML and CSS.

April 19, 2026 · 6 min read · MyFormConnect

A "Contact Us" page is essential for almost every website. It provides a direct line of communication between you and your visitors. While you could use a heavy drag-and-drop form builder, coding your own form in HTML is much faster, cleaner, and gives you total control.

What we will build

Here is the exact contact form we are going to create. It looks professional and uses standard HTML5 inputs.

Step 1: The HTML Structure

A standard contact form needs three main inputs: Name, Email, and the Message itself. We use an <input> tag for the single-line fields, and a <textarea> for the multi-line message field.

<form action="YOUR_ENDPOINT_URL" method="POST">
  <div class="form-group">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

Step 2: Understanding the attributes

• name attribute: This is critical. When the form is submitted, the name is what identifies the data. For example, name="message" ensures the backend knows which part of the data is the user's message.
• required: A built-in HTML5 validation feature that prevents the form from submitting if the field is empty.
• rows="5": Tells the browser to make the textarea big enough to show 5 lines of text by default.

The Final Ready-to-Run Code

Here is the complete HTML page including CSS. You can save this as contact.html and open it directly in your web browser.

<!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>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #f9fafb;
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }
    .contact-box {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      width: 100%;
      max-width: 500px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #374151;
    }
    input, textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      box-sizing: border-box;
      font-family: inherit;
    }
    button {
      width: 100%;
      padding: 12px;
      background-color: #2563eb;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="contact-box">
    <h2 style="margin-top:0;">Send us a message</h2>
    
    <form action="https://myformconnect.io/submit/YOUR_FORM_ID" method="POST">
      <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name" placeholder="John Doe" required>
      </div>

      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" required>
      </div>

      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" placeholder="How can we help you?" required></textarea>
      </div>

      <button type="submit">Send Message</button>
    </form>
  </div>

</body>
</html>

How do I actually receive the messages?

Your HTML form is ready, but it needs a destination. By setting the action attribute to a form endpoint like MyFormConnect, you can have messages instantly emailed to you without writing any PHP or Node.js server code.

To learn more about connecting your form, read our guide on form capture without a backend.