How to Add a Contact Form to a Static Site

Why static sites need a form backend

Static site generators produce plain HTML, CSS, and JavaScript files with no server-side processing. When a visitor submits a form, there is no server to receive the data. A form backend service like FormsList solves this by providing an external endpoint that accepts POST requests and handles storage, validation, and email delivery.

Add the form to your static site template

Add a standard HTML form to your template or page. It works the same way regardless of your static site generator: Jekyll, Hugo, Eleventy, Astro, or plain HTML. The form posts to a FormsList endpoint, which processes the submission externally.

<!-- Works with any static site generator -->
<form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST">
  <div style="margin-bottom:1rem;">
    <label for="name" style="display:block;font-weight:600;">Name</label>
    <input type="text" id="name" name="name" required
      style="width:100%;padding:8px;border:1px solid #d1d5db;border-radius:4px;" />
  </div>
  <div style="margin-bottom:1rem;">
    <label for="email" style="display:block;font-weight:600;">Email</label>
    <input type="email" id="email" name="email" required
      style="width:100%;padding:8px;border:1px solid #d1d5db;border-radius:4px;" />
  </div>
  <div style="margin-bottom:1rem;">
    <label for="message" style="display:block;font-weight:600;">Message</label>
    <textarea id="message" name="message" rows="5" required
      style="width:100%;padding:8px;border:1px solid #d1d5db;border-radius:4px;"></textarea>
  </div>
  <button type="submit"
    style="padding:10px 24px;background:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;">
    Send Message
  </button>
</form>

<!-- Optional: AJAX submission for a smoother experience -->
<script>
  document.querySelector("form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const form = e.target;
    const btn = form.querySelector("button");
    btn.disabled = true;
    btn.textContent = "Sending...";

    const res = await fetch(form.action, { method: "POST", body: new FormData(form) });

    if (res.ok) {
      form.innerHTML = "<p style='color:#16a34a;font-weight:600;'>Thank you! Your message has been sent.</p>";
    } else {
      btn.disabled = false;
      btn.textContent = "Send Message";
      alert("Something went wrong. Please try again.");
    }
  });
</script>

Deploy and test

Build and deploy your static site as usual. The form works on any hosting platform: Netlify, Vercel, GitHub Pages, Cloudflare Pages, or any web server. Submit a test entry and check the FormsList dashboard. Enable email notifications to receive submissions in your inbox.