Einrichtungsanleitung

Erste Schritte

Bei der Registrierung wird Ihr erstes Formular automatisch angelegt. Kopieren Sie die URL aus Ihrem Dashboard und tragen Sie sie als action Ihres Formulars ein. Als method verwenden Sie POST.

<form action="https://formchan.app/f/YOUR_FORM_KEY" method="POST">
  <input name="name">
  <input name="email" type="email">
  <textarea name="message"></textarea>
  <button>Senden</button>
</form>

Nach dem Absenden sieht die Person eine Bestätigungsseite. Die Nachricht landet in Ihrem Posteingang, und die KI vergibt ★ und Tags.

Feldnamen

Sie können Felder beliebig benennen. Jedes gesendete Feld erscheint unverändert im Posteingang und in den Benachrichtigungs-E-Mails.

Die E-Mail-Adresse für Antworten wird aus einem Feld namens email gelesen. Auch mail und _replyto funktionieren. Der Name des Absenders wird aus name oder fullname gelesen.

Eine Einsendung darf bis zu 64 KB groß sein, mit bis zu 50 Feldern und 5.000 Zeichen pro Feld.

Nach dem Absenden

Ohne weitere Einstellung zeigt Formchan eine eigene Bestätigungsseite mit einem Link zurück zur vorherigen Seite.

Um auf eine eigene Seite weiterzuleiten, tragen Sie deren URL in ein verstecktes Feld namens _next ein.

<input type="hidden" name="_next" value="https://example.com/thanks">

Senden per JavaScript

Senden Sie mit dem Header Accept: application/json, dann antwortet Formchan mit JSON statt mit einer Seite. Die Besucher bleiben auf Ihrer Seite.

const res = await fetch('https://formchan.app/f/YOUR_FORM_KEY', {
  method: 'POST',
  headers: { Accept: 'application/json' },
  body: new FormData(form),
});
const data = await res.json(); // { ok: true }

Bei Erfolg erhalten Sie ok: true. Bei einem Fehler erhalten Sie ok: false und einen dieser Fehlercodes.

Spamschutz

Fügen Sie Ihrem Formular ein verstecktes Feld namens _gotcha hinzu. Menschen sehen es nicht, Bots füllen es aus. Solche Einsendungen werden scheinbar angenommen und dann verworfen.

<input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

Nachrichten, die in kurzer Zeit wiederholt von derselben Stelle kommen, werden abgelehnt.

In den Einstellungen des Formulars können Sie festlegen, welche Websites an das Formular senden dürfen. Einsendungen von anderen Websites werden abgelehnt.

WordPress, Webflow und mehr

HTML

Verwenden Sie den Formularcode oben unverändert.

WordPress

Fügen Sie den Formularcode in einen Block „Individuelles HTML“ ein.

Webflow

Tragen Sie in den Formulareinstellungen die URL bei Action ein und setzen Sie Method auf POST.

React / Next.js

Senden Sie mit fetch, wie unter „Senden per JavaScript“ gezeigt.

Benachrichtigungen

★3-Nachrichten gehen sofort nach Eingang per E-Mail an Ihre Benachrichtigungsadressen. Wenn Sie eine Adresse hinzufügen, senden wir ihr eine Bestätigungs-E-Mail. Die Benachrichtigungen beginnen, sobald der Link darin angeklickt wurde.

★1 und ★2 kommen gesammelt in einer E-Mail pro Tag. Die Uhrzeit können Sie ändern. An Tagen ohne Neues wird keine E-Mail gesendet.

Ab dem Tarif Pro können Sie Nachrichten auch an Slack, Chatwork, Microsoft Teams, Google Chat und Discord senden.

Webhooks

Im Tarif Business sendet Formchan einen POST mit JSON an Ihre URL, sobald eine Nachricht eingegangen ist und die KI sie gelesen hat.

Der Header X-Formchan-Signature enthält einen HMAC-SHA256 des Request-Bodys, signiert mit Ihrem Webhook-Geheimnis, im Format sha256=…. Berechnen Sie denselben Wert auf Ihrer Seite, um zu prüfen, ob die Anfrage wirklich von Formchan kommt.

Beispiel für den Body

{
  "event": "submission.created",
  "at": "2026-10-12T09:29:41.000Z",
  "workspace": { "id": "w_…", "name": "Harbor Design Studio" },
  "submission": {
    "id": "sb_…",
    "number": 1,
    "form": { "id": "fm_…", "name": "Contact" },
    "received_at": "2026-10-12T09:29:38.000Z",
    "name": "Emily Parker",
    "email": "emily@example.com",
    "fields": { "name": "Emily Parker", "email": "emily@example.com", "message": "…" },
    "stars": 3,
    "tags": [{ "id": "tg_…", "name": "Inquiry", "by": "ai" }],
    "summary": "Wants a consultation on adding a second floor.",
    "reason": "Concrete request with budget and timeline.",
    "done": false
  }
}

Signatur prüfen (Node.js)

import crypto from 'node:crypto';

// rawBody: the request body as a string, before JSON.parse
function isFromFormchan(rawBody, signature, secret) {
  const expected = 'sha256=' + crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
  const a = Buffer.from(expected), b = Buffer.from(signature || '');
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}