Do I need the json-enc extension?

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

How do I show the response?

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

htmx RSVP form

Collect event RSVPs with guest count and dietary needs.

Recommended fields

Field	Type	Required
name	text	Yes
email	email	Yes
attending	select	Yes
guests	number	No
dietary	text	No

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>
    Will you attend?
    <select name="attending" required>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
      <option value="Maybe">Maybe</option>
    </select>
  </label>
  <label>
    Number of guests
    <input type="number" name="guests" />
  </label>
  <label>
    Dietary requirements
    <input type="text" name="dietary" />
  </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>
    Will you attend?
    <select name="attending" required>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
      <option value="Maybe">Maybe</option>
    </select>
  </label>
  <label>
    Number of guests
    <input type="number" name="guests" />
  </label>
  <label>
    Dietary requirements
    <input type="text" name="dietary" />
  </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;
  attending: string;
  guests?: string;
  dietary?: 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,
  attending: form.attending.value,
  guests: form.guests.value,
  dietary: form.dietary.value,
});

Tips

Send a confirmation autoresponder with event details.
Export the submissions to CSV for your final headcount.

FAQ

Export submissions to CSV from the dashboard, or sum the `guests` field.