Jede Website-Formulareinsendung kann in Discord erscheinen. Die Einrichtung dauert etwa fünf Minuten. Entweder schreibst du eine Serverless-Funktion zur Umformung ins Discord-Format oder nutzt einen Endpunkt, der Discord schon unterstützt. Diese Anleitung zeigt beides.

Warum Discord statt deines E-Mail-Postfachs

Wenn du Nebenprojekte entwickelst, ist Discord vermutlich ohnehin offen. E-Mail ist das Standardziel für Kontaktformulare und zugleich der Ort, an dem Nachrichten verschwinden. Zwischen Newslettern, Belegen und GitHub-Meldungen siehst du die Formularnachricht nur zweimal täglich. Eine Meldung in einem #contact Kanal wird in wenigen Minuten gesehen. Und ein Kanal ist standardmäßig gemeinsam: Jemand aus dem Team kann die Nachricht sehen und beantworten, ohne Weiterleitung.

Schritt 1: Discord-Webhook erstellen

Ein Webhook ist eine URL, über die Nachrichten in einen bestimmten Kanal deines Servers gepostet werden können. Die Einrichtung dauert eine Minute:

  1. Öffne deinen Discord-Server, klicke oben links auf den Servernamen und wähle Servereinstellungen.
  2. Öffne links in der Seitenleiste Integrationen, dann Webhooks.
  3. Klicke auf Neuer Webhook. Discord erstellt einen Webhook mit zufälligem Namen. Benenne ihn etwa „Kontaktformular“ und wähle den Zielkanal, zum Beispiel einen eigenen #contact Kanal eignet sich gut).
  4. Klicke auf Webhook-URL kopieren.

Die URL sieht so aus: https://discord.com/api/webhooks/1234…/AbCd…. Behandle sie wie ein Passwort: Wer sie besitzt, kann in diesem Kanal posten.

Schritt 2, Eigenbau: Verbindungscode zwischen Formular und Webhook

Der Haken: Ein Discord-Webhook ist kein Formular-Endpunkt. Er erwartet einen POST mit Content-Type: application/json und einen Inhalt im Discord-eigenen Format, mindestens {"content": "your message"}. Ein HTML-Formular sendet URL-codierte oder Multipart-Daten. Wenn du daher das action direkt auf die Webhook-URL schlägt fehl. Außerdem würde sie öffentlich im Quelltext stehen, wo jeder sie kopieren und deinen Kanal fluten könnte.

Der klassische Aufbau setzt eine Serverless-Funktion dazwischen. Das Formular sendet dorthin; die Funktion formatiert Felder um und leitet sie an Discord weiter:

// api/contact.js: a serverless function (Vercel, Netlify, etc.)
export default async function handler(req, res) {
  const { name, email, message } = req.body;

  if (!email || !message) {
    return res.status(400).json({ error: "email and message are required" });
  }

  await fetch(process.env.DISCORD_WEBHOOK_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      content: `**${name || "Someone"}** <${email}>\n${message.slice(0, 1800)}`,
    }),
  });

  res.redirect(303, "/thanks.html");
}

Das funktioniert und ist ein nettes Wochenendprojekt. Du pflegst aber alles drumherum: Validierung, Spamfilter, Discord-Ratenlimits und Fehlerbehandlung. Discord-Nachrichten erlauben höchstens 2.000 Zeichen, daher das slice: Längere Nachrichten werden abgeschnitten. Das größte Problem: Discord ist deine einzige Kopie. Schlägt fetch fehl oder rutscht eine Nachricht übers Wochenende vorbei, ist sie weg. Es gibt kein Archiv, keinen Antworten-Button und keinen Status „schon beantwortet?“.

Schritt 3, ohne Verbindungscode: Ein Formular-Endpunkt für Discord

Mit Mailcontact, entfällt der Verbindungscode. Dein Formular sendet an den Endpunkt deines Projekts, mit einfachem HTML und ohne JavaScript:

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

Füge in den Projekt-Benachrichtigungseinstellungen Discord als Kanal und die in Schritt 1 kopierte Webhook-URL hinzu. Fertig: Jede Einsendung landet im Projektpostfach und meldet sich im Kanal. Das Benachrichtigungsdokumentation erklären die Details.

Mit MailContact Pro oder Plus bleibt der Webhook serverseitig statt im Quelltext. Validierung und Ratenlimits werden übernommen. Das Postfach behält auch längere Nachrichten als Discord erlaubt. Und da jedes Projekt eine echte Adresse erhält wie [email protected], lösen auch E-Mails eine Meldung im selben Kanal aus: Formular und E-Mail an einem Ort. Discord-Benachrichtigungen sind in Pro und Plus enthalten.

Gut zu wissen: Der Endpunkt liefert JSON statt einer Weiterleitung. Sende dieselben Felder mit wenigen Zeilen fetch. Das Formular-Endpunkt-Anleitung enthalten ein kopierbares Beispiel. Native Formulareinsendungen liefern JSON zurück.

Das Markup ist für jeden Stack gleich, der Einfügeort nicht. Stackspezifische Anleitungen gibt es für Next.js-Kontaktformulare, Astro-Kontaktformulare, und Cloudflare Pages, das keinerlei eigene Formularverarbeitung bietet.

Was eine gute Benachrichtigung enthält

Auf jedem Weg sollte Discord eine Entscheidung am Handy ohne weitere App ermöglichen. Dafür braucht es vier Dinge:

  • Name: wer schreibt, damit du mit „Ada antworten“ etwas anfangen kannst.
  • E-Mail: wie man antworten kann. Dieses Feld fehlt bei Eigenbauten besonders oft. So wird aus einer Benachrichtigung eine Sackgasse.
  • Nachricht: Die ersten Zeilen reichen für die Entscheidung „jetzt“, „heute Abend“ oder „ignorieren“.
  • Quelle: über welches Formular oder welche Adresse sie kam, damit die Meldung auch bei mehreren Projekten eindeutig bleibt.

Eine gute Benachrichtigung sieht etwa so aus:

acme-site: new message
Ada Lovelace <[email protected]>
"Hey, the checkout button 404s on mobile. Happy to
send a screen recording if that helps."
via: contact form

Halte Benachrichtigungen kurz und den vollständigen Datensatz dauerhaft an einem anderen Ort. Deshalb sind Kanal und Postfach gemeinsam besser als allein. Die Fünf-Minuten-Version: Projekt erstellen, Formularcode einfügen, Webhook-URL einfügen. Pro oder Plus wählen um Discord zu verbinden. Für statische Websites ohne Backend hilft außerdem die Anleitung zu ein Kontaktformular zu einer statischen Website hinzufügen behandelt diesen Teil.