Where do I put the form?

In a layout or `_includes` partial so it's reusable across your site.

Jekyll contact form

Verified against Jekyll 4.x · June 2026

Jekyll powers a huge number of GitHub Pages sites, which famously can't run server code. FormLoom is the missing backend: a normal `<form method="POST">` in your layout or include, posting to a hosted endpoint.

Customize in the generator Full Jekyll guide

The code

Drop the HTML form into a layout or `_includes` partial. Use a hidden `redirect` for the thank-you page.

Plain HTML (no JavaScript)

contact.html

<form action="https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY" 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 placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

AJAX fetch (vanilla JS)

contact.html

<form id="contact-form">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify(Object.fromEntries(new FormData(form))),
  });
  const data = await res.json();
  if (data.success) {
    form.reset();
    alert("Thanks — we got your message.");
  } else {
    alert(data.message || "Something went wrong.");
  }
});
</script>

@formloom/client (typed SDK)

submit.ts

// npm i @formloom/client
import { createForm } from "@formloom/client";

type Contact = {
  name: string;
  email: string;
  message: string;
};

const form = createForm<Contact>("YOUR_ACCESS_KEY");

// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
  name: form.name.value,
  email: form.email.value,
  message: form.message.value,
});

Gotchas

GitHub Pages serves static files only — the form must POST to an external backend like FormLoom.
Use `_includes` to reuse the form across pages.

Form types for Jekyll

Tailored field sets and code for common use cases.

Jekyll contact form Jekyll newsletter form Jekyll waitlist form Jekyll feedback form Jekyll support ticket form Jekyll lead capture form Jekyll rsvp form Jekyll job application form Jekyll survey form Jekyll bug report form

FAQ

Not on its own — it's static-only. FormLoom provides the backend your Jekyll form POSTs to.