Guide

How to add a contact form to a static site

A static site has no server to receive form data. You can write a serverless function for it, or send the form to a form backend. A backend takes a few minutes and also gives you spam filtering, email notifications and a place to read submissions.

This guide uses Formkove. It works on any host: GitHub Pages, Netlify, Vercel, Cloudflare Pages or your own server.

1. Create a form

Sign up free, click Create form, and copy the endpoint URL. It looks like this:

https://app.formkove.com/api/forms/YOUR_FORM_ID/submissions

Then add the email address that should receive submissions and confirm it from the verification email.

2. Add the HTML

Paste this into your page and replace YOUR_FORM_ID:

<form action="https://app.formkove.com/api/forms/YOUR_FORM_ID/submissions" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

Each field’s name becomes a column in your dashboard. Use whatever fields you need.

3. Send visitors to your own thank-you page

By default, visitors see Formkove’s success page. To use your own, add redirect to the URL:

<form action="https://app.formkove.com/api/forms/YOUR_FORM_ID/submissions?redirect=https://example.com/thanks" method="POST">

Then add https://example.com under Settings → Allowed Origins & Redirects in Formkove. Redirects only go to sites you’ve listed.

4. Or submit without leaving the page

To show a message in place, submit with fetch() and keep your site listed under Allowed Origins:

const form = document.querySelector("form");


form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  form.innerHTML = res.ok ? "<p>Thanks! We'll be in touch.</p>" : "<p>Something went wrong. Please try again.</p>";
});

5. Keep spam out

Every Formkove form is rate limited and checked by an AI spam filter, so most spam never reaches your inbox. For extra protection, add a honeypot field or Cloudflare Turnstile.

Using a site generator or builder?

There are step-by-step guides for Hugo, Jekyll and Eleventy, Astro, Next.js, WordPress and Webflow.

← All posts