Contact form for Alpine.js sites

01<form
02  x-data="{
03    status: 'idle',
04    async submit(e) {
05      this.status = 'loading';
06      const fd = new FormData(e.target);
07      const res = await fetch('https://splitforms.com/api/submit', {
08        method: 'POST', body: fd
09      });
10      const data = await res.json();
11      this.status = data.success ? 'ok' : 'err';
12      if (data.success) e.target.reset();
13    }
14  }"
15  @submit.prevent="submit"
16>
17  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
18  <input name="name" required />
19  <input name="email" type="email" required />
20  <textarea name="message" required></textarea>
21  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
22  <button :disabled="status === 'loading'" type="submit">
23    <span x-show="status === 'idle'">Send</span>
24    <span x-show="status === 'loading'">Sending…</span>
25  </button>
26  <p x-show="status === 'ok'">Thanks!</p>
27  <p x-show="status === 'err'">Error — try again.</p>
28</form>