HTML Template with Contact Form 2026

Working Contact Form — Copy & Paste

This sends emails via Formspree (free, no PHP, no server required):

<form action="https://formspree.io/f/YOUR_ID"
      method="POST">

  <label for="name">Name</label>
  <input type="text" id="name" name="name"
    required aria-required="true">

  <label for="email">Email</label>
  <input type="email" id="email" name="email"
    required aria-required="true">

  <label for="message">Message</label>
  <textarea id="message" name="message"
    rows="5" required></textarea>

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

Free Form Services — No PHP Required

Formspree

Best for Most Sites

Free: 50 submissions/month. $10/month: unlimited, file uploads, spam filtering, integrations. Setup: 2 minutes. Works with any HTML form via the action URL.

Netlify Forms

Best if Hosting on Netlify

Built into Netlify hosting. Free: 100 submissions/month. Add `netlify` attribute to your form element — no external service needed. Submissions appear in Netlify dashboard.

Web3Forms

Best Free Unlimited Option

Free plan: unlimited submissions. Email delivery via API key in a hidden field. No Formspree account needed. Simple setup, reliable delivery.

EmailJS

Best for Custom Email Templates

Free: 200 emails/month. Sends via your own email provider (Gmail, Outlook). Full JavaScript API control. Best for custom confirmation email workflows.

Contact Form Accessibility Requirements

Every input must have an explicit <label for="id"> — not just placeholder text
Required fields: add `required` attribute AND `aria-required="true"`
Error messages: add `aria-describedby` pointing to the error element id
Submit button: use `<button type="submit">` not `<input type="submit">` for richer styling
Focus styles: never remove `:focus` outline — keyboard users need them
Success confirmation: show a success message in the DOM — don't just hide the form

Spam Prevention Without CAPTCHA

Honeypot field — hidden field bots fill out, humans don't: `<input type="text" name="_gotcha" style="display:none">`
Formspree spam filtering — enabled on paid plans, blocks known spam patterns
reCAPTCHA v3 — invisible score-based, no checkbox (better UX than v2)
Rate limiting via Netlify Forms — automatically rate limits per IP
Time-based check — forms submitted in under 3 seconds are likely bots (JavaScript timer)

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I add a working contact form to an HTML website?

Without a server: 1) Sign up at formspree.io (free). 2) Create a form and copy your form ID. 3) Set your HTML form's action to `https://formspree.io/f/YOUR_ID` and method to `POST`. 4) Add name, email, and message inputs with labels and required attributes. 5) Test by submitting — emails arrive at your inbox. Free plan: 50 submissions/month.

How do I make an HTML contact form send emails without PHP?

4 options without PHP: 1) Formspree (free, 50/month): set form action to your Formspree URL. 2) Netlify Forms (free, 100/month): add `netlify` attribute to form, deploy to Netlify. 3) Web3Forms (free, unlimited): add hidden API key field. 4) EmailJS (free, 200/month): JavaScript SDK to send via Gmail or Outlook. All work with static HTML — no server required.

What is the best contact form for a static HTML website?

For most sites: Formspree (easiest setup, reliable delivery, spam filtering on paid plan). For Netlify-hosted sites: Netlify Forms (built-in, no external service). For unlimited free submissions: Web3Forms. For custom email workflows: EmailJS. UIXDraft templates include pre-built form HTML with Formspree integration — change the action URL to your form ID and it works immediately.

How do I prevent spam on my HTML contact form?

Best spam prevention without CAPTCHA: 1) Honeypot hidden field (catch bots that fill all fields). 2) Formspree paid spam filtering ($10/month). 3) reCAPTCHA v3 (invisible, score-based, no checkbox UI). 4) Netlify Forms auto rate limiting. 5) JavaScript time check (forms submitted in under 3s are bot submissions). Honeypot + Formspree covers 95% of spam for most small sites.

How do I style a contact form in HTML and CSS?

Key form CSS: input and textarea get `width:100%; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--t1)`. Focus state: `border-color:var(--purple); outline:none`. Submit button matches your site's `.btn` class. Stack fields vertically with `display:flex; flex-direction:column; gap:16px` on the form element.