Job Application for React

'use client';

import { useEffect, useState, type FormEvent } from 'react';

export default function JobForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  // splitforms tracker (drop-off analytics + partial leads), loaded once. It
  // finds the form by data-sf-key and adds a hidden sf_sid field to it.
  useEffect(() => {
    const src = 'https://splitforms.com/embed.js';
    if (document.querySelector(`script[src="${src}"]`)) return;
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.body.appendChild(script);
  }, []);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    // Capture the form now: React clears e.currentTarget once the handler
    // yields at the first await, so calling e.currentTarget.reset() later throws.
    const form = e.currentTarget;
    const data = new FormData(form);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New job application');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success && json.payment_url) {
      // Payment form: finish the payment on the secure Stripe page.
      window.location.href = json.payment_url;
      return;
    }
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) form.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <form data-sf-key="YOUR_ACCESS_KEY" onSubmit={onSubmit}>
      <label htmlFor="name">Full name *</label>
      <input id="name" type="text" name="name" placeholder="Jane Builder" required />
      <label htmlFor="email">Email *</label>
      <input id="email" type="email" name="email" placeholder="[email protected]" required />
      <label htmlFor="role">Position you're applying for *</label>
      <select id="role" name="role" required>
        <option value="">Choose…</option>
        <option>Engineering</option>
        <option>Design</option>
        <option>Marketing</option>
        <option>Sales</option>
        <option>Operations</option>
        <option>Other</option>
      </select>
      <label htmlFor="linkedin">LinkedIn / portfolio URL</label>
      <input id="linkedin" type="url" name="linkedin" placeholder="https://linkedin.com/in/janebuilder" />
      <label htmlFor="resume_url">Resume URL</label>
      <input id="resume_url" type="url" name="resume_url" placeholder="https://..." />
      <label htmlFor="cover_letter">Cover letter *</label>
      <textarea id="cover_letter" name="cover_letter" placeholder="Why this role, why us." required />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>
  );
}