Catch Documentation

Quickstart

For static sites (HTML, Astro, Hugo, Jekyll), set your form's action attribute to your Catch endpoint:

<form action="https://catchapi.byzo.cc/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Your Message" required></textarea>

  <!-- Optional Custom Redirect URL after submission -->
  <input type="hidden" name="_next" value="https://yoursite.com/thank-you" />

  <!-- Invisible Honeypot Spam Protection (Leave empty) -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Send Message</button>
</form>

Submit asynchronously with JavaScript fetch by including an Accept: application/json header:

"use client";
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");

    const formData = new FormData(e.currentTarget);

    try {
      const response = await fetch("https://catchapi.byzo.cc/f/YOUR_FORM_ID", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: formData,
      });

      if (response.ok) {
        setStatus("success");
        e.currentTarget.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required placeholder="Name" />
      <input type="email" name="email" required placeholder="Email" />
      <textarea name="message" required placeholder="Message" />
      <input type="text" name="_gotcha" style={{ display: "none" }} />
      <button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Sending..." : "Submit"}
      </button>
      {status === "success" && <p>Thank you! Your message was sent.</p>}
      {status === "error" && <p>An error occurred. Please try again.</p>}
    </form>
  );
}

Vue & Nuxt

<script setup>
import { ref } from 'vue'

const isSubmitting = ref(false)
const isSuccess = ref(false)

async function onSubmit(event) {
  isSubmitting.value = true
  const formData = new FormData(event.target)

  const res = await fetch('https://catchapi.byzo.cc/f/YOUR_FORM_ID', {
    method: 'POST',
    headers: { Accept: 'application/json' },
    body: formData
  })

  if (res.ok) {
    isSuccess.value = true
    event.target.reset()
  }
  isSubmitting.value = false
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button type="submit" :disabled="isSubmitting">Send</button>
  </form>
</template>

cURL & Raw HTTP API

curl -X POST https://catchapi.byzo.cc/f/YOUR_FORM_ID \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -d '{
    "name": "Alex Turner",
    "email": "alex@example.com",
    "message": "Interested in consulting services"
  }'

Add a hidden field with the name _gotcha (or your customized field name). Real human visitors do not see or fill this field, but automated spam bots populate all inputs, allowing Catch to automatically tag and isolate the spam submission.

Origin Whitelisting (CORS)

In your Form Settings, you can configure an allowed domain origin list (e.g. yoursite.com, app.yoursite.com). Submissions originating from any unauthorized domain will be rejected with an HTTP 403 Forbidden response.

Custom Thank-You Redirects

You can define where users are redirected after an HTML form submission in two ways:

• Inside form settings: Set a default custom redirect URL.
• Per-form override: Pass a hidden <input type="hidden" name="_next" value="https://..." /> field.

When webhooks are enabled, Catch sends a JSON POST payload to your destination URL with the following structure:

{
  "event": "form_submission",
  "formId": "f_abc123",
  "formName": "Contact Form",
  "submissionId": "sub_xyz789",
  "data": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "message": "Project inquiry"
  },
  "metadata": {
    "ipAddress": "198.51.100.42",
    "country": "US",
    "userAgent": "Mozilla/5.0 ...",
    "referrer": "https://yoursite.com/contact",
    "submittedAt": "2026-10-05T20:15:00.000Z"
  }
}