Integrationen · hosting platform

Ein Kontaktformular auf Vercel ohne Serverless-Funktion.

Vercel hat kein eingebautes Formularprodukt. Der übliche Rat ist Serverless plus Mail-API. Überspringe beides: HTML mit Mailcontact-Endpunkt ergibt Projektpostfach und Discord-, Slack-, E-Mail- oder Webhook-Meldungen.

Eine form action funktioniert mit Next.js, Astro, SvelteKit oder statischem HTML auf Vercel. Seiten bleiben statisch oder ISR, ohne Funktionsaufruf oder Mailanbieterkonto.

empfohlene Einrichtung

Nutze das MailContact-Skript mit deinem eigenen Design.

Füge dieses HTML auf deiner Website ein oder verwende den Formulargenerator. Ersetze den Formularlink durch deinen. Das gehostete Skript fügt die verborgene Prüfung ein, übernimmt Versand und Verifizierung und bewahrt Entwürfe bei Fehlern. Du bestimmst HTML und CSS. Free-Formulare zeigen einen sichtbaren Link „Processed by mailcontact.app“, Pro und Plus nicht. Die Rückmeldung folgt der Browsersprache. Setze data-mailcontact-language="fr" am Formular, um Französisch festzulegen.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
  <input type="hidden" name="_language" value="de" />
  <fieldset>
    <legend>Kontaktiere uns</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      E-Mail
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Nachricht
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Nachricht senden</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Für Komponenten mit eigenem Submit-Handler lade dasselbe Skript und nutze MailContact.prepare(form) und MailContact.send() statt der automatischen Markierung. Siehe die Referenz für eigene Oberflächen für Laden, Rückmeldungen und Quellenhinweis bei Free.

das Snippet

Alternative: eine direkte Integration für Vercel.

Dieses Beispiel sendet direkt an die API. Behalte das erforderliche company_website Feld vorhanden und leer. Native Einsendungen öffnen bei Erfolg JSON oder bei Bedarf eine Prüfseite. Eigene Skripte ohne Verifizierung senden verdächtige Nachrichten zur Prüfung in Spam; deutlicher Spam wird ebenfalls ohne Benachrichtigung und Kontingentverbrauch zurückgehalten. Eine Erfolgsantwort bestätigt den Empfang einschließlich Prüfung oder das stille Verwerfen eines ausgefüllten Prüffelds. Siehe Spamschutz für das vollständige Verhalten.

contact.html
<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="What's on your mind?" 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>

so funktioniert es

Drei Schritte, vom Start bis zum Ziel.

01

Postfach erstellen

Ein Postfach pro Projekt. Benenne es nach deinem Deployment und erhalte sofort Endpunkt und Projektadresse.

02

Formular hinzufügen

Füge es in statische Seite, Next.js-Komponente oder Astro-Vorlage ein. Vercel veröffentlicht es nach Push wie jede Änderung.

03

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Zugestellte Nachrichten erreichen dich in deinen gewohnten Tools.

warum Mailcontact

Passt gut zu Vercel.

Den api/-Ordner ganz sparen

Üblich sind Serverless-Funktion, Mail-SDK und API-Schlüssel in Umgebungsvariablen. Eine action ersetzt alles: nichts schreiben, bereitstellen oder rotieren.

Keine Funktionsaufrufe beim Senden

POSTs gehen an Mailcontact statt dein Deployment. Kontaktanfragen zählen nicht zu deinen Funktionsaufrufen. Kein Kaltstart zwischen Besucher und Nachricht.

Preview-Deployments funktionieren einfach

Der Endpunkt akzeptiert jede Herkunft: *.vercel.app-Vorschauen und Produktionsdomain ohne Umgebungsregeln oder Variablen.

FAQ

Vercel + Mailcontact, beantwortet

Hat Vercel eine eingebaute Formularverarbeitung?

Nein. Zum Zeitpunkt der Erstellung hat Vercel kein Formularprodukt. Üblich sind Serverless-Funktion und E-Mail-API. Mit Mailcontact sendet das Formular direkt ins Projektpostfach und deine Website bleibt statisch.

Funktionieren Formulare auf Vercel-Preview-Deployments?

Ja. Der Endpunkt akzeptiert POSTs jeder URL. Dasselbe Snippet läuft auf Preview-URLs, Produktionsdomain und localhost.

Wie zeige ich Erfolg, ohne die Seite zu verlassen?

Nutze das gehostete MailContact-Skript oder MailContact.send() im eigenen Handler und zeige eine Dankesnachricht auf der Seite. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.

Welche Einsendelimits sollte ich kennen?

Der Endpunkt begrenzt auf 20 Anfragen pro Minute und IP mit höchstens 64 KB Inhalt, großzügig für Kontaktformulare. Das schützt vor einfacher Überflutung.

verwandt

Funktioniert auch mit

Ein Postfach für jedes deiner Vercel-Projekte.

Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.

Kostenloses Formular erstellen

Keine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.