Web Forms

<form action="https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" method="POST">
  <input type="email" name="email" placeholder="Your email" required>
  <input type="text" name="name" placeholder="Your name">
  <input type="text" name="subject" placeholder="Subject" required>
  <textarea name="message" placeholder="How can we help?" required></textarea>
  <button type="submit">Submit</button>
</form>

<form action="https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" method="POST">
  <input type="email" name="email" required>
  <input type="text" name="name">
  <input type="text" name="subject" required>
  <textarea name="message" required></textarea>

  <!-- Custom fields - stored in ticket.customFields -->
  <input type="text" name="company" placeholder="Company name">
  <input type="text" name="phone" placeholder="Phone number">
  <select name="department">
    <option value="sales">Sales</option>
    <option value="support">Support</option>
    <option value="billing">Billing</option>
  </select>

  <button type="submit">Submit</button>
</form>

<form action="https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx"
      method="POST"
      enctype="multipart/form-data">
  <input type="email" name="email" required>
  <input type="text" name="subject" required>
  <textarea name="message" required></textarea>

  <!-- IMPORTANT: Field name must be "attachments" -->
  <input type="file" name="attachments" multiple>

  <button type="submit">Submit</button>
</form>

Success URL: https://yoursite.com/thank-you

Error URL: https://yoursite.com/error

Allowed Origins:
  https://yoursite.com
  https://www.yoursite.com

fetch("https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"  // Required for JSON response!
  },
  body: JSON.stringify({
    email: "[email protected]",
    name: "John Doe",
    subject: "Help needed",
    message: "I need assistance with..."
  })
})
.then(res => res.json())
.then(data => {
  if (data.success) {
    console.log("Ticket created:", data.ticket.ticketNumber);
  } else {
    console.error("Error:", data.error);
  }
});

const formData = new FormData();
formData.append("email", "[email protected]");
formData.append("name", "John Doe");
formData.append("subject", "Help needed");
formData.append("message", "Please see the attached screenshot.");

// Add files - field name MUST be "attachments"
const fileInput = document.querySelector('input[type="file"]');
for (const file of fileInput.files) {
  formData.append("attachments", file);
}

fetch("https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx", {
  method: "POST",
  headers: { "Accept": "application/json" },  // Required!
  body: formData  // Don't set Content-Type - browser sets it with boundary
})
.then(res => res.json())
.then(data => console.log(data));

function ContactForm({ formToken }) {
  const [status, setStatus] = useState('idle'); // idle, loading, success, error
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('loading');
    setError(null);

    const formData = new FormData(e.target);

    try {
      const res = await fetch(
        `https://dispatch-tickets-api.onrender.com/v1/forms/${formToken}`,
        {
          method: 'POST',
          headers: { 'Accept': 'application/json' },
          body: formData,
        }
      );

      const data = await res.json();

      if (data.success) {
        setStatus('success');
      } else {
        setError(data.error || 'Submission failed');
        setStatus('error');
      }
    } catch (err) {
      setError('Network error. Please try again.');
      setStatus('error');
    }
  }

  if (status === 'success') {
    return <p>Thanks! We'll be in touch soon.</p>;
  }

  return (
    <form onSubmit={handleSubmit} encType="multipart/form-data">
      <input type="email" name="email" required placeholder="Email" />
      <input type="text" name="subject" required placeholder="Subject" />
      <textarea name="message" required placeholder="Message" />
      <input type="file" name="attachments" multiple />

      {error && <p className="error">{error}</p>}

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending...' : 'Submit'}
      </button>
    </form>
  );
}

{
  "success": true,
  "ticket": {
    "id": "tkt_abc123",
    "ticketNumber": 1042
  }
}

{
  "success": false,
  "error": "Form submissions are disabled"
}

<form action="https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" method="POST">
  <!-- Honeypot - hide with CSS, bots will fill it -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Submit</button>
</form>

curl -X POST "https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" \
  -H "Accept: application/json" \
  -d "[email protected]" \
  -d "message=test"

<!-- All three are required for file uploads -->
<form action="..." method="POST" enctype="multipart/form-data">
                 <!--              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 1. enctype -->
  <input type="file" name="attachments" multiple>
                 <!--      ^^^^^^^^^^^ 2. exact field name -->
</form>
<!-- 3. Files must be < 20MB and supported types -->

// Wrong - will redirect
fetch(url, { method: 'POST', body: formData })

// Correct - will return JSON
fetch(url, {
  method: 'POST',
  headers: { 'Accept': 'application/json' },
  body: formData
})

<!-- Correct - hidden with CSS -->
<input type="text" name="_gotcha" style="display:none" tabindex="-1">

<!-- Wrong - type="hidden" won't catch bots -->
<input type="hidden" name="_gotcha">

curl -X POST "https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" \
  -d "[email protected]" \
  -d "subject=Test ticket" \
  -d "message=This is a test submission"

curl -X POST "https://dispatch-tickets-api.onrender.com/v1/forms/ft_xxxxx" \
  -F "[email protected]" \
  -F "subject=Test with attachment" \
  -F "message=Please see attached" \
  -F "[email protected]"