Eleventy contact forms, zero client JavaScript.

{# _includes/contact-form.njk — render it anywhere with
   {% include "contact-form.njk" %} #}
<form action="https://api.formwire.com/submit" method="POST">
  <input type="hidden" name="access_key" value="{{ formwire.accessKey }}">

  {# A static build can't redirect after a POST, so FormWire does it.
     Absolute URL — the endpoint sends the visitor back to your site. #}
  <input type="hidden" name="_redirect" value="{{ formwire.thanksUrl }}">

  <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>

// ─────────────────────────────────────────────────────────────────────
// _data/formwire.js — global data: every template, any engine, can read
// {{ formwire.accessKey }}. The key is public by design, safe to commit.

module.exports = {
  accessKey: "YOUR-ACCESS-KEY",
  thanksUrl: "https://yoursite.com/thanks/",
};

<!-- contact.md — Markdown is rendered through a template engine
     first, so the include works here. The default engine is Liquid; for
     the Nunjucks tag below, set markdownTemplateEngine: "njk" in
     eleventy.config.js (next tab). Keep the include flush-left:
     indented four spaces, it becomes a literal code block. -->
---
layout: layouts/base.njk
title: Contact
permalink: /contact/
---

Have a question? The form below lands straight in our inbox, and we
reply to your email address.

{% include "contact-form.njk" %}

<!-- thanks.md — the _redirect target. The permalink controls the output
     URL; keep it matching formwire.thanksUrl, trailing slash included. -->
---
layout: layouts/base.njk
title: Thanks
permalink: /thanks/
---

Your message is on its way. We'll get back to you shortly.

// eleventy.config.js — one line lets .md files use Nunjucks tags,
// so the include renders inside Markdown content.
export default function (eleventyConfig) {
  return {
    markdownTemplateEngine: "njk",
  };
}

// ─────────────────────────────────────────────────────────────────────
// Optional: an inline status message instead of the redirect. Put this
// in _includes/layouts/base.njk before </body> — the form keeps working
// exactly the same wherever the script hasn't loaded.

<script>
  const form = document.querySelector('form[action^="https://api.formwire.com"]');
  form?.addEventListener("submit", async (event) => {
    event.preventDefault();
    const data = new FormData(form);
    // The redirect serves the no-script path; the fetch path reports inline.
    data.delete("_redirect");

    const res = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: data,
    });
    const json = await res.json();

    const status = document.createElement("p");
    status.setAttribute("role", "status");
    status.textContent = res.ok
      ? "Thanks — your message is on its way."
      : json.message || "Something went wrong — please try again.";
    form.replaceWith(status);
  });
</script>