htmx support ticket form
A structured support request with priority and attachments.
Recommended fields
| Field | Type | Required |
|---|---|---|
| name | text | Yes |
| Yes | ||
| priority | select | Yes |
| subject | text | Yes |
| description | textarea | Yes |
| attachment | file | 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>
Priority
<select name="priority" required>
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Urgent">Urgent</option>
</select>
</label>
<label>
Subject
<input type="text" name="subject" required />
</label>
<label>
Describe the issue
<textarea name="description" required></textarea>
</label>
<label>
Attachment
<input type="file" name="attachment" />
</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>
Priority
<select name="priority" required>
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Urgent">Urgent</option>
</select>
</label>
<label>
Subject
<input type="text" name="subject" required />
</label>
<label>
Describe the issue
<textarea name="description" required></textarea>
</label>
<label>
Attachment
<input type="file" name="attachment" />
</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;
priority: string;
subject: string;
description: string;
attachment?: 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,
priority: form.priority.value,
subject: form.subject.value,
description: form.description.value,
attachment: form.attachment.value,
});Tips
- Allow a file attachment so users can include screenshots (FormLoom supports up to 25MB on Pro).
- Forward to your helpdesk via webhook to auto-create tickets.
FAQ
Yes — FormLoom supports 10MB file uploads on the free tier; add a `file` input.