Den 405-Fehler bei einem auf Vercel gehosteten Kontaktformular beheben

Vercel liefert deinen statischen Build als Dateien aus, und ein POST an eine Datei bekommt 405 mit leerem Body, weil keine Funktion diesen Pfad verarbeitet. Richte die action des Formulars stattdessen auf deinen Ikiform-Endpunkt aus oder schreib eine Vercel Function, die den Post annimmt. Mit Ikiform setzt du die Formular-ID pro Vercel-Umgebung, damit Previews an ein Testformular und die Produktion an das echte senden.

Warum Vercel mit 405 antwortet

Vercel leitet jeden Request an eine statische Datei oder an eine Funktion. Eine statische Site, ein Vite-Build oder eine Next.js-App mit output: "export" hat nur Dateien. Ein GET auf /contact liefert die Datei; ein POST an denselben Pfad hat kein Ziel, also lehnt Vercel ihn ab, bevor irgendein Code von dir laufen könnte:

curl -i -X POST -d "message=hello" https://your-project.vercel.app/contact

HTTP/2 405
server: Vercel
content-disposition: inline
x-vercel-cache: HIT
content-length: 0

Die Antwort hat keinen Body, daher zeigt der Browser eine leere Seite oder seine eigene Fehleransicht. Drei Setups führen hierher:

Du fügst also entweder eine Funktion hinzu oder schickst den Post woandershin. Eine Vercel Function in api/contact.ts funktioniert, aber dann brauchst du eine E-Mail-API, Spamfilter und Rate-Limits, und du pflegst sie. Sendest du den Post an Ikiform, bleibt das Deployment statisch. Die Lösung im HTML ist ein einziges Attribut:

<form method="post">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button>Send</button>
</form>

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">

Wenn du die Funktion lieber selbst schreibst

Eine Funktion ist eine faire Wahl, wenn die Nachricht irgendwohin muss, wo nur dein Code hinkommt. Rechne vorher zusammen, was dazugehört:

• Ein Konto bei einem E-Mail-Anbieter, eine verifizierte Absenderdomain und ein API-Schlüssel in den Umgebungsvariablen von Vercel.
• Validierung auf dem Server, weil die required-Attribute des Browsers eine Bequemlichkeit sind, keine Prüfung.
• Spamfilter und Rate-Limits, sonst schickt dir das Kontaktformular jeden Bot im Internet.
• Einen Ort, an dem Nachrichten liegen bleiben, wenn der E-Mail-Anbieter ausfällt, und eine Möglichkeit, sie erneut zu senden.

Ein Formular-Backend deckt diese Liste für dich ab. Wenn du trotzdem eigenen Code dazwischen haben willst, lass das Formular weiter an Ikiform senden und empfange einen signierten Webhook in einer Funktion; dein eigener Server zeigt den Handler.

Eine Formular-ID pro Vercel-Umgebung

Jeder Pull Request auf Vercel bekommt ein Preview-Deployment. Wenn Previews an dein Produktionsformular senden, landet jede Testnachricht neben echten in deinem Postfach. Leg ein zweites Ikiform-Formular für Previews an und lass die Umgebungsvariablen von Vercel entscheiden. Füge unter Settings › Environment Variables denselben Namen zweimal hinzu:

VITE_IKIFORM_FORM_ID   Production   frm_xxxxxxxxxxxxxxxx
VITE_IKIFORM_FORM_ID   Preview      frm_yyyyyyyyyyyyyyyy

Vite ersetzt %NAME%-Platzhalter in index.html zur Build-Zeit durch VITE_-Variablen, sodass ein einfaches HTML-Formular sie ohne JavaScript nutzen kann. VITE_VERCEL_ENV setzt Vercel für Vite-Projekte, und es hält fest, aus welchem Deployment eine Nachricht kam:

<form id="contact" action="https://ikiform.com/f/%VITE_IKIFORM_FORM_ID%" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" minlength="10" required></textarea>

  <input type="hidden" name="build" value="%VITE_VERCEL_ENV%" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send message</button>
</form>

• Vercel liest Umgebungsvariablen bei einer statischen Site zur Build-Zeit. Nach einer Änderung musst du neu deployen, sonst bleibt der alte Wert im HTML.
• Vite lässt einen Platzhalter stehen, wenn die Variable nicht existiert, daher wird eine fehlende ID als %VITE_IKIFORM_FORM_ID% ausgeliefert, und jeder Post scheitert mit 400 Bad Request, bevor er das Formular erreicht. Die Prüfung unten fängt das ab.
• Die Formular-ID ist so oder so öffentlich. Nur VITE_-Variablen erreichen den Browser, deshalb gehört kein Geheimnis in eine davon.

const form = document.querySelector("#contact");

if (form && form.action.includes("%VITE_")) {
  console.error("VITE_IKIFORM_FORM_ID is not set for this Vercel environment");
  form.querySelector("button").disabled = true;
}

Du nutzt Next.js mit output: "export"? Lies stattdessen process.env.NEXT_PUBLIC_IKIFORM_FORM_ID in einer Client-Komponente; die Hauptanleitung hat ein Formular für den statischen Export. Wenn deine Next.js-App doch auf den Servern von Vercel läuft, kann eine Server Action mit einem Secret Key senden: siehe die Next.js-Anleitung.

Header und saubere URLs

Wenn deine Site eine Content-Security-Policy setzt, setze sie in vercel.json und nimm Ikiform auf. cleanUrls liefert thanks.html unter /thanks aus, was ein aufgeräumteres Weiterleitungsziel ergibt:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "cleanUrls": true,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
        }
      ]
    }
  ]
}

Previews und erlaubte Domains

Preview-URLs wie your-project-git-branch-team.vercel.app sind keine Subdomains von your-project.vercel.app, passen also unter Allowed domains nicht dazu. Posts von dort landen mit origin_mismatch im Spam. Ein weiterer Grund für ein separates Preview-Formular: Lass seine erlaubten Domains leer oder füge den Preview-Host hinzu, den du gerade testest.

Prüfen, ob es funktioniert

1. Führe das curl oben vor der Lösung gegen deine Produktions-URL aus und bestätige den 405. Nach der Lösung beginnt die action des Formulars im deployten HTML mit https://ikiform.com/f/.
2. Öffne ein Preview-Deployment, sende ab und prüfe, ob die Nachricht im Preview-Formular ankommt, nicht im Produktionsformular.
3. Sende auf deiner Produktionsdomain ab und prüfe, ob das Feld build den Wert production hat.
4. Prüfe das Postfach jedes Benachrichtigungsempfängers. Jeder bekommt eine E-Mail mit den Feldern, und Reply geht an den Absender, wenn das Formular ein email-Feld hat.
5. Nichts angekommen? Stell den Statusfilter im Dashboard auf Spam. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

Stolperfallen

Fragen