Documentation

Everything you need to integrate FormCatch with your website.

Quick Start

Create an account

Create a form endpoint

In your dashboard, click "New Form" to create an endpoint. Copy the unique URL.

Point your form

Set your HTML form's action attribute to your FormCatch endpoint URL. Done.

HTML Form

The simplest integration. Works with any static site, no JavaScript required.

HTML

<form action="https://formcatch.vercel.app/s/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message"></textarea>

  <!-- Honeypot field for spam protection -->
  <input type="text" name="_honey" style="display:none" />

  <!-- Optional: redirect after submission -->
  <input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />

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

AJAX / Fetch

Submit forms without page reload using the Fetch API. Send JSON with the Content-Type: application/json header.

JavaScript

fetch("https://formcatch.vercel.app/s/YOUR_FORM_ID", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "Jane Doe",
    email: "jane@example.com",
    message: "Hello from JavaScript!"
  })
})
.then(res => res.json())
.then(data => console.log("Success:", data))
.catch(err => console.error("Error:", err));

React

A complete React component with loading state and error handling.

React / TypeScript

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");

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

    const form = e.currentTarget;
    const data = new FormData(form);

    const res = await fetch("https://formcatch.vercel.app/s/YOUR_FORM_ID", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(Object.fromEntries(data)),
    });

    if (res.ok) {
      setStatus("success");
      form.reset();
    } else {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send"}
      </button>
      {status === "success" && <p>Message sent!</p>}
      {status === "error" && <p>Something went wrong. Try again.</p>}
    </form>
  );
}

Configuration Options

Honeypot Spam Protection

Add a hidden field named _honey to your form. Bots will fill it in, and FormCatch will reject those submissions automatically.

<input type="text" name="_honey" style="display:none" />

reCAPTCHA

Enable Google reCAPTCHA v2 in your form endpoint settings. Then include the reCAPTCHA widget in your form. FormCatch will verify the token server-side.

<input type="hidden" name="_recaptcha" value="RECAPTCHA_TOKEN" />

Custom Redirect

Add a hidden _redirect field to send users to a custom page after submission. This overrides the default confirmation page.

<input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />

API Reference

POSThttps://formcatch.vercel.app/s/:formId

Submit data to a form endpoint.

Headers

Header	Value	Required
Content-Type	application/json or multipart/form-data	Yes

Body Parameters

Field	Type	Description
*	any	Any key-value pairs. All fields are stored as submission data.
_honey	string	Honeypot field. If filled, submission is rejected silently.
_redirect	string (URL)	URL to redirect to after successful submission.
_recaptcha	string	reCAPTCHA response token for verification.

Response

JSON

// 200 OK
{
  "success": true,
  "message": "Submission received"
}

// 400 Bad Request
{
  "success": false,
  "error": "Spam detected"
}

// 429 Too Many Requests
{
  "success": false,
  "error": "Monthly submission limit reached"
}