Contact form HTML template

The classic three-field contact form: name, email, message. This is the form most small business websites need first, and the version below is complete — accessible labels, required-field validation, a honeypot spam trap and a small block of CSS you can restyle freely.

The form

The HTML

<style>
  .hf-form { display: grid; gap: 0.75rem; max-width: 28rem; font-family: system-ui, sans-serif; }
  .hf-form label { font-weight: 600; font-size: 0.9rem; }
  .hf-form input, .hf-form textarea, .hf-form select {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
  }
  .hf-form button {
    justify-self: start; padding: 0.55rem 1.4rem; font: inherit; font-weight: 600;
    background: #0b6e4f; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  }
  .hf-hp { position: absolute; left: -9999px; }
</style>

<form class="hf-form" action="https://example.com/your-endpoint" 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="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>
  <!-- honeypot: humans never see this; bots fill it in. Drop submissions where it has a value. -->
  <input class="hf-hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Send message</button>
</form>

Fields in this template

• Name — text, required
• Email — email, required
• Message — multi-line text, required

Tips for a contact form that works

• Keep it to three fields — every extra field measurably reduces the number of people who send the form.
• The email field uses type="email", so phones show the right keyboard and browsers catch typos like a missing @.
• If you expect attachments or structured requests, link to a dedicated quote or order form instead of growing this one.

Questions

Do I need JavaScript for a contact form?

No. This form is plain HTML — the browser handles required-field checks and email validation natively. JavaScript only becomes useful for things like inline error styling or submitting without a page reload.

How do I receive the messages?

Point the form’s action attribute at your server, or at a form backend service that emails you each submission. The markup works with either.

From the same maker

Need more than a form?

Tentmaker Stores gives you a complete online store — product pages, checkout and everything in between. Built for small makers and niche sellers.