Back to blog

    HTML Contact Form Example (Copy-Paste Ready)

    A complete HTML contact form with name, email, and message fields. Works on any static site — no backend required. Includes spam protection and email notifications via Formboost.

    HTML Contact Form Example (Copy-Paste Ready)

    If you need a contact form on a static site, you don't need a backend server. This guide gives you a complete, working HTML contact form — name, email, and message — that sends submissions to your inbox.

    The Simplest HTML Contact Form

    Here's a minimal form that works out of the box. Replace YOUR_ENDPOINT_ID with your Formboost endpoint:

    1<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
2  <label for="name">Name</label>
3  <input type="text" id="name" name="name" placeholder="Jane Smith" required />
4
5  <label for="email">Email</label>
6  <input type="email" id="email" name="email" placeholder="[email protected]" required />
7
8  <label for="message">Message</label>
9  <textarea id="message" name="message" rows="5" placeholder="Your message..." required></textarea>
10
11  <button type="submit">Send Message</button>
12</form>

    Point the action at your Formboost endpoint URL, set method="POST", and you're done. Submissions go straight to your dashboard and trigger an email notification.

    Full Example with CSS Styling

    A complete, styled contact form ready to drop into any HTML page:

    1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Contact</title>
7  <style>
8    * { box-sizing: border-box; margin: 0; padding: 0; }
9
10    body {
11      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
12      background: #f9fafb;
13      display: flex;
14      min-height: 100vh;
15      align-items: center;
16      justify-content: center;
17      padding: 2rem;
18    }
19
20    .contact-form {
21      background: #fff;
22      border: 1px solid #e5e7eb;
23      border-radius: 12px;
24      padding: 2rem;
25      width: 100%;
26      max-width: 480px;
27      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
28    }
29
30    h2 {
31      font-size: 1.25rem;
32      font-weight: 600;
33      margin-bottom: 1.5rem;
34      color: #111;
35    }
36
37    .field {
38      display: flex;
39      flex-direction: column;
40      gap: 0.375rem;
41      margin-bottom: 1.25rem;
42    }
43
44    label {
45      font-size: 0.875rem;
46      font-weight: 500;
47      color: #374151;
48    }
49
50    input, textarea {
51      border: 1px solid #d1d5db;
52      border-radius: 8px;
53      padding: 0.625rem 0.75rem;
54      font-size: 0.9375rem;
55      color: #111;
56      outline: none;
57      transition: border-color 0.15s;
58      width: 100%;
59    }
60
61    input:focus, textarea:focus {
62      border-color: #2563eb;
63      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
64    }
65
66    textarea { resize: vertical; }
67
68    button[type="submit"] {
69      width: 100%;
70      background: #2563eb;
71      color: #fff;
72      border: none;
73      border-radius: 8px;
74      padding: 0.75rem;
75      font-size: 0.9375rem;
76      font-weight: 500;
77      cursor: pointer;
78      transition: background 0.15s;
79    }
80
81    button[type="submit"]:hover { background: #1d4ed8; }
82  </style>
83</head>
84<body>
85  <div class="contact-form">
86    <h2>Get in Touch</h2>
87
88    <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
89      <!-- Honeypot: hidden field bots fill in, humans don't -->
90      <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off" />
91
92      <div class="field">
93        <label for="name">Name</label>
94        <input type="text" id="name" name="name" placeholder="Jane Smith" required />
95      </div>
96
97      <div class="field">
98        <label for="email">Email</label>
99        <input type="email" id="email" name="email" placeholder="[email protected]" required />
100      </div>
101
102      <div class="field">
103        <label for="message">Message</label>
104        <textarea id="message" name="message" rows="5" placeholder="Your message..."></textarea>
105      </div>
106
107      <button type="submit">Send Message</button>
108    </form>
109  </div>
110</body>
111</html>

    Add a Custom Thank-You Page

    By default, Formboost shows a confirmation page after submission. To redirect to your own page instead, add a hidden field:

    1<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

    Create a simple thank-you.html page and point _redirect at it.

    Stay on the Page (AJAX Submit)

    If you don't want any page redirect, handle the submit with JavaScript:

    1<form id="contact-form">
2  <input type="text" name="name" required />
3  <input type="email" name="email" required />
4  <textarea name="message"></textarea>
5  <button type="submit">Send</button>
6  <p id="status" hidden></p>
7</form>
8
9<script>
10  document.getElementById("contact-form").addEventListener("submit", async function (e) {
11    e.preventDefault();
12
13    const form = e.target;
14    const status = document.getElementById("status");
15    const data = Object.fromEntries(new FormData(form));
16
17    try {
18      const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
19        method: "POST",
20        headers: { "Content-Type": "application/json" },
21        body: JSON.stringify(data),
22      });
23
24      if (res.ok) {
25        status.textContent = "Message sent! We'll be in touch.";
26        status.style.color = "green";
27        form.reset();
28      } else {
29        throw new Error();
30      }
31    } catch {
32      status.textContent = "Something went wrong. Please try again.";
33      status.style.color = "red";
34    }
35
36    status.hidden = false;
37  });
38</script>

    Spam Protection

    Public forms attract bots. The honeypot field in the example above stops most simple bots — it's a hidden input that only bots fill in. Formboost also runs every submission through an AI spam classifier and rate-limits per endpoint, so you don't need to set any of that up yourself.

    Required vs Optional Fields

    Use required on fields the user must fill in. For email specifically, use type="email" so the browser validates the format before submitting:

    1<input type="email" name="email" required />         <!-- required, validated format -->
2<input type="tel" name="phone" />                    <!-- optional phone number -->
3<input type="text" name="company" />                 <!-- optional company name -->

    Common Field Types

    FieldHTML
    Short text<input type="text" name="name">
    Email<input type="email" name="email">
    Phone<input type="tel" name="phone">
    Long text<textarea name="message"></textarea>
    Dropdown<select name="subject"><option>...</option></select>
    Checkbox<input type="checkbox" name="newsletter" value="yes">

    All of these work with Formboost — whatever name attributes you use become the field names in your dashboard.

    Get Your Endpoint

    1. Sign up at dashboard.formboost.app — free, no credit card
    2. Create a new endpoint (takes under a minute)
    3. Copy your endpoint URL and replace YOUR_ENDPOINT_ID in the form above

    Get your free form endpoint →