Contact Form (with phone) for Gatsby

01'use client';
02 
03import { useState, type FormEvent } from 'react';
04 
05export default function ContactDetailedForm() {
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 detailed contact submission');
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="Jane Builder" required />
33      <label htmlFor="email">Work email *</label>
34      <input id="email" type="email" name="email" placeholder="jane@company.com" required />
35      <label htmlFor="phone">Phone *</label>
36      <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required />
37      <label htmlFor="company">Company</label>
38      <input id="company" type="text" name="company" placeholder="Acme Inc" />
39      <label htmlFor="reason">What's this about? *</label>
40      <select id="reason" name="reason" required>
41        <option value="">Choose…</option>
42        <option>Sales / pricing</option>
43        <option>Partnerships</option>
44        <option>Press / media</option>
45        <option>Support</option>
46        <option>Careers</option>
47        <option>Other</option>
48      </select>
49      <label htmlFor="message">Message *</label>
50      <textarea id="message" name="message" placeholder="Give us context — links, dates, deal size, anything we should know." required />
51 
52      <button type="submit" disabled={status === 'sending'}>
53        {status === 'sending' ? 'Sending…' : 'Send'}
54      </button>
55 
56      {status === 'error' && <p>Something went wrong. Try again.</p>}
57    </form>
58  );
59}