How do I show the response?

Use `hx-swap` to replace the form (or a target) with FormLoom's response.

⧉

htmx contact form

Verified against htmx 2.x · June 2026

htmx lets you POST a form with attributes alone. Add `hx-post` pointing at FormLoom plus the `json-enc` extension so the body is JSON, and swap in a success message — no custom JS.

Customize in the generator Full htmx guide

The code

Use `hx-post`, `hx-ext="json-enc"`, and an `hx-headers` attribute for `Accept: application/json`. Swap the response into the page.

htmx (hx-post + json-enc)

contact.html

<!-- Include htmx + the json-enc extension -->
<form
  hx-post="https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY"
  hx-ext="json-enc"
  hx-swap="outerHTML"
  hx-headers='{"Accept": "application/json"}'
>
  <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>

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>

@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

Include the `json-enc` extension script so htmx sends JSON.
Set `Accept: application/json` via `hx-headers` so FormLoom returns JSON.
Use `hx-swap` to control where the success message lands.

Form types for htmx

Tailored field sets and code for common use cases.

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

FAQ

Yes, to send a JSON body. Without it htmx sends form-urlencoded, which FormLoom also accepts.