Demo Request for Gatsby

01'use client';
02 
03import { useState, type FormEvent } from 'react';
04 
05export default function DemoRequestForm() {
06  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
07 
08  async function onSubmit(e: FormEvent<HTMLFormElement>) {
09    e.preventDefault();
10    setStatus('sending');
11 
12    const data = new FormData(e.currentTarget);
13    data.set('access_key', 'YOUR_ACCESS_KEY');
14    data.set('subject', 'New demo request');
15 
16    const res = await fetch('https://splitforms.com/api/submit', {
17      method: 'POST',
18      body: data,
19      headers: { Accept: 'application/json' },
20    });
21 
22    const json = await res.json();
23    setStatus(json.success ? 'sent' : 'error');
24    if (json.success) e.currentTarget.reset();
25  }
26 
27  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;
28 
29  return (
30    <form onSubmit={onSubmit}>
31      <label htmlFor="name">Full name *</label>
32      <input id="name" type="text" name="name" placeholder="Hans Becker" required />
33      <label htmlFor="work_email">Work email *</label>
34      <input id="work_email" type="email" name="work_email" placeholder="hans@company.com" required />
35      <label htmlFor="phone">Phone</label>
36      <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" />
37      <label htmlFor="company">Company *</label>
38      <input id="company" type="text" name="company" placeholder="Kraft GmbH" required />
39      <label htmlFor="role">Your role *</label>
40      <select id="role" name="role" required>
41        <option value="">Choose…</option>
42        <option>Founder / CEO</option>
43        <option>Engineering</option>
44        <option>Product</option>
45        <option>Marketing</option>
46        <option>Sales</option>
47        <option>Operations</option>
48        <option>Other</option>
49      </select>
50      <label htmlFor="team_size">Team size *</label>
51      <select id="team_size" name="team_size" required>
52        <option value="">Choose…</option>
53        <option>1–10</option>
54        <option>11–50</option>
55        <option>51–250</option>
56        <option>250+</option>
57      </select>
58      <label htmlFor="use_case">What are you trying to solve? *</label>
59      <textarea id="use_case" name="use_case" placeholder="Replacing Formspree across 14 client sites." required />
60 
61      <button type="submit" disabled={status === 'sending'}>
62        {status === 'sending' ? 'Sending…' : 'Send'}
63      </button>
64 
65      {status === 'error' && <p>Something went wrong. Try again.</p>}
66    </form>
67  );
68}