Alpine.js guide
Alpine.js gives you reactive behavior without a build step. Add `x-data` and a `@submit.prevent` handler that fetches FormLoom, and you get an inline success/error state in a few attributes.
Approach
Use `x-data` for local state and `@submit.prevent` to call `fetch`. Toggle a `status` property to show the result.
Code
contact.html
<form
x-data="{ status: 'idle' }"
@submit.prevent="
status = (await (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($el))),
})).json()).success ? 'ok' : 'error'
"
>
<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>
<p x-show="status === 'ok'">Thanks — we got your message.</p>
</form>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>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 Alpine via CDN before the closing `</body>`.
- `@submit.prevent` handles `preventDefault()` for you.
FAQ
No — include Alpine from a CDN and you're done.
See the full Alpine.js contact form page with a live demo.