Alpine.js form to email

With Alpine.js you can send a form to FormDoc and show the result in place, straight from your HTML.

HTML

<form
  action="https://api.formdoc.dev/v1/submit"
  method="POST"
  x-data="{ status: '' }"
  @submit.prevent="
    status = 'Sending…';
    fetch($el.action, { method: 'POST', headers: { Accept: 'application/json' }, body: new FormData($el) })
      .then((res) => res.json())
      .then((result) => {
        status = result.success ? 'Thanks, message sent.' : result.error.message;
        if (result.success) $el.reset();
      })
      .catch(() => { status = 'Your message couldn’t be sent. Please try again.'; });
  "
>
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
  <p role="status" x-text="status"></p>
</form>

Replace YOUR_ACCESS_KEY with your key from app.formdoc.dev/new. The form keeps its action, so it still sends if Alpine doesn’t load.